Finder v2.0.0
Buy now
Getting started

Web font(s)

This article outlines how Finder optimizes web font loading by implementing local font storage and preloading techniques. These practices are crucial for enhancing site performance and minimizing layout shifts during page load.

Preloading local web fonts

Finder stores local fonts in the assets/fonts folder and preloads them in the <head> section of the HTML document to ensure they are available as soon as the page begins to render:

<!-- Preloaded local web font (Inter) -->
<link rel="preload" href="assets/fonts/inter-variable-latin.woff2" as="font" type="font/woff2" crossorigin>

Referencing fonts in SCSS

The preloaded fonts are then referenced in the src/scss/fonts.scss file, which includes necessary @font-face rules:

// Custom web fonts

// latin
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Downloading and implementing custom web fonts

To use a custom font from sources like Google Fonts, follow these steps to download and integrate the font locally:

  1. Find the font on Google Fonts: Locate the necessary font on Google Fonts.
  2. Obtain the embed code: Click the "Get font" button, then "Get embed code". Select the font styles you need and copy the generated link.
  3. Download the font file:
    • Paste the copied link into a new browser tab.
    • Locate the .woff2 file links inside the @font-face rules.
    • Open these links in new tabs and save the contents as .woff2 files.
  4. Store and reference the font locally:
    • Place the downloaded .woff2 file(s) in the assets/fonts folder.
    • Add references to these files in the src/scss/fonts.scss file, similar to the example provided above.

Note: If the selected font is not variable, you must create a separate @font-face rule for each weight and style, similar to the setup seen in the Google Fonts API generated link.

Top