font-family recommendations — Chris Morgan font-family recommendations<br>Draft: started 2026-05-09 • Tagged /css, /opinions<br>A quick draft I jotted down. Been meaning to for years. I’ll finish it at some point. Trouble is, then I keep changing my mind on the shape. 1. Never assume that a named font will work<br>There are no web-safe fonts; none are available across all major platforms. Web fonts (@font-face and all) are not safe either: If not inlined, subresources can fail to load for all kinds of network reasons. Font loading is an area of concern for security, so some block it for safety. uBlock Origin has a dedicated button for disabling remote fonts. I think some browsers’ data-saving modes block fonts from loading. (And those that don’t, should.) Or the user might have elected not to let websites choose their own fonts. I’ve been doing that since 2020, and it makes the web so much better. For me, generic families are the only ones that will work. One related JS thing: if you ever use document.fonts.load("1em my-web-font"), remember that it’s fallible: the promise it returns may be rejected. I came across about four things in the six years 2020–2025 that broke for this reason (and two of them were in 2025). Now for a couple of consequence of this. a) Always include monospace if you want the text monospaced<br>I see this forgotten occasionally, since its lack doesn’t affect most people. Sometimes on pages that were all-monospace for no good reason. Those times, it honestly made the pages better! But other times it damages things. As a concrete example, at the time of writing, Adel Faure’s ASCII might fly? artwork is missing monospace, and looks a little like this for me: (assuming your styles or user agent don’t make it monospaced!) . . . .<br>_.---._ . . . . . .<br>. . . '-. . . . . . . . . . . . .<br>:.:.:.:.:.\. . . . . __ . . . . . .<br>:.:.:.:.:.:'-.------------_.-'..'-.-----------------------<br>_:.:.:.:.:.:.:\--._____.-'.:.:.:.:.\-.__::::::::::::::::::<br>.'-.::.::.::.::'-._'-._____::..:.:.:.:'-:-.-..._:.__:.:.:.<br>-.-.\::.:::.::::::::::__::::(._____:.::.:::.::::'-.:=-.. .<br>.-.-.'--.___:.::::.:::::::( '.--._''':.::::::::::::____.-<br>-. -.'---.::::::::::'-. )::::::::::::_.-----'.-.-.-<br>.^.-.-.-.-.-.-. \:::::::____TT_____.______'-.-.::.::.-._.<br>/ \::.:^:.:______.^-----/_-_ -_/\-.-/__/\__\::^:.^::.-..::<br>/ \ / \_/-_-_- /\\___/__/\/_/ \__|LL LL|-/ \/ \( ).^<br>._\..____/______/LL\___|LL__LL| /___/\ LL|_______( ^ /<br>)__/____|LL LL|LL|L L|LL||LL| |L L||--___/\______\./ \.<br>/\__|____|LL__LL|_________===_______---/\___\LL__LL| / \ ^<br>||/\-_-_-\LL||L/____/____/\ /-_-_- /\\ ||______||LL|:/_\/<br>:/__\_____\___=|L L |L L ||/______/LL\ /_-_-_-/\ .::::|'/<br>-||||L L/____/\__==_______-|LL||LL| |/______/ \i-i-i-i/_<br>7 - - --|L /\____\/\-_-_-_\==_""--""= |LL__LL| |: : : :L| Add in the fallback monospace pre {<br>font-family: "jgs", monospace;<br>I was actually going to write that last point as “always include a generic family”, but really it’s only monospace that it’s important for. Still— b) Include serif or sans-serif if you want that kind of fallback font<br>Although serif or sans-serif are rarely important, you probably want to include one of them all the same. font-family: Arial, sans-serif; font-family: Times New Roman, serif; Otherwise, it’ll use the default font, which is probably serif but could be something else altogether.
2. Stop enumerating fonts that the system might have installed<br>I’ve seen too much of this kind of thing: font-family: "Arial", Helvetica, 'Helvetica Neue', Liberation Sans, "Noto Sans", sans-serif; Google Sans, Roboto, Arial, sans-serif Definitely ditch Arial: it’s never going to be better than sans-serif. Also ditch Roboto: it’s almost never . It doesn’t help. sans-serif will resolve to a font no worse than those you named, and quite possibly better. Here’s a real example I just came across (with spaces restored after punctuation, for it was minified): font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif This is ridiculous, strictly worse than font-family: monospace, monospace. monospace will resolve to a font that is no worse. Now I’m not saying there’s never a case for it. Consider Georgia and Times New Roman, both serifs from Microsoft’s Core fonts for the Web. But they have quite different character: Georgia is a good deal wider. If that’s what you want for stylistic reasons, I will not begrudge you font-family: Georgia, serif. a) Have at most one named, non-web font<br>This is an exception Consider Georgia and Times New Roman, both serifs from Microsoft’s Core fonts for the Web. But they have quite different character: Georgia is a good deal wider. If that’s what you want for stylistic reasons, I will not begrudge you font-family: Georgia, serif.<br>modernfontstacks.com is interesting. Their repository describes more about which fonts for which platforms. Interesting ideas, but I reckon it tries to prescribe beyond what is wise, and that a good chunk of...