Web Font Anti-Pattern: Using local fonts

Oc­to­ber 19, 2015

Never mix lo­cally in­stalled fonts and web fonts in @font-face rules. As­sum­ing two fonts are iden­ti­cal be­cause they share a name is a recipe for dis­as­ter.

The @font-face src prop­erty takes one or mul­ti­ple URLs, which tells the browser where to find a web font. The src prop­erty also ac­cepts a local() value which refers to a lo­cal font by name. The browser will check if the font is avail­able un­der the lo­cal name and use it. If it is­n’t avail­able it’ll move on to the next local or url value un­til it finds ei­ther a lo­cal or web font. The syn­tax is pretty straight­for­ward: add one or more lo­cal font fam­ily names be­fore the web font.

@font-face {
  font-family: Neue Helvetica;
  src: local('Helvetica Neue'),
       local('Helvetica'),
       url(helvetica.woff);
}

At first glance this may seem like a nice per­for­mance op­ti­mi­sa­tion. If the font is avail­able lo­cally the browser does­n’t need to down­load the web font and dis­plays the lo­cal font im­me­di­ately. This would in­deed be a great op­ti­mi­sa­tion ex­cept for one lit­tle prob­lem. Even though a lo­cal font matches the name of a web font, there is no guar­an­tee it is ac­tu­ally the same font. In fact, it most likely is not.

Apart from the ob­vi­ous cases where a font is named in­cor­rectly, there are more in­sid­i­ous cor­ner cases to con­sider. Many web fonts dif­fer from their “desk­top” ver­sion. Web fonts are of­ten sub­sets (i.e. they do not con­tain the same char­ac­ters) or are oth­er­wise mod­i­fied for web use. Mod­i­fi­ca­tions can in­clude more ex­ten­sive hint­ing, nor­malised ver­ti­cal met­rics, re­moval of Open­Type fea­tures, and so on. The chance that a web font is ex­actly the same as an in­stalled font with the same name is very slim.

This can af­fect your site in many ways de­pend­ing on the dif­fer­ence be­tween the lo­cal and the web font. The text might be ren­dered dif­fer­ently, some char­ac­ters may fall back to other fonts, Open­Type fea­tures can be miss­ing en­tirely, or the line height may be dif­fer­ent. Most type­faces also evolve over time; char­ac­ters may look com­pletely dif­fer­ent from one ver­sion of the same type­face to the next. You’ll never know what ver­sion is in­stalled lo­cally un­der the same name.

This “op­ti­mi­sa­tion” is pri­mar­ily used by Google Fonts, but it’s pop­ping up in blogs and ar­ti­cles every now and then. Yes, it will be faster. But it is not a good idea un­less you ac­cept your site may look wildly dif­fer­ent de­pend­ing on what fonts your users have in­stalled. It makes more sense to load a web font and to fall back on sys­tem fonts when the web font is not avail­able, rather than deal with the mul­ti­tude of lo­cally in­stalled ver­sions of a web font. Some op­ti­mi­sa­tions are too good to be true.

This ar­ti­cle is part one of an on­go­ing se­ries on web font anti-pat­terns. Read the in­tro­duc­tion, part 1, part 2, part 3, and part 4.