log

January 31, 2010

All you never wanted to know about browser generic font family fallbacks

I recent­ly need­ed to know exact­ly what fonts desk­top browsers use in the case of gener­ic font fam­i­lies. Get­ting this info for mul­ti­ple plat­forms and lan­guages is actu­al­ly pret­ty dif­fi­cult unless you enjoy sift­ing through sev­er­al dif­fer­ent source trees in sev­er­al dif­fer­ent source viewers.

Locales are gen­er­al­ly expressed as two-let­ter lan­guage codes (‘en’ for Eng­lish, ‘ar’ for Ara­bic), some­times with an addi­tion­al two-let­ter code for region or deriv­a­tive (‘en-GB’ for British Eng­lish, ‘zh-CN’ for Sim­pli­fied Chi­nese). A good ref­er­ence is the the Plesk Locale Codes doc.

Skip to the matrix if you’re just after en-US defaults.

Mozilla

Prob­a­bly the eas­i­est to read is Mozil­la’s prefs file, sim­ply because it’s all in one place. It’s grouped into plat­form then locale. For exam­ple, pref("font.name.serif.ja", "?? ???") spec­i­fies the serif font for Japanese.

Note that these may not be the defaults in all Mozil­la-derived browsers

Chrome

Chrome breaks down font defaults into a gener­ic plat­form file then spe­cif­ic over­ride files. They fol­low a nam­ing con­ven­tion using the locale codes above. Files are in XML, thus need­less­ly ver­bose and hard to skim. Look for <message name="IDS_SERIF_FONT_FAMILY" use_name_for_id="true">Times New Roman</message> at the bot­tom of gener­ic files and <translation id="IDS_SERIF_FONT_FAMILY">Tahoma</translation> in the overrides.

Safari/Webkit

Unlike the browsers above, Safari itself isn’t open source and so it’s hard to get a defin­i­tive list out­side of West­ern locales. Webkit (the under­ly­ing engine that is open source) has these en-US defaults hard coded:

Stat­ing the obvi­ous but rel­e­vant: Webkit has been port­ed to a legion of devices and plat­forms now, each with their own fron­tend capa­ble of chang­ing the default gener­ic fonts (espe­cial­ly in the case of mobile where only one font may be avail­able). Fire­fox for Win­dows Mobile and Opera Mini are in the same boat. Deter­min­ing the default gener­ic fonts for these plat­forms is arguably pointless.

Opera

This one’s pure­ly from obser­va­tion of a local install on an ‘en-AU’ Win­dows machine (like­ly iden­ti­cal to any oth­er ‘en’ install). I’m unable to check the defaults for any oth­er plat­form atm.

Note that the orig­i­nal 10.0 release had a bug that did funky stuff to cur­sive and fan­ta­sy. Fixed in 10.1.

Internet Explorer

The tru­ly prob­lem­at­ic one. I don’t have the first idea how to gath­er this infor­ma­tion with­out access to the region­al build and OS. Infor­ma­tion is wel­come! On my ‘en-AU’ WinXP machine IE6 through 8 default to:

A quick font matrix for en-US

Browsers across the top head­er row, and font fam­i­lies down the first col­umn. Where a font dif­fers from oth­er browsers, it has been high­light­ed and bolded.

Windows

Mozil­la Safari Chrome Opera IE
Serif times new roman times new roman times new roman times new roman times new roman
Sans-serif ari­al ari­al ari­al ari­al ari­al
Mono­space couri­er new couri­er new couri­er new couri­er new couri­er new
Cur­sive com­ic sans ms com­ic sans ms com­ic sans ms com­ic sans ms com­ic sans ms
Fan­ta­sy microsoft sans serif impact com­ic sans ms ari­al alger­ian

Mac

Mozil­la Safari Chrome
Serif times times times
Sans-serif hel­veti­ca hel­veti­ca hel­veti­ca
Mono­space couri­er couri­er couri­er
Cur­sive apple chancery apple chancery apple chancery
Fan­ta­sy papyrus papyrus papyrus

No one uses Fan­ta­sy appar­ent­ly, and I can’t help but think that Apple used Com­ic Sans MS twice as a state­ment about the Win­dows aesthetic.

If you’re a brows­er dev with more info or if your results con­flict, please let me know.

posted by Andrew

2 thoughts on “All you never wanted to know about browser generic font family fallbacks

  1. Liz Castro says:

    Thanks so much for this. Fun­ny though, if I style a para­graph with “mono­space” and anoth­er with “Couri­er” they should look exact­ly the same, no? But they don’t. The Couri­er one is bigger.

  2. hh says:

    Liz: The browsers tend to assign a low­er point size to CSS “mono­space”, as it is more leg­i­ble. For exam­ple, Mozil­la uses 16 px for reg­u­lar fonts, and 12–13 px for fixed-width.

    Mozil­la prob­a­bly does­n’t know that “Couri­er” is “mono­space”, hence the problem.

Leave a Reply

Your email address will not be published. Required fields are marked *