Understanding Web Fonts

Web fonts give you control over typography beyond the limited set of system fonts. They’re essential for brand consistency and visual appeal, but they need to be loaded and managed carefully to avoid slowing down your site.

Types of Web Fonts

System fonts: Pre-installed on the user’s device (Arial, Times New Roman, Georgia). No loading delay.
Google Fonts: A free library of over 1,500 open-source font families hosted by Google.
Adobe Fonts (Typekit): Premium fonts included with Adobe Creative Cloud subscriptions.
Self-hosted fonts: Font files stored on your own server for maximum control.

Adding Google Fonts

Method 1: Link in HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Method 2: CSS Import

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

Then apply the font in your CSS:

body {
  font-family: 'Inter', sans-serif;
}

Self-Hosting Fonts

Self-hosting gives you full control and eliminates third-party requests:

Download the font files (.woff2 and .woff formats).
Place them in your site’s assets folder.
Define the font with @font-face:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2'),
       url('/fonts/customfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Font Loading Optimization

Fonts can cause layout shifts and invisible text during loading. Optimize with these techniques:

font-display: swap: Shows fallback text immediately while the custom font loads. This prevents invisible text (FOIT).

Preload Critical Fonts:

<link rel="preload" href="/fonts/customfont.woff2" as="font" type="font/woff2" crossorigin>

Limit Font Weights and Styles: Each weight (400, 600, 700) is a separate file download. Only load what you actually use.

Subset Fonts: If you only need Latin characters, use a subset to reduce file size dramatically.

Font Best Practices

Limit to 2–3 font families per site to balance variety and performance.
Use woff2 format as your primary — it offers the best compression and browser support.

Define a font stack with fallbacks:

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Use variable fonts when available — a single file contains all weights and styles.
Test readability on different screen sizes and resolutions.
Check licensing: Ensure you have the right to use and host the fonts on your website.

System Font Stack (Zero Loading Time)

For maximum performance, use the system font stack — no font files to download:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen, Ubuntu, Cantarell, sans-serif;
}

Understanding Web Fonts