Web Fonts in CSS: Import, Google Fonts, and Advanced Optimization

Web Fonts

Web fonts allow the use of custom typefaces that are not installed on the users' devices. They are automatically downloaded along with the website, removing the limitations imposed by “web-safe” fonts.

Importing Fonts with @font-face

To import a custom font, we use the @font-face block in the CSS file:

@font-face {
  font-family: "FontName";
  src: url("fonts/FontName.woff2") format("woff2"),
       url("fonts/FontName.woff") format("woff");
}

Afterward, we can apply the font in CSS styles:

html {
  font-family: "FontName", "Georgia", serif;
}

It is recommended to include multiple formats for maximum compatibility:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/cicle_fina-webfont.woff2') format('woff2'),
       url('fonts/cicle_fina-webfont.woff') format('woff'),
       url('fonts/cicle_fina-webfont.ttf') format('truetype'),
       url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

font-family: the name of the defined font
src: list of supported files and formats
font-weight/font-style: the font's weight and style

☞ You can also add properties like font-variant, font-stretch, or unicode-range for optimization.

Complete Example with Two Local Fonts

🔧 Local Fonts Example

<h1>This is the title with a custom font</h1>
<p>This is a paragraph with another custom font.</p>

@font-face {
  font-family: "arvoregular";
  src: url("fonts/arvo-regular-webfont.woff2") format("woff2"),
       url("fonts/arvo-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "opensansregular";
  src: url("fonts/opensans-regular-webfont.woff2") format("woff2"),
       url("fonts/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "opensansregular", sans-serif;
  font-size: 1.2rem;
  padding: 2rem;
}

h1 {
  font-family: "arvoregular", serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Using an Online Service – Google Fonts

Online services like Google Fonts provide free fonts, ready to use, without the need to manually write @font-face blocks.

All you need to do is include a link in the <head> section.

Then, you can use the fonts in CSS:

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

h1 {
  font-family: 'Bree Serif', serif;
}

Complete Example with Google Fonts

🔧 Google Fonts Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Google Fonts</title>
  <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: "Roboto", sans-serif;
      padding: 2rem;
    }
    h1 {
      font-family: "Bree Serif", serif;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <h1>The Bree Serif Font</h1>
  <p>This paragraph uses the Roboto font.</p>
</body>
</html>

Optimization and Best Practices for Using Web Fonts

Custom fonts can significantly improve the look of a website, but it's important to use them efficiently to avoid performance or accessibility issues. Here are some essential recommendations:

1. Using the `font-display` Property

Avoid “invisible text” during font loading by using font-display: swap. This allows the text to be displayed with a fallback font until the custom font is available.

@font-face {
  font-family: 'opensansregular';
  src: url('fonts/opensans-regular-webfont.woff2') format('woff2');
  font-display: swap;
}

2. Preloading Critical Fonts

For fonts used in important elements (headings, paragraphs), it is recommended to preload them in the <head>:

3. Smart Fallbacks

Always include fallback fonts in font-family in case the primary font fails to load:

body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

4. Variable Fonts

Variable fonts allow multiple weights and styles from a single file. They are more efficient and flexible:

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

You can then apply different weights:

h1 {
  font-weight: 700;
}
p {
  font-weight: 300;
}

5. Accessibility and Contrast

Avoid decorative fonts for long paragraphs.
Ensure the contrast between text and background meets WCAG standards.
Test fonts on both small and large screens – some fonts may be hard to read on mobile.

6. Advanced Control with `font-feature-settings`

OpenType fonts allow activating special features such as ligatures or proportional numbering:

h1 {
  font-feature-settings: "liga" 1, "onum" 1;
}

7. Using `unicode-range`

Allows loading only the necessary characters from a font, reducing file size:

@font-face {
  font-family: 'opensansregular';
  src: url('fonts/opensans-regular-webfont.woff2') format('woff2');
  unicode-range: U+000-5FF; /* Latin Basic + Latin-1 Supplement */
}

☞ For more information on font optimization, check out the following articles:

🧠 Final Quiz – Web Fonts

Box Styling ➔