astro-font
Advanced tools
An Astro integration to optimize Local & Google fonts inspired by @next/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.
npm install astro-font
## or yarn
yarn add astro-font
## or pnpm
pnpm add astro-font
astro-font uses the following node imports:
node:pathnode:bufferTo 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).
Per Astro + Cloudflare docs, you'd need to modify the vite configuration to allow for the node:* import syntax:
// File: astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
// https://astro.build/config
export default defineConfig({
output: 'server',
adapter: cloudflare(),
+ vite: {
+ ssr: {
+ external: ['node:buffer', 'node:path', 'node:fs', 'node:os'],
+ },
+ },
});
Automatically optimize any Google Font. To use the font in all your pages, add it to <head> file in an Astro layout:
---
import { AstroFont } from "astro-font";
---
<head>
<AstroFont
config={[
{
src: [],
name: "Poppins",
// Google Fonts URL
googleFontsURL: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap',
preload: true,
display: "swap",
selector: "body",
fallback: "sans-serif",
},
]}
/>
</head>
---
import { AstroFont } from "astro-font";
---
<head>
<AstroFont
config={[
{
name: "Afacad",
src: [
{
style: 'bold',
weight: '700',
// Picked up font URL by manually visiting Google Fonts URL
path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
},
],
preload: true,
display: "swap",
selector: "body",
fallback: "sans-serif",
},
]}
/>
</head>
---
import { join } from "node:path";
import { AstroFont } from "astro-font";
---
<head>
<AstroFont
config={[
{
name: "Afacad",
src: [
{
style: 'normal',
weight: '400',
path: join(process.cwd(), 'public', 'fonts', 'Afacad-Regular.ttf')
},
{
style: 'medium',
weight: '500',
path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf')
},
],
preload: false,
display: "swap",
selector: "body",
fallback: "sans-serif",
},
]}
/>
</head>
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 { join } from "node:path";
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: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
}
],
preload: true,
display: "swap",
selector: "body > span",
fallback: "serif",
},
]}
/>
</head>
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).
---
import { join } from "node:path"
---
<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",
fallback: "sans-serif",
// My Custom CSS Selector
// Type: ClassName
selector: ".custom_class",
},
{
name: "Inter",
src: [
{
weight: '400',
style: 'normal',
path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
}
],
preload: true,
display: "swap",
fallback: "serif",
// My Custom CSS Selector
// Type: CSS Selector
selector: "body > span",
},
]}
/>
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).
---
import { join } from "node:path"
---
<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",
fallback: "sans-serif",
// My Custom CSS Selector
// Type: ClassName
selector: ".custom_class",
},
{
name: "Inter",
src: [
{
weight: '400',
style: 'normal',
path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
}
],
preload: true,
display: "swap",
fallback: "serif",
// My Custom CSS Variable
// Type: CSS Variable
cssVariable: "astro-font",
// and now use it as style="font-family: var(--astro-font)"
},
]}
/>
The fallbackName attribute per config object can be used to configure the fallback font's family name (in CSS).
---
import { join } from "node:path"
---
<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",
fallback: "sans-serif",
selector: ".custom_class",
// My Custom Fallback Font Name
fallbackName: "Afacad Override",
},
{
name: "Inter",
src: [
{
weight: '400',
style: 'normal',
path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
}
],
preload: true,
display: "swap",
fallback: "serif",
cssVariable: "astro-font",
// My Custom Fallback Font Name
fallbackName: "Inter Custom Override",
},
]}
/>
FAQs
An Astro integration to optimize Local & Google fonts inspired by @next/font
The npm package astro-font receives a total of 2,733 weekly downloads. As such, astro-font popularity was classified as popular.
We found that astro-font demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.