npmpackage.info

Gathering detailed insights and metrics for astro-font

Other packages similar to astro-font

@lucide/astro

0.525.0

A Lucide icon library package for Astro applications.

astro-fontaine

1.0.1

Automatically generate fallback font faces for your Astro site

astro-fonts

0.2.6

A Specialised Astro Font Component, letting you utilise any of the fonts availble to you using the 'google-webfonts-helper' API. This lets you to download font files to the local filesystem or use the fonts remotely. This one componet is your one-stop for

@gamesome/astro-font

0.0.4

Host fonts locally in your Astro project. Set up custom preloaded fonts and fallback fonts to reduce CLS. The Astro variant of https://www.npmjs.com/package/@next/font

Gathering detailed insights and metrics for astro-font

astro-font - 1.1.0 | npmpackage.info

astro-font

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

1.1.0

194

MIT

TypeScript

379.12 kB

Installations

npm install astro-font

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.14.0

NPM Version

10.9.2 Pull Requests

Open

1

Total

5

Closed

1

Merged

3

Issues

Open

2

Total

26

Closed

24

Releases

astro-font@1.1.0

1.1.0

Updated on Apr 15, 2025

astro-font@1.0.0

1.0.0

Updated on Jan 26, 2025

astro-font@0.1.81

0.1.81

Updated on Aug 04, 2024

astro-font@0.0.80

Updated on Apr 06, 2024

astro-font@0.0.79

Updated on Apr 05, 2024

astro-font@0.0.78

Updated on Mar 15, 2024

View All 17 releases

Languages

TypeScript

Astro

JavaScript

TypeScript (67.84%)

Astro (30.78%)

JavaScript (1.38%)

Developer

rishi-raj-jain

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

194 Stars

144 Commits

8 Forks

1 Watchers

1 Branches

3 Contributors

Updated on Jul 02, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

1.1.0

Package Id

astro-font@1.1.0

Unpacked Size

379.12 kB

Size

153.49 kB

File Count

NPM Version

10.9.2

Node Version

22.14.0

Published on

Apr 14, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@types/fontkit @types/node fontkit pathe prettier prettier-plugin-astro rimraf tsup tsx typescript

imgonline-com-ua-compressed-gtwH4Klu9j

Astro Font Optimization

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

1npm install astro-font
2## or yarn
3yarn add astro-font
4## or pnpm
5pnpm add astro-font

Google Fonts

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

Use Google Fonts URL directly

1---
2import { AstroFont } from "astro-font";
3---
4
5<head>
6    <AstroFont
7      config={[
8        {
9          src: [],
10          name: "Poppins",
11          // Google Fonts URL
12          googleFontsURL: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap',
13          preload: true,
14          display: "swap",
15          selector: "body",
16          fallback: "sans-serif",
17        },
18      ]}
19    />
20</head>

Pick fonts from Google Fonts URL

1---
2import { AstroFont } from "astro-font";
3---
4
5<head>
6    <AstroFont
7      config={[
8        {
9          name: "Afacad",
10          src: [
11            {
12              style: 'bold',
13              weight: '700',
14              // Picked up font URL by manually visiting Google Fonts URL
15              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
16            },
17          ],
18          preload: true,
19          display: "swap",
20          selector: "body",
21          fallback: "sans-serif",
22        },
23      ]}
24    />
25</head>

Local Fonts

1---
2import { join } from "node:path";
3import { AstroFont } from "astro-font";
4---
5
6<head>
7    <AstroFont
8      config={[
9        {
10          name: "Afacad",
11          src: [
12            {
13              style: 'normal',
14              weight: '400',
15              path: join(process.cwd(), 'public', 'fonts', 'Afacad-Regular.ttf')
16            },
17            {
18              style: 'medium',
19              weight: '500',
20              path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf')
21            },
22          ],
23          preload: false,
24          display: "swap",
25          selector: "body",
26          fallback: "sans-serif",
27        },
28      ]}
29    />
30</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:

1---
2import { join } from "node:path";
3import { AstroFont } from "astro-font";
4---
5
6<head>
7    <AstroFont
8      config={[
9        {
10          name: "Afacad",
11          src: [
12            {
13              style: 'bold',
14              weight: '700',
15              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
16            },
17          ],
18          preload: true,
19          display: "swap",
20          selector: "body",
21          fallback: "sans-serif",
22        },
23        {
24          name: "Inter",
25          src: [
26            {
27              weight: '400',
28              style: 'normal',
29              path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
30            }
31          ],
32          preload: true,
33          display: "swap",
34          selector: "body > span",
35          fallback: "serif",
36        },
37      ]}
38    />
39</head>

Configuring CSS Classes

The selector attribute per config object can be used to configure which CSS class will reflect the whole CSS (automatically including the references to fallback fonts CSS).

1---
2import { join } from "node:path"
3---
4
5<AstroFont
6  config={[
7    {
8      name: "Afacad",
9      src: [
10        {
11          style: 'bold',
12          weight: '700',
13          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
14        },
15      ],
16      preload: true,
17      display: "swap",
18      fallback: "sans-serif",
19
20      // My Custom CSS Selector
21      // Type: ClassName
22      selector: ".custom_class",
23
24    },
25    {
26      name: "Inter",
27      src: [
28        {
29          weight: '400',
30          style: 'normal',
31          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
32        }
33      ],
34      preload: true,
35      display: "swap",
36      fallback: "serif",
37
38      // My Custom CSS Selector
39      // Type: CSS Selector
40      selector: "body > span",
41    },
42  ]}
43/>

