LaunchFast Logo LaunchFast

Announcing Astro Font

Rishi Raj Jain
astro-font by LaunchFa.st

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.

Installation

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:

---
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

---
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:

---
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

References

Learn More Injecting Environment Variables Dynamically in Cloudflare Pages → Using Unplugin Icons in Next.js: A Step-by-Step Guide → Using Unplugin Icons in SvelteKit: A Step-by-Step Guide →