Extending the use of Fonts in Web Publishing

For many years, when designing a website, you were limited to using only web-safe fonts – of which there were almost none. Or you could opt for specifying a number of fonts that the reader might have installed on their computer, so you would at least have a reasonable chance of one of your choices being displayed.

This has changed in recent years and there is now a wide selection of fonts available for use on your website. However, many designers use them in ways that only work on one or two web browsers – with the worst offenders targeting Internet Explorer (PC) or Safari (Mac) only. Given that both of these have a minority share and that PCs are now a minority of internet devices, I am shocked when I encounter this kind of tunnel vision around platforms. Good web design is design for the whole web, not just a clique.

This narrowness of thinking is also completely unnecessary – there are a number of type foundries out there that provide an easy means to use web fonts in a cross-platform and cross-browser way – one that works on desktop PCs (running any OS), tablets (any OS) and phones (any OS).

The two that I use are Google Fonts and Fonts.com. Both of these services allow you to create a link to their servers so that fonts are downloaded on demand – you don’t have to install them on your website. Furthermore, the download is tailored to the reader’s platform and browser at the point of use, so that the fonts appear seamlessly without technical juggling on the web designer’s part.

Google Fonts

Google fonts provides access to a large range of fonts. It has a very accessible font browser. The fonts are available for free and using them is incredibly simple.

Fonts are incorporated into your design using CSS features. These can be either a CSS stylesheet link in the HTML header:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

This should be placed before the site’s stylesheet declarations.

Alternatively, an import statement can be added to the top of the CSS file:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

The exact coding for these is given for each font that you choose, so they can be copy and pasted into your website design.

Once a font has been imported in one or other of these ways, the fonts can be referenced as usual in CSS font-family declarations:

.content p {font-family: 'Open Sans', sans-serif;

Note the different handling of spaces in font names.

Fonts.com

Fonts.com provides access to a huge range of fonts. I have found that many of the most common fonts around are not available from Google, but are available from Fonts.com.

There is a Free service available, which creates a pop-up advert for Fonts.com. This is clearly OK if you want to advertise your use of Fonts.com, but would be unacceptable for a client’s website design. A small fee (£4/mo at the time of writing) for the Basic package gets rid of  this popup and allows you up to 2 “projects”. Each project can be used for several domains, but has common settings – it can’t be separately tailored for each domain. A larger fee (£10/mo at the time of writing) for the Standard package gets you unlimited projects.

The Free and Basic packages on Fonts.com uses JavaScript. You create a link to a JavaScript script on their website, then do all of the font configuration through their website’s project manager. This project manager allows you to bind a font to a particular part of the design using CSS selectors. These override your CSS files, so you can selectively use fonts from fonts.com to override the website’s font definitions.

The Standard package and upwards (there are also Pro and Master packages) give you the option of using CSS imports for the font download, so is not reliant on JavaScript.

When you create a package in the Fonts.com package manager, you are given a script tag to copy and paste into your website:

<script type="text/javascript" src="http://fast.fonts.net/jsapi/12345678-90ab-cdef-1234-567890abcdef.js"></script>

The last part is unique to this project. Add this to your website’s <head> element.

If you are designing a WordPress theme, add this in your theme code, typically in the functions.php file:

add_action('wp_enqueue_scripts', 'customise_fonts');
function customise_fonts()
{
  wp_enqueue_script('customise-fonts', 'http://fast.fonts.net/jsapi/12345678-90ab-cdef-1234-567890abcdef.js', null, null);
}

That’s all you have to do to the website itself, the rest of the work is done in the Fonts.com project manager. First, specify the domains that the project applies to – if you try to use a project in a domain not specified, then it won’t work. Then, select which fonts you want to use on your website. You can do this by browsing the website and adding fonts to your web font project. Finally, choose CSS selectors to bind fonts to HTML elements. These can be class, ID or element selectors. For example, I bind heading fonts to the selectors:

.content h1, .content h2, .content h3

This ensures that only headings in the content get changed, any use of headings elsewhere on the site (e.g banner headers and sidebar widgets) are unaffected. Similarly I bind the body text fonts to the paragraph selectors:

.content p

This is not complete – for example, you might want to bind to list elements and form elements if you use them.

Using the project manager to bind the fonts to selectors allows quick prototyping, but for more thorough design, you can reference the font names in CSS files. The project manager gives examples. For example, here’s the CSS bindings for a website that uses Frutiger for titles and Baskerville for body text:

.content h1, .content h2, .content h3 {font-family:'Neue Frutiger W01';}
.content p {font-family:'L Baskerville W01';}

If you have CSS bindings, you don’t need the project bindings.

Leave a Reply