blog.robino.dev

Use System Fonts to Speed Up your Website

  • font stacks
  • fonts
  • performance
Jun 13, 2024
Enhance your website’s performance by leveraging fonts already available on users’ devices.

Built-in fonts

Websites require various assets to be loaded on a user’s device—among these assets are fonts. Adding an extra font for users to download can negatively impact your page’s load time and cause layout shift when a fallback font gets replaced.

Fortunately, users already have built-in fonts on their devices, and there is a surprising variety available. For instance, on Apple devices, the San Francisco font is readily accessible for web developers to use without requiring a network request.

Here’s how you can specify to use San Francisco on Apple devices:

body {
	font-family: system-ui;
}

Font stacks

Many fonts can be specified in a list to fallback to when the preceding fonts are unavailable. For example, here are the default tailwindcss font stacks.

.font-sans {
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
}

Using these font stacks ensures that your text will look good on a wide range of devices and operating systems.

Resources

The Modern Font Stacks project provides a variety of pre-built font stacks, ready to drop in to any project. I have implemented these in a tailwindcss plugin as well.

Apple and Microsoft also provide resources showing which fonts are currently shipped with the latest versions of their OS.

By leveraging system fonts and well-designed font stacks, you can improve your website’s performance and provide a better user experience.

Edit