Tools and resources on how to use web fonts without sacrificing page loading speeds
Typeface, font-face, font-family, font collection, web font... do all of these just mean font ? And what is a font exactly? Let's take a minute to define some words more precisely, at least their use in web development context (as opposed to traditional printing). After all, unambiguous terms always help our understanding of a concept. Font and Typeface All in all, there are two biggies: font and…
TL;DR: Delete BlinkMacSystemFont and -apple-system from all your CSS, replace with system-ui When you peek under the hood of a popular site, say GitHub.com, you can probably see a font-family declaration like: font-family: -apple-system, BlinkMacSystemFont, ...[snip]... sans-serif, Here's a peek into the aforementioned GitHub's source: -apple-system ? What is this funny looking font? Prefixed with…
Font subsetting is when you create a smaller version of a font with some of the characters from an source font. Extreme font subsetting is like normal font subsetting but up a notch (or is it down a notch?) - where only a handful of characters are supported. Think of a logo. Instead of an image, you can use a font file where only the characters that make up the name of the company are present.…
A browser decides to download a web font after: Content is ready CSS is ready It appears that some content will indeed need the web font It's often late enough in the page rendering that the content in question is initially rendered in a fallback font (or not shown at all, depending on font-display ). To prevent this you can preload the font using an HTTP header or a link in the head of the…
Sometimes you want to know if a certain font is available on the user's device. This can be used for evil (hello fingerprinting!) but maybe also for good (hello FaFoFal !). Usually people use rendering text to a hidden "canvas" (e.g. a div ) and measuring the expected width compared to a default font. There's a better way - using the FontFace constructor: const hasAvenir = await new…
Says Wikipedia : "Web-safe fonts are computer fonts that may reasonably be expected to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content displays in their chosen font." Yes, reasonably expected. But that doesn't mean really expected. For example this article points out that even Arial and Times New Roman are not present on some…