astro-fontaine

This is an Astro plugin that will automatically generate fallback fonts for the web fonts in your site to prevent CLS using the wonderful fontaine library.

It does the following:

1. Downloads provided font stylesheets.
2. Parses and extracts all @font-face definitions.
3. Downloads the fonts to your site's public directory and rewrites the stylesheet to use the fonts hosted on your site's domain.
4. Generates fallback fonts.
5. Inlines the rewritten font stylesheets and fallback @font-face declarations into all pages in your site's build.

Usage

Add this code to your astro.config.js:

1import { defineConfig } from 'astro/config'
2import fontaine from 'astro-fontaine'
3
4export default defineConfig({
5  integrations: [
6    fontaine({
7      // If you are using Google Fonts, Typekit or some other font hosting service, you can provide the URL to the
8      // stylesheet here and the plugin will download and inline it into your webpages automatically.
9      remoteFontFaceStylesheetURLs: [
10        'https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Code&family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=fallback',
11      ],
12      // Array of font families that will be used to generate the fallback fonts
13      fonts: [
14        {
15          family: 'Arvo',
16          // You can provide fallbacks per fronts such that the fallback font is of the same style when it flashes.
17          fallbacks: ['Georgia', 'Cambria'],
18        },
19        // If you omit fallbacks, the defaultFallbacks property will be used.
20        { family: 'Lato' },
21        {
22          family: 'Fira Code',
23          fallbacks: [
24            'SFMono-Regular',
25            'Menlo',
26            'Monaco',
27            'Consolas',
28            'Liberation Mono',
29            'Courier New',
30            'monospace',
31          ],
32        },
33      ],
34      defaultFallbacks: [
35        'ui-sans-serif',
36        'Helvetica Neue',
37        'Arial',
38        'sans-serif',
39      ],
40    }),
41  ]
42})

Inspiration

This library borrows heavily from the following libraries and would not exist without them:

• danielroe/fontaine
• dc7290/astro-fonts-next
• nuxt-modules/fontaine