# astro-fontaine

> Automatically generate fallback font faces for your Astro site

Latest version **1.0.1** (published 2023-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install astro-fontaine
pnpm add astro-fontaine
yarn add astro-fontaine
bun add astro-fontaine
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-04-04 |
| First published | 2023-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 22 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eli Gundry |
| Maintainers | eligundry |

## Links

- npm: https://www.npmjs.com/package/astro-fontaine
- npm.io page: https://npm.io/package/astro-fontaine

## Dependencies (3)

- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.12
- [css-tree](https://npm.io/package/css-tree.md) ^2.3.1
- [fontaine](https://npm.io/package/fontaine.md) ^0.3.1

## Recent versions

- 1.0.1 (latest) — 2023-04-04
- 1.0.0 — 2023-04-04

## README

# 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](https://github.com/danielroe/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`:

```javascript
import { defineConfig } from 'astro/config'
import fontaine from 'astro-fontaine'

export default defineConfig({
  integrations: [
    fontaine({
      // If you are using Google Fonts, Typekit or some other font hosting service, you can provide the URL to the
      // stylesheet here and the plugin will download and inline it into your webpages automatically.
      remoteFontFaceStylesheetURLs: [
        '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',
      ],
      // Array of font families that will be used to generate the fallback fonts
      fonts: [
        {
          family: 'Arvo',
          // You can provide fallbacks per fronts such that the fallback font is of the same style when it flashes.
          fallbacks: ['Georgia', 'Cambria'],
        },
        // If you omit fallbacks, the defaultFallbacks property will be used.
        { family: 'Lato' },
        {
          family: 'Fira Code',
          fallbacks: [
            'SFMono-Regular',
            'Menlo',
            'Monaco',
            'Consolas',
            'Liberation Mono',
            'Courier New',
            'monospace',
          ],
        },
      ],
      defaultFallbacks: [
        'ui-sans-serif',
        'Helvetica Neue',
        'Arial',
        'sans-serif',
      ],
    }),
  ]
})
```

## Inspiration

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

* [danielroe/fontaine](https://github.com/danielroe/fontaine)
* [dc7290/astro-fonts-next](https://github.com/dc7290/astro-fonts-next)
* [nuxt-modules/fontaine](https://github.com/nuxt-modules/fontaine)

---
_Source: https://npm.io/package/astro-fontaine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._