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
Thank you for that awesome package... it helped me fight the "layout shift"!
— Michael Rambeau (@michaelrambeau) January 17, 2024
I will add it to Best of JS, as we have a tag `Astro` https://t.co/38Akqa5IQd
References
- GitHub: astro-font
- Astro Starter: launchfa.st