using web fonts

Tips on using Web Fonts

Many times I’ve found myself wondering what font or typeface has been used on a website, particularly in these days when the availability is not restricted to just what the end user has installed on their local computer system.

Being an ex-typesetter from the days when type was set in metal, and leading (line-height) was actually a piece of lead, I’ve always been fascinated with type. For a long time, web browsers have disallowed the use of fonts except for the most pedestrian and over-used varieties, and as the general public we’ve been punished unduly for the pleasure of access.

“What’s the alternative?”, you may ask. Using Web Fonts. It involves the end user downloading the font to their system where it is then employed to style web pages on-the-fly.

From experience, when users are asked to perform an action where they’re not entirely sure of the possible ramifications, they tend to say ‘No’; so when a user is asked “Do you want to download this font….”, despite the fact that it probably is only a font and not some obscure computer virus, they’ll still err on the side of caution.

Consequently developers these days use a non-exclusive combination of CSS (Cascading Style Sheets), Javascript and server-side scripting to make the transition from Courier or Times New Roman to something more fancy .

In CSS, we employ either @font-face or @import to use the font.

When you’re using Web Fonts, where is the actual font stored?

It can be stored on the website that the user is browsing, or it can be served from a CDN (Content Delivery Network).

The difference? Let’s say that you want to use the heading font that I do on this website – it’s Cinzel by the way. You could either buy the font, create versions to target the different web browsers, store them on your web server and then make reference to the font in your CSS by using @font-face or @import.

Alternatively you could make the references point to a commonly-used content delivery network like Google Fonts. So far, you’re probably wondering what the difference would be and why you wouldn’t just store all your assets on your own server – that way you get to completely control the user experience.

Local vs CDN

OK, I’ll answer my own question now – the difference is that if the end user has browsed a website that used the same font and is now browsing your site that uses the very same font, the load time and resource overhead would be significantly reduced if the fonts were loaded via the content delivery network.

Remember that the end-user’s browser won’t make the distinction that the font is the same – it’ll look at the file location and will load up the font (taking time and resources) if the address doesn’t match a pre-cached version.

How to use a CDN to display fonts.

One example is to use Google Fonts. Go to the site and choose a font. Remember that the more popular the font, the more likely your end users will already have downloaded and cached it.

Once you’ve chosen the font, click the ‘Add To Collection” button at the right of the page.

Now you can go to the bottom of the page and click the Review button to see your font in action, or the ‘Use’ button to get the assets.

How do you get the best out of using web fonts?

Using Web Fonts in HTML:

If you have access to the html head tag of your site then you can easily add the standard link tag:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Using Web Fonts with CSS:

Alternatively you can use @import in either a style tag or within a linked CSS file to add the necessary assets:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Once you’ve pointed to the font’s content delivery network, you can then make reference to the font within the CSS:
p {
font-family: 'Open Sans', sans-serif;
}

Using Web Fonts with Javascript:

You can also use the Javascript option to embed the font but in my opinion this can be a little clunky.
<script type="text/javascript">
  WebFontConfig = {
    google: { families:

[ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Install Chrome / Safari Plugin that examines the font:

The main reason I started writing this article is that I have recently found a really cool little Chrome and Safari extension that exposes the font and font options with the easiest of operations.

It’s called Font Face Ninja and might save you a bunch of time. I know it did for me:

 

Blog Categories