Best practices for fonts  |  Articles  |  web.dev (2024)

Optimize web fonts for Core Web Vitals.

Best practices for fonts | Articles | web.dev (1)

Katie Hempenius

Best practices for fonts | Articles | web.dev (2)

Barry Pollard

This article discusses performance best practices for fonts. There are a variety of ways in which web fonts impact performance:

  • Delayed text rendering: If a web font has not loaded, browsers typically delay text rendering. In many situations, this delays First Contentful Paint (FCP). In some situations, this delays Largest Contentful Paint (LCP).
  • Layout shifts: The practice of font swapping has the potential to cause layout shifts and so impact Cumulative Layout Shift (CLS). These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.

This article is broken down into three sections: font loading, font delivery, and font rendering. Each section explains how that particular aspect of the font lifecycle works and provides corresponding best practices.

Font loading

Fonts are typically important resources, as without them the user might be unable to view page content. Thus, best practices for font loading generally focus on making sure that fonts get loaded as early as possible. Particular care should be given to fonts loaded from third-party sites as downloading these font files requires separate connection setups.

If you're unsure if your page's fonts are being requested in time, check the Timing tab within the Network panel in Chrome DevTools for more information.

Best practices for fonts | Articles | web.dev (3)

Understanding @font-face

Before diving into best practices for font loading it's important to understand how @font-face works and how this impacts font loading.

The @font-face declaration is an essential part of working with any web font. At a minimum, it declares the name that will be used to refer to the font and indicates the location of the corresponding font file.

@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");}

A common misconception is that a font is requested when a @font-face declaration is encountered—this is not true. By itself, @font-face declaration does not trigger font download. Rather, a font is downloaded only if it is referenced by styling that is used on the page. For example, like this:

@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");}h1 { font-family: "Open Sans"}

In other words, in the example above, Open Sans would only be downloaded if the page contained a <h1> element.

Thus, when thinking about font optimization, it's important to give stylesheets just as much consideration as the font files themselves. Changing the contents or delivery of stylesheets can have a significant impact on when fonts arrive. Similarly, removing unused CSS and splitting stylesheets can reduce the number of fonts loaded by a page.

Inline font declarations

Most sites would strongly benefit from inlining font declarations and other critical styling in the <head> of the main document rather than including them in an external stylesheet. This allows the browser to discover the font declarations sooner as the browser doesn't need to wait for the external stylesheet to download.

<head> <style> @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); } body { font-family: "Open Sans"; } ...etc. </style></head>

Inlining critical CSS can be a more advanced technique that not all sites will be able to achieve. The performance benefits are clear, but it requires additional processes and build tools to ensure the necessarily CSS—and ideally only the critical CSS—is inlined correctly and that any additional CSS is delivered in a non-render blocking fashion.

Preconnect to critical third-party origins

If your site loads fonts from a third-party site, it is highly recommended that you use the preconnect resource hint to establish early connection(s) with the third-party origin. Resource hints should be placed in the <head> of the document. The resource hint below sets up a connection for loading the font stylesheet.

<head> <link rel="preconnect" href="https://fonts.com"></head>

To preconnect the connection that is used to download the font file, add a separate preconnect resource hint that uses the crossorigin attribute. Unlike stylesheets, font files must be sent over a CORS connection.

<head> <link rel="preconnect" href="https://fonts.com"> <link rel="preconnect" href="https://fonts.com" crossorigin></head>

When using the preconnect resource hint, keep in mind that a font provider may serve stylesheets and fonts from separate origins. For example, this is how the preconnect resource hint would be used for Google Fonts.

<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></head>

Be cautious when using preload to load fonts

Although preload is highly effective at making fonts discoverable early in the page load process, this comes at the cost of taking away browser resources from the loading of other resources.

Inlining font declarations and adjusting stylesheets may be a more effective approach. These adjustments come closer to addressing the root cause of late-discovered fonts—rather than just providing a workaround.

In addition, using preload as a font-loading strategy should also be used carefully as it bypasses some of the browser's built-in content negotiation strategies. For example, preload ignores unicode-range declarations, and if used prudently, should only be used to load a single font format.

However, when using external stylesheets, preloading the most important fonts can be very effective since the browser won't otherwise discover whether the font is needed until much later.

Font delivery

