Join our HiFi mailing list to receive the latest news & updates

Steps to use high-performing @font-face on your HiFi Site

0 Comment(s) | Posted | by Pierre Lebrun | |

For a long time, designers have been very limited when it comes to fonts on the web. There is just a small list of web safe fonts that reliably render correctly across multiple browsers and operating systems. If a designer wanted to use a font that wasn't on this short list, there were very few options, all having serious drawbacks.

Historic solutions to solve the font problem include replacing text with images, cufon, a technique for using javascript to render text and sIFR, which uses flash to substitute text with flash rendering of fonts. These are workable solutions, but not without their drawbacks. They display fonts in a non-native manner, causing text selection issues, increased hardware demands and dependencies on browsers/devices supporting a third party proprietary plugin.

In comes @font-face. @font-face is a web standard with increasing, and now-nearly universal desktop browser support. It allows designers to include and define fonts in CSS. The basic syntax is as following:

@font-face {
    font-family: 'Foo Font';
    src: url('foofont.otf');
}
h1 { font-family: 'Foo Font', arial, sans-serif; }

Once you declare a new font family, you are able to use it natively, just as you would a standard web-safe font. The above code assumes you have an opentype font file 'foofont.otf' in the same directory as the css file.

If you don't want to host the font files yourself, there are third party services - both free and paid - that will do it for you. The two services we most recommend are Google Fonts (free), which has many open source fonts and TypeKit (paid) which offers access to fonts from a number of popular foundries. These are simple to use and get you up and running right away.

Cross-Browser Compatibility

While it would be nice to simply use the code above and have @font-face just work, cross-browser support for font formats makes things a little trickier. The general syntax works in nearly all modern browsers, but the actual format the font files need to be in varies.

In order for fonts to render correctly across browsers, we need to include all of the supported formats - which looks something like this:

@font-face {
    font-family: 'Foo Font';
    src: url('foofont.eot');
    src: url('foofont.eot?#iefix') format('embedded-opentype'),
         url('foofont.woff') format('woff'),
         url('foofont.ttf') format('truetype'),
         url('foofont.svg#ChantelliAntiquaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ugh. It's quite the pain to come up with all of these different font formats. Fortunately, there's an easy way to do this: Fontsquirrel.com's @font-face generator lets you generate the css and font files you need in just a few clicks. We'll cover @font-face generator usage in the next section.

Using @font-face on HiFi

HiFi serves all of its theme assets (css, scripts, images, fonts) from a separate subdomain: ui.domain.com. This is done as recommended by YSlow and Google PageSpeed. By serving files from multiple (sub)domains, you increase the browsers ability to make requests in parallel, downloading your site faster.

Unfortunately, Firefox doesn't like showing fonts that are served on a different subdomain from the page for security reasons, so it won't render a font from ui.domain.com on domain.com.

There is a workaround however! In fact, it also happens to speed up page load times: you can embed the font code directly into the CSS rather than keeping it in a separate file. This saves browsers from having to download additional file(s) AND it's compatible with Firefox. It works using Base64, an encoding scheme that lets you translate binary data into an ASCII string format. Here are the steps required to do it:

  1. Find and download the regular font files you'll need. These will be .otf or .ttf.
  2. Ensure you own the proper liscenses for the fonts you'll use.
  3. Go to the FontSquirrel @font-face generator: http://www.fontsquirrel.com/fontface/generator
  4. Click +Add Fonts and add in an otf or ttf file for each font you need.
  5. Click the 'Expert' option
  6. Under CSS Options, choose Base64 encode
  7. Check the license agreement
  8. Generate/Download the kit
  9. You now have a zip containing a CSS file and a bunch of different font formats. The font files all get used by obscure browsers and IE. Most browsers will use the base64 encoded font in the CSS.
  10. Rename the CSS file to something useful like 'fontname.css'.
  11. Open the CSS file
  12. You'll notice the giant blocks of code immediately. These are the base64 embedded fonts. You'll also notice a few references to the external fonts that get used by some browsers.
  13. These external font references account for the font files being in the same dir as the CSS file. This isn't the case with HiFi. You'll need to change url(fontname.woff) (or whatever) to url(../fonts/fontname.woff). Do this with a search/replace so you don't miss any.
  14. Upload the css file to HiFi under '/styles'
  15. Upload all the font files to HiFi under '/fonts'
  16. You now need to include the CSS file in your index.html above your other stylesheets. This is a rare case where you don't want to necessarily compile/minify the CSS together with everything else. Create a separate {% css %} declaration above your main one for your fontname.css file.
  17. Voila, you can now use the fonts like any other: font-family: 'fancy name', arial, sans-serif;

It may seem like a bit of work to do this, but once you get the hang of it you'll be able to start using new fonts very quickly. It's also good to know that by using this technique, your fonts will work reliably across desktop browsers and perform as well as they can.

0 Comment(s) | Posted | by Pierre Lebrun | |

Comments

  1. There are no comments yet.