CSS: The Definitive Guide, 5th Edition

Chapter 14. Fonts

The “Font Properties” section of the CSS1 specification, written in 1996, begins with this sentence: “Setting font properties will be among the most common uses of style sheets.” Despite the awareness of font’s importance from the very beginning of CSS, it wasn’t until about 2009 that this capability really began to be widely and consistently supported. With the introduction of variable fonts, typography on the web has become an art form. While you can include any fonts you are legally allowed to distribute in your design, you have to pay attention to how you use them.

It’s important to remember this does not grant absolute control over fonts. If the font you’re using fails to download, or is in a file format the user’s browser doesn’t understand, the text will (eventually) be displayed with a fallback font. That’s a good thing, as it means the user still gets your content.

While fonts may seem vital to a design, always bear in mind you can’t depend on the presence of a given font. If a font is slow to load, browsers generally delay text rendering. While that prevents text being redrawn while a user is reading, it’s bad to have no text on the page.

Your font choice may also be overridden by user preference, or a browser extension meant to enhance the reading experience. An example is the browser extension OpenDyslexic, which “overrides all fonts on web pages with the OpenDyslexic font, and formats pages to be more easily readable.” In general, always design assuming ...