Faster font delivery yields faster text rendering. In addition, if a font is delivered early enough, this can help eliminate layout shifts resulting from font swapping.

Using self-hosted fonts

On paper, using a self-hosted font should deliver better performance as it eliminates a third-party connection setup. However, in practice, the performance differences between these two options is less clear cut: for example, the Web Almanac found that sites using third-party fonts had a faster render than fonts that used first-party fonts.

If you are considering using self-hosted fonts, confirm that your site is using a Content Delivery Network (CDN) and HTTP/2. Without use of these technologies, it is much less likely that self-hosted fonts will deliver better performance. For more information, see Content Delivery Networks.

If you use a self-hosted font, it is recommended that you also apply some of the font file optimizations that third-party font providers typically provide automatically—for example, font subsetting and WOFF2 compression. The amount of effort required to apply these optimizations will depend somewhat on the languages that your site supports. In particular, be aware that optimizing fonts for CJK languages can be particularly challenging.

Use WOFF2

Of the modern font fonts, WOFF2 is the newest, has the widest browser support, and offers the best compression. Because it uses Brotli, WOFF2 compresses 30% better than WOFF, leading to less data to download and therefore faster performance.

Given the browser support, experts now recommend only using WOFF2:

In fact, we think it is also time to proclaim: Use only WOFF2 and forget about everything else.

This will simplify your CSS and workflow massively and also prevents any accidental double or incorrect font downloads. WOFF2 is now supported everywhere. So, unless you need to support really ancient browsers, just use WOFF2. If you can't, consider not serving any web fonts to those older browsers at all. This won't be a problem if you have a robust fallback strategy in place. Visitors on older browsers will simply see your fallback fonts.

Bram Stein, from the 2022 Web Almanac

Subset fonts

Font files typically include a large number of glyphs for all the various characters they support. But you may not need all the characters on your page and can reduce the size of font files by subsetting fonts.

The unicode-range descriptor in the @font-face declartion informs the browser which characters a font can be used for.

@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); unicode-range: U+0025-00FF;}

A font file will be downloaded if the page contains one or more characters matching the unicode range. unicode-range is commonly used to serve different font files depending on the language used by page content.

unicode-range is often used in conjunction with the technique of subsetting. A subset font includes a smaller portion of the glyphs that were contained in the original font file. For example, rather than serve all characters to all users, a site might generate separate subset fonts for Latin and Cyrillic characters. The number of glyphs per font varies wildly: Latin fonts are usually on the magnitude of 100 to 1000 glyphs per font; CJK fonts may have over 10,000 characters. Removing unused glyphs can significantly reduce the filesize of a font.

Some font providers may provide different versions of fonts files with different subsets automatically. For example, Google Fonts does this by default:

/* devanagari */@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

When moving to self-hosting, this is an optimization that can easily be missed and lead to larger font files locally.

It is also possible to manually subset fonts if your font provider allows this, either through an API (Google Fonts supports this by providing a text parameter), or by manually editing the font files and then self-hosting. Tools for generating font subsets include subfont and glyphanger. However, do check the licence for the fonts you use allow subsetting and self-hosting.

Use fewer web fonts

The fastest font to deliver is a font that isn't requested in the first place. System fonts and variable fonts are two ways to potentially reduce the number of web fonts used on your site.

A system font is the default font used by the user interface of a user's device. System fonts typically vary by operating system and version. Because the font is already installed, the font does not need to be downloaded. System fonts can work particularly well for body text.

To use the system font in your CSS, list system-ui as the font-family:

font-family: system-ui

The idea behind variable fonts is that a single variable font can be used as a replacement for multiple font files. Variable fonts work by defining a "default" font style and providing "axes" for manipulating the font. For example, a variable font with a Weight axis could be used to implement lettering that would previously require separate fonts for light, regular, bold, and extra bold.

Not everyone will benefit from switching to variable fonts. Variable fonts contain many styles, so typically have larger file sizes than individual non-variable fonts that only contain one style. Sites that will see the largest improvement from using variable fonts are those that use (and need to use) a variety of font styles and weights.

Font rendering

When faced with a web font that has not yet loaded, the browser is faced with a dilemma: should it hold off on rendering text until the web font has arrived? Or should it render the text in a fallback font until the web font arrives?

