---
title: "Announcing Astro Font"
description: "Announcing astro-font library by LaunchFa.st that helps you optimize fonts in an instant."
source: "https://www.launchfa.st/features/astro-font"
author: "Rishi Raj Jain"
created_at: 2023-12-15T19:00:00.000Z
---

> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.

<img width="1600" height="900" alt="astro-font by LaunchFa.st" loading="eager" class="mt-4 border rounded-sm bg-cover bg-center bg-no-repeat transform will-change-auto" src="https://ik.imagekit.io/vjeqenuhn/launchfast-website/astro-font" />

**astro-font** will automatically optimize your Custom Fonts, Local Fonts, Fonts over any CDN and Google fonts for performance.

The project is inspired by the [Next.js Font Optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts).


## Installation

```bash
npm install astro-font
## or yarn
yarn add astro-font
## or pnpm
pnpm add astro-font
```

## Google Fonts

Automatically optimize any Google Font. To use the font in all your pages, add it to **head** tag in an Astro layout:

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'bold',
              weight: '700',
              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

## Local Fonts

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'normal',
              weight: '400',
              path: './public/fonts/Afacad-Regular.woff2'
            },
            {
              style: 'medium',
              weight: '500',
              path: './public/fonts/Afacad-Medium.woff2'
            },
          ],
          preload: false,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

## Using Multiple Fonts

You can import and use multiple fonts in your application. There are two approaches you can take.

Just extend the array of the config to contain the new collection of the fonts:

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'bold',
              weight: '700',
              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
        {
          name: "Inter",
          src: [
            {
              weight: '400',
              style: 'normal',
              path: './public/fonts/Inter-Regular.woff2'
            }
          ],
          preload: true,
          display: "swap",
          selector: "body > span",
          fallback: "serif",
        },
      ]}
    />
</head>
```

## Testimonials

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Thank you for that awesome package... it helped me fight the &quot;layout shift&quot;!<br>I will add it to Best of JS, as we have a tag `Astro` <a href="https://t.co/38Akqa5IQd">https://t.co/38Akqa5IQd</a></p>&mdash; Michael Rambeau (@michaelrambeau) <a href="https://twitter.com/michaelrambeau/status/1747612731728179669?ref_src=twsrc%5Etfw">January 17, 2024</a></blockquote> <script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## References

- **GitHub**: [astro-font](https://github.com/rishi-raj-jain/astro-font)
- **Astro Starter**: [launchfa.st](https://www.launchfa.st)
