January 31, 2010
All you never wanted to know about browser generic font family fallbacks
I recently needed to know exactly what fonts desktop browsers use in the case of generic font families. Getting this info for multiple platforms and languages is actually pretty difficult unless you enjoy sifting through several different source trees in several different source viewers.
Locales are generally expressed as two-letter language codes (‘en’ for English, ‘ar’ for Arabic), sometimes with an additional two-letter code for region or derivative (‘en-GB’ for British English, ‘zh-CN’ for Simplified Chinese). A good reference is the the Plesk Locale Codes doc.
Skip to the matrix if you’re just after en-US defaults.
Mozilla
Probably the easiest to read is Mozilla’s prefs file, simply because it’s all in one place. It’s grouped into platform then locale. For example, pref("font.name.serif.ja", "?? ???") specifies the serif font for Japanese.
Note that these may not be the defaults in all Mozilla-derived browsers
- Windows fonts
- Mac fonts
- OS/2 fonts (also see note in source about name remapping which may affect you).
- BeOS fonts include only basic mapping to a generic family (remapped by the OS to a locale-specific font?).
- Unix/Linux fonts include only basic mapping to a generic font (remapped by the OS to a locale-specific or system-preference font?) This could mean a variety of defaults depending on the unix derivative, distro, window system, graphical environment and god knows what else (please correct me if I’m wrong).
Chrome
Chrome breaks down font defaults into a generic platform file then specific override files. They follow a naming convention using the locale codes above. Files are in XML, thus needlessly verbose and hard to skim. Look for <message name="IDS_SERIF_FONT_FAMILY" use_name_for_id="true">Times New Roman</message> at the bottom of generic files and <translation id="IDS_SERIF_FONT_FAMILY">Tahoma</translation> in the overrides.
- Windows fonts (generic)
- Mac fonts (generic)
- Linux fonts (generic). As at 2010/01/31 this looks identical to the Windows defaults.
- Platform and local specific overrides. All locales are included, but only some have overrides, eg. zh-CN. There are at least four pages of override files, so be sure to use the select box at the top to move between pages (there’s no next/prev links).
Safari/Webkit
Unlike the browsers above, Safari itself isn’t open source and so it’s hard to get a definitive list outside of Western locales. Webkit (the underlying engine that is open source) has these en-US defaults hard coded:
- Windows fonts
- Mac fonts
- QT fonts (I’m not sure what project they’re used for, so information is welcome).
- GTK (again, seems to use a value from somewhere else).
Stating the obvious but relevant: Webkit has been ported to a legion of devices and platforms now, each with their own frontend capable of changing the default generic fonts (especially in the case of mobile where only one font may be available). Firefox for Windows Mobile and Opera Mini are in the same boat. Determining the default generic fonts for these platforms is arguably pointless.
Opera
This one’s purely from observation of a local install on an ‘en-AU’ Windows machine (likely identical to any other ‘en’ install). I’m unable to check the defaults for any other platform atm.
- Serif: Times New Roman
- Sans-serif: Arial
- Monospace: Courier New
- Cursive: Comic Sans MS
- Fantasy: Arial
Note that the original 10.0 release had a bug that did funky stuff to cursive and fantasy. Fixed in 10.1.
Internet Explorer
The truly problematic one. I don’t have the first idea how to gather this information without access to the regional build and OS. Information is welcome! On my ‘en-AU’ WinXP machine IE6 through 8 default to:
- Serif: Times New Roman
- Sans-serif: Arial
- Monospace: Courier New
- Cursive: Comic Sans MS
- Fantasy: Algerian
A quick font matrix for en-US
Browsers across the top header row, and font families down the first column. Where a font differs from other browsers, it has been highlighted and bolded.
Windows
| Mozilla | Safari | Chrome | Opera | IE | |
|---|---|---|---|---|---|
| Serif | times new roman | times new roman | times new roman | times new roman | times new roman |
| Sans-serif | arial | arial | arial | arial | arial |
| Monospace | courier new | courier new | courier new | courier new | courier new |
| Cursive | comic sans ms | comic sans ms | comic sans ms | comic sans ms | comic sans ms |
| Fantasy | microsoft sans serif | impact | comic sans ms | arial | algerian |
Mac
| Mozilla | Safari | Chrome | |
|---|---|---|---|
| Serif | times | times | times |
| Sans-serif | helvetica | helvetica | helvetica |
| Monospace | courier | courier | courier |
| Cursive | apple chancery | apple chancery | apple chancery |
| Fantasy | papyrus | papyrus | papyrus |
No one uses Fantasy apparently, and I can’t help but think that Apple used Comic Sans MS twice as a statement about the Windows aesthetic.
If you’re a browser dev with more info or if your results conflict, please let me know.
Thanks so much for this. Funny though, if I style a paragraph with “monospace” and another with “Courier” they should look exactly the same, no? But they don’t. The Courier one is bigger.
Liz: The browsers tend to assign a lower point size to CSS “monospace”, as it is more legible. For example, Mozilla uses 16 px for regular fonts, and 12-13 px for fixed-width.
Mozilla probably doesn’t know that “Courier” is “monospace”, hence the problem.