cart

Adding Webfonts to your Site

Ensure that you have access to your website files. This is usually achieved using an FTP client application, many of which are free. You may also have access via a Control Panel and the methods of access will vary according to your web host. You should also be familiar with root and relative url links and be able to set them appropriately.

Adding a single webfont to your website

We provide webfonts in two formats: WOFF (for older browsers) and WOFF2 (current browsers). Variable webfonts are provided as TTF files - see Using Variable Webfonts

You are advised to include both WOFF and WOFF2 formats on your website and (optionally) to specify a fallback font (eg. 'Arial', sans-serif) for legacy browsers that support neither of these formats. If you do not specify a fallback font the browser will use its own default font.

Where the character set of a font exceeds 400, two character set versions are provided in each format:

a full character set:

BrowserSans-Regular.woff
BrowserSans-Regular.woff2


a minimum character set:

BrowserSans-Regular-min.woff
BrowserSans-Regular-min.woff2

Upload the webfonts and CSS files suitable locations on your website.


Using the minimum character set version (if provided)

If your website is straightforward and delivered in English and European languages, then using the minimum character set will cover your requirements and result in faster performance. Use the following @font-face declaration, making sure to change the src: url to the location of the font file on your site.


@font-face {
    font-family: 'Browser Sans Regular';
    src: url('BrowserSans-Regular-min.woff2') format('woff2');
    src: url('BrowserSans-Regular-min.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

If no minimum version is provided, use the full version below.


Using the full character set version

The full version will take advantage of the complete character set, opentype features and any other language scripts the font may contain. Use the following @font-face declaration, making sure to change the src: url to the location of the font file on your site.


@font-face {
    font-family: 'Browser Sans Regular';
    src: url('BrowserSans-Regular.woff2') format('woff2');
    src: url('BrowserSans-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

 


Where to put the @font-face declaration

The @font-face declaration (above) may be included at the top of your existing CSS file or in a separate CSS file (provided). If you use a separate file, do not forget to provide a link in the head section of your pages, once again carefully checking the name of the file and its location:


<link href="BrowserSans-Regular.css" media="screen, handheld" rel="stylesheet" type="text/css" />

Once that is in place, you can use the font wherever like, either by defining it in your CSS stylesheets, for example:


.body{ font-family: "Browser Sans Regular", Arial, sans-serif; }

or, if your page editing interface allows it, by inserting it 'inline' in your page html, eg:


<p style="font-family: Browser Sans Regular;"></p>

 


Not working?

Your browser may have cached your stylesheets, so empty the cache if you can or quit your browser, relaunch and try again.

Your linked files (html, css, webfont) may not be connecting, so check your url links, the most frequent cause of problems. 'Relative' links can be confusing so you could try creating links from the root of your website. To do this enter the url as /somefolder/someotherfolder/thefont.woff where the first slash indicates your home or public_html directory.