Configuring CSS Variables

The cssVariable attribute per config object can be used to configure which CSS variable will reflect in your document's :root CSS selector (automatically including the references to fallback fonts CSS).

1---
2import { join } from "node:path"
3---
4
5<AstroFont
6  config={[
7    {
8      name: "Afacad",
9      src: [
10        {
11          style: 'bold',
12          weight: '700',
13          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
14        },
15      ],
16      preload: true,
17      display: "swap",
18      fallback: "sans-serif",
19
20      // My Custom CSS Selector
21      // Type: ClassName
22      selector: ".custom_class",
23
24    },
25    {
26      name: "Inter",
27      src: [
28        {
29          weight: '400',
30          style: 'normal',
31          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
32        }
33      ],
34      preload: true,
35      display: "swap",
36      fallback: "serif",
37
38      // My Custom CSS Variable
39      // Type: CSS Variable
40      cssVariable: "astro-font",
41
42      // and now use it as style="font-family: var(--astro-font)"
43    },
44  ]}
45/>

Configuring Fallback Font Name

The fallbackName attribute per config object can be used to configure the fallback font's family name (in CSS).

1---
2import { join } from "node:path"
3---
4
5<AstroFont
6  config={[
7    {
8      name: "Afacad",
9      src: [
10        {
11          style: 'bold',
12          weight: '700',
13          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
14        },
15      ],
16      preload: true,
17      display: "swap",
18      fallback: "sans-serif",
19      selector: ".custom_class",
20
21      // My Custom Fallback Font Name
22      fallbackName: "Afacad Override",
23
24    },
25    {
26      name: "Inter",
27      src: [
28        {
29          weight: '400',
30          style: 'normal',
31          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
32        }
33      ],
34      preload: true,
35      display: "swap",
36      fallback: "serif",
37      cssVariable: "astro-font",
38
39      // My Custom Fallback Font Name
40      fallbackName: "Inter Custom Override",
41      
42    },
43  ]}
44/>

With Cloudflare Workers

astro-font uses the following node imports:

node:path
node:buffer

Step 1. Enable nodejs_compat

To make sure that it works in Cloudflare Workers, please enable the node_compatibiliy flag per the guide https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-nodejs-with-workers.

If the above guide fails to work, go to your Cloudflare project > Settings > Functions > Compatibility flags and add the flag (as follows).

Step 2. Opt out of bundling Node.js built-ins

Per Astro + Cloudflare docs, you'd need to modify the vite configuration to allow for the node:* import syntax:

1// File: astro.config.mjs
2
3import { defineConfig } from 'astro/config';
4import cloudflare from '@astrojs/cloudflare';
5
6// https://astro.build/config
7export default defineConfig({
8    output: 'server',
9    adapter: cloudflare(),
10+    vite: {
11+        ssr: {
12+          external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map((i) => `node:${i}`),
13+        },
14+        // make sure to use node:fs, node:path, or node:os if you are using it in your project instead of fs, path or os
15+    },
16});

Step 3. Use local fonts over CDN in case of Astro Server-Side Rendering with Cloudflare

As there's no access to the files in the public directory in the Cloudflare Pages (server-side render) context, you'd want to use fonts over CDN. To make the developer experience painless, use the following code snippet while setting up local fonts with Cloudflare in Astro:

1---
2import { join } from "node:path";
3import { AstroFont } from "astro-font";
4
5const fontPrefix = import.meta.env.PROD
6  ? Astro.site.toString()
7  : join(process.cwd(), "public");
8---
9
10<AstroFont
11    config={[
12        {
13            name: "Editorial New",
14            src: [
15                {
16                    style: "italic",
17                    weight: "500",
18                    path: join(
19                        fontPrefix,
20                        "fonts",
21                        "PPEditorialNew-MediumItalic.woff2"
22                    ),
23                },
24            ],
25            preload: true,
26            display: "swap",
27            selector: "body",
28            fallback: "sans-serif",
29        }
30    ]}
31/>

Dynamically use fonts on CDN but serve them locally

Let us say you want to self host the fonts but do not want to spend time fetching the fonts, setting up the right path, and do the hassle of bundling it in the application. That is where you would want to do the following steps:

Use the fetch: true in (per) font configuration. For example:

1<AstroFont
2  config={[
3    {
4      src: [],
5      preload: true,
6      display: 'swap',
7      name: 'vazirmatn',
8      fallback: 'monospace',
9      fetch: true,
10      verbose: true,
11      cacheDir: '.cache',
12      googleFontsURL: 'https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap',
13    },
14    {
15      src: [],
16      preload: true,
17      display: 'block',
18      name: 'material-icon-outlined',
19      fallback: 'monospace',
20      fetch: true,
21      verbose: true,
22      cacheDir: '.cache',
23      googleFontsURL: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0',
24    },
25  ]}
26/>

The fetch: true makes astro-font fetch the fonts specified.

Update your astro.config.* file to include the astroFont integration:
```
1// File: astro.config.mjs
2+ import { astroFont } from 'astro-font/integration'
3
4// ...
5integrations: [
6+ astroFont()
7]
8// ...
```
The integration makes sure that all the directories containing the fetched fonts are bundled into the Astro build.

Contributing

We love our contributors! Here's how you can contribute:

Open an issue if you believe you've encountered a bug.
Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

astro-font repo activity – generated by Axiom

No vulnerabilities found.

No security vulnerabilities found.