Different browsers handle this scenario differently. By default, Chromium-based and Firefox browsers will block text rendering for up to 3 seconds if the associated web font has not loaded; Safari will block text rendering indefinitely.

This behavior can be configured by using the font-display attribute. This choice can have significant implications: font-display has the potential to impact LCP, FCP, and layout stability.

Choose an appropriate font-display strategy

font-display informs the browser how it should proceed with text rendering when the associated web font has not loaded. It is defined per font-face.

@font-face { font-family: Roboto, Sans-Serif src: url(/fonts/roboto.woff) format('woff'), font-display: swap;}

There are five possible values for font-display:

Value Block period Swap period
Auto Varies by browser Varies by browser
Block 2-3 seconds Infinite
Swap 0ms Infinite
Fallback 100ms 3 seconds
Optional 100ms None
  • Block period: The block period begins when the browser requests a web font. During the block period, if the web font is not available, the font is rendered in an invisible fallback font and thus the text will not be visible to the user. If the font is not available at the end of the block period, it will be rendered in the fallback font.
  • Swap period: The swap period comes after the block period. If the web font becomes available during the swap period, it will be "swapped" in.

font-display strategies reflect different viewpoints about the tradeoff between performance and aesthetics. As such it's difficult to give a recommended approach as it does depend on individual preferences, how important the web font is to the page and brand, and how jarring a late-arriving font can be when swapped in.

For most sites, these are the three strategies that will be most applicable:

  • If performance is a top priority: Use font-display: optional. This is the most "performant" approach: text render is delayed for no longer than 100ms and there is assurance that there will be no font-swap related layout shifts. However, the downside here is the web font won't be used if it arrives late.

  • If displaying text quickly is a top priority, but you want to still ensure the web-font is used: Use font-display: swap but make sure to deliver the font early enough that it does not cause a layout shift. The downside of this option is the jarring shift when the font arrives late.

  • If ensuring text is displayed in a web font is a top priority: Use font-display: block but make sure to deliver the font early enough that it minimises the delay of the text. The downside of this is the initial text display will be delayed. Note despite this deplay, it can still cause a layout shift as the text is actually drawn invisible, and the fallback font space is therefore used to reserve the space. Once the web font loads, this may require difference space and hence a shift. This may, however, be a less jarring shift than font-display: swap as the text itself won't be seen to shift.

Also keep in mind that these two approaches can be combined: for example, use font-display: swap for branding and other visually distinctive page elements; use font-display: optional for fonts used in body text.

Reduce the shift between your fallback font and your webfont

To reduce the CLS impact, you can use the new size-adjust attributes. For more information see the article on CSS size-adjust. This is a very new addition to our toolset, so is more advanced and a bit manual at present. But definitely one to experiment with and watch for tooling improvements in the future!

Conclusion

Web fonts still be a performance bottleneck but we have an ever-growing range of options to allow us to optimize them to reduce this bottleneck as much as possible.

Best practices for fonts  |  Articles  |  web.dev (2024)

FAQs

What is the 3 font rule? ›

In general, you should only use a maximum of three fonts per design: the title, the subhead, and the body of the text. You get an exception if your design text is long.

What are the best practices for font sizes? ›

In general, a font should be 12-16pt on a mobile screen, 15-19pt on a tablet, and 16-20pt on a desktop computer screen.

Which font is best practice? ›

Serif typefaces are more formal and traditional. They're often used editorially such as in newspapers, magazines, and the body copy of books. One of the most well-known serif typefaces and probably the first font you ever used on a computer is Times New Roman.

What is an ideal number of fonts to use? ›

However, as a general rule, it is recommended to limit the number of font sizes to a minimum, typically 2 to 3 different sizes. Using too many font sizes can create visual clutter and make it difficult for users to understand the hierarchy of information on the page.

What is the golden rule for fonts? ›

One Font, Two Typefaces

You'll want one that can be used for display purposes (headings) and the other to be more functional (body copy). You can play with the weights of the fonts. Reserve heavier weights for display purposes (headings and titles) and lighter weights for functional purposes (body copy).

What is the golden rule for font size? ›

Text Sizes

Different font sizes can be in a golden ratio. Let's say the body-font size on your website is 16px. The header-font size could be a golden-ratio multiple of your body size — that is, it could be 16 φ = 16 x 1.618 = 25.88 or roughly 26px.

