Webfonts in practice
We started using a new font on GOV.UK last week, and received feedback that it wasn’t working in everyones browsers. Creative lead Chris Heathcote details the changes the team has made to make sure the font works well for everyone.
There have been a few issues we’ve encountered, and I wanted to explain what we’ve done to fix them so far, and document what we’ve found to work for other developers and designers wrestling with the same issues.
Turning your font (either a ttf or otf file) into woffs and eots isn’t straightforward: there are online utilities for doing this (see font-squirrel and others) but for our font we were getting results that didn’t render well on PCs (Chrome and Firefox in particular). We’re now looking at using FontForge for woff conversion and still trying various utilities (including ttf2eot) to create the eot file. This fixes most of the issues with font rendering in Chrome, Firefox and Safari on PCs.
We’ve stripped out several font sizes from the site – IE doesn’t understand very precise sizes (more than two decimal places) and certain sizes rendered better than others in IE8. So we’ve tweaked all the font sizes and this fixes some of the rendering issues in IE8, but we’re still investigating and tuning to render the font more clearly.
We’ve solved the issue of the font flashing using several methods to reduce the loading time:
- We have set our css and font files to be cached by the browser using an Expires header set by our webserver.
- IE8 get served a different css file to other browsers – this means each browser only loads the font files it needs.
- We recut the font file with a reduced set of glyphs (letters, numbers, punctuation and other symbols) to just the characters we use on the site. This reduced the size by a third.
- We now only use one font weight throughout the site rather than two. This means there’s only one font file to load.
The font is included directly in the css file using base64 encoding, rather than creating another http call. This is a bigger file to download the first time you visit the site, but this is then cached and shouldn’t need to be downloaded again. Note that we’re not using this technique to serve the font to IE8 – it has a maximum base64 data size of 32k, which we will go over as we add the characters needed for Welsh and other languages.
Between these fixes, we’ve got the font loading time from 500-1000ms to 1-2ms.
We’re still evaluating the font and refining how we implement it. This has been a real team effort so far to get it working well: thanks to Mark, Mazz, Brad, JamesW, JamesS, Jamie, Ben, Alex, Dafydd (& Jake from Lanyrd).