Self-hosting Fonts

It is recommended to use self-hosted fonts where possible. Read here how to do this in a streamlined(-ish) process for open source fonts found on fonts.google.com and apply best practice configuration to ensure optimal loading.

For fonts not found on google fonts, please refer to the astro documentation on fonts.

The Fontsource project simplifies using Google Fonts and other open-source fonts. It provides npm modules you can install for the fonts you want to use.

Find the font you want to use in Fontsource’s catalog (see link above). In Our example we want Open Sans
Install the package via npm install ...
```
npm install @fontsource/open-sans
```
Determine which weight and styles you need (for body text you normally need the normal and italic font styles) and find the css imports you need on the fontsource Install page – Whether you want “Variable” or “Static”: If you need a lot of different styles and weights and the font is a variable font, then it’s probably a good idea to just use that, otherwise use the static version as this can be more performant.

Add these imports to the top of the src/layouts/Layout.astro file. This will add @font-face styles and reference the correct font files.
```
// We want OpenSans 400, 400italic, 800
import "@fontsource/open-sans/400.css";
import "@fontsource/open-sans/400-italic.css";
import "@fontsource/open-sans/800.css";
```

Add the font files to <meta> tags for preloading so the browser will immediately load them and not wait for the CSS to be parsed. This can prevent FOUC (“Flash of unstyled content”). Since the most modern file within the font-face cascade is woff2 we will use this file for preloading and ignore older file formats. (They will only be used when the browser does not support woff2 and who likes old browsers anyway.)

Here is the fontsource documentation on preloading.

Within the src/layouts/Layout.astro file:

---
// You need to find the exact files you need. They are named differently
// and thus there is no one-size-fits all. Also, vscode autocomplete won't
// save you. There is none ;) Just check the contents of
// node_modules/@fontsource/INSERT_FONT_HERE/files and select the
// weight/styles and probably only the latin subset font files
//
// Important: Append the ?url query, this will mean astro gets the file
// location, not the file content.
import openSans400normalWoff2 from '@fontsource/open-sans/files/open-sans-latin-400-normal.woff2?url';
import openSans400italicWoff2 from '@fontsource/open-sans/files/open-sans-latin-400-italic.woff2?url';
import openSans800normalWoff2 from '@fontsource/open-sans/files/open-sans-latin-800-normal.woff2?url';
---

<html>
  <head>
    <!-- ... -->
    <link rel="preload" as="font" type="font/woff2" href={openSans400normalWoff2} crossorigin="anonymous" />
    <link rel="preload" as="font" type="font/woff2" href={openSans400italicWoff2} crossorigin="anonymous" />
    <link rel="preload" as="font" type="font/woff2" href={openSans800normalWoff2} crossorigin="anonymous" />
    <!-- ... -->
  </head>

  <!-- ... -->
</html>

Finally set the font family in your CSS variables and apply it to elements.