What are the general rules for using different font sizes and styles? ›

The optimal font size depends on the type of content, the context, and the target audience, but a general rule of thumb is to use at least 16 pixels for body text and 24 pixels for headings. You should also make sure that your font size can scale up or down according to the user's settings, preferences, or zoom level.

What is the most common font format? ›

OpenType is the standard font format in common use. There are two subformats: TrueType (with the extension of . ttf) and CFF (. otf).

Should font size be responsive? ›

It's important to use responsive font sizing to improve user experience, as it gives your users a good first impression, while ensuring readability and consistency.

How to judge a font? ›

Tips and Considerations When Choosing a Typeface (with Infographic)
  1. Scope. The scope of the project or projects in which a font will be used is one of the first things designers should consider when choosing a typeface. ...
  2. Mood. Every project has a mood. ...
  3. Functionality. ...
  4. Versatility. ...
  5. Message. ...
  6. Readability. ...
  7. Languages. ...
  8. Style.

Which font attracts the most attention? ›

Serif fonts
  • Copperplate. ...
  • Mafins. ...
  • Monalisa. ...
  • Helvetica. ...
  • Univers. ...
  • Futura. ...
  • VAG Rounded. VAG Rounded is a modern geometric sans serif font family that comes in eight different styles. ...
  • Calibri. Calibri is a digital sans serif typeface family in modern style.
Jan 26, 2024

What font do professionals use? ›

Recommended serif fonts include Cambria, Georgia, and Times New Roman. Sans serif fonts don't have small strokes attached to their letters, giving them a cleaner and more modern style. Some recommended sans serif fonts include Arial, Calibri, and Verdana.

Is the 11 or 12 point font standard? ›

The standard font for a college paper is 12 font. Format papers in standard academic format (using Microsoft. So with proper spacing and margins, type sizes of 11 or 10 point can be quite comfortable to read.

How many different fonts are too many? ›

WEBSITE FONT BEST PRACTICES: DO'S & DON'TS

✅ DO: Limit yourself to only 2 or 3 fonts. ✅ DO: Use fonts that are easy to read, especially when the font size is small. ✅ DO: Choose complementary fonts that don't clash.

What does Type 3 font mean? ›

Description. Type 3 fonts are not typical fonts like TrueType or PostScript fonts are. Type 3 is specific to PDF and is basically a bunch of Form XObjects; one form per character/glyph. Normal fonts can be outlined because they are small "programs" that tell the application to draw lines in a specific way.

What are the three 3 things to consider when selecting fonts? ›

Selecting Type for Text: Factors to Consider
  • Demographics. Know who your intended audience is, including their age range and particular interests. ...
  • Legibility. ...
  • Copy length. ...
  • Serif vs Sans. ...
  • Font family size. ...
  • Special features: ...
  • Print, Web, or other media:

What are the 3 common types of fonts? ›

There are five basic classifications of typefaces: serif, sans serif, script, monospaced, and display. As a general rule, serif and sans serif typefaces are used for either body copy or headlines (including titles, logos, etc.), while script and display typefaces are only used for headlines.

Which 3 fonts are considered overused and shouldn t be used in your design? ›

The Ten Most Overused Fonts in Graphic Design
  • Overused font #1: Times New Roman. ...
  • Overused font #2: Arial/Helvetica. ...
  • Overused font #3: Impact. ...
  • Overused font #4: Papyrus. ...
  • Overused font #5: Comic Sans. ...
  • Overused font #6: Copperplate. ...
  • Overused font #7: Bank Gothic. ...
  • Overused font #8: Garamond.

Top Articles
Latest Posts
Article information

Author: Dong Thiel

Last Updated:

Views: 6628

Rating: 4.9 / 5 (59 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Dong Thiel

Birthday: 2001-07-14

Address: 2865 Kasha Unions, West Corrinne, AK 05708-1071

Phone: +3512198379449

Job: Design Planner

Hobby: Graffiti, Foreign language learning, Gambling, Metalworking, Rowing, Sculling, Sewing

Introduction: My name is Dong Thiel, I am a brainy, happy, tasty, lively, splendid, talented, cooperative person who loves writing and wants to share my knowledge and understanding with you.