Getting started

# Web font(s)

This article outlines how Cartzilla 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

Cartzilla 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