The Web Font Loading Glossary

After publishing The Comprehensive Guide to Font Loading Strategies, I had a few requests to define a few terms used there. This document is a response to those requests. If something is missing below, please let me know on Twitter @zachleat or in …


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

After publishing The Comprehensive Guide to Font Loading Strategies, I had a few requests to define a few terms used there. This document is a response to those requests. If something is missing below, please let me know on Twitter @zachleat or in the comments.

@font-face Descriptors
Descriptors are key-value pairs inside of the font-face block. Often incorrectly referred to as properties (properties are on the DOM elements themselves). Examples include font-display, font-weight, font-style, and a few others.
Font Matching Algorithm
How the browser matches a font-family CSS property on an element to an appropriate @font-face block. Not all the properties have to match exactly to descriptors—just the font-family. The rest are fuzzy-matched. If there isn’t an exact match, this may result in font synthesis. Read more at Lazy Loading Web Fonts is Probably Not What You Want and the W3C specification.
Font Synthesis, also Faux-bold and Faux-italic
Controls how bold and italic variations of a roman web font are rendered, if independent web fonts for these variations don’t have appropriately matched @font-face blocks. Also known as Faux-bold or Faux-italic rendering. Use the Faux-pas project to highlight when this happens on your site. A few browsers support the font-synthesis CSS property to control this (see the MDN Browser Compatibility for font-synthesis). Read more at the W3C Specification.
System Fonts
Fonts that are available locally on an operating system without making any network requests. Think Helvetica or Arial, Times or Times New Roman. Availability varies by operating system. Search fontfamily.io for compatibility information.
Subsetting
Modifying the font file to include only a small portion of the original glyphs and features, typically used to optimize a font file for a single language on the web. This can be dangerous because no language is an island—proper nouns can crop up in many different places! This results in smaller font files but may also violate your font’s license agreement. Use with the unicode-range descriptor for even better results. The glyphhanger tool can help you diagnose what characters you need on a statically generated site to better subset your web font files.
Roman font
Traditionally lowercased, roman is used to mean non-italic but in my experience (while perhaps not pedantically correct) it’s usually extended to non-bold as well. The “regular” font. Read a Non-italicized FAQ on Stack Exchange or Emphasis on Wikipedia.

Acronyms #

FOIT
Flash of Invisible Text: Default browser behavior to render text invisible while the web font is loading. In modern browsers, FOIT lasts a maximum of three seconds. Sometimes when I’m being incredibly accurate (pedantic), I’ll differentiate between FOIT ∞ and FOIT 3s by including the timeout as a suffix. When people say that web fonts are blocking resources, they are likely referring to FOIT. FOIT is our enemy.
FOUT
Flash of Unstyled Text: Default behavior to render text with the fallback system font while the web font has loaded. Fallback text renders after the FOIT timeout has passed—usually three seconds. Internet Explorer and Edge don’t wait—they render fallback text immediately ❤️. FOUT is preferable to FOIT but care must be taken to minimize its reflow effect.
FOFT
Flash of Faux Text: A font loading strategy to render a roman web font first, and then use font-synthesis to render bold and italic variations immediately while the remaining true bold and true italic web font variations continue to load.

Retweet to share this post


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2017-08-13T05:00:00+00:00) The Web Font Loading Glossary. Retrieved from https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/

MLA
" » The Web Font Loading Glossary." Zach Leatherman | Sciencx - Sunday August 13, 2017, https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/
HARVARD
Zach Leatherman | Sciencx Sunday August 13, 2017 » The Web Font Loading Glossary., viewed ,<https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/>
VANCOUVER
Zach Leatherman | Sciencx - » The Web Font Loading Glossary. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/
CHICAGO
" » The Web Font Loading Glossary." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/
IEEE
" » The Web Font Loading Glossary." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/. [Accessed: ]
rf:citation
» The Web Font Loading Glossary | Zach Leatherman | Sciencx | https://www.scien.cx/2017/08/13/the-web-font-loading-glossary/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts