# 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](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 `` file in an Astro layout:
### Use Google Fonts URL directly
```astro
---
import { AstroFont } from "astro-font";
---
```
### Pick fonts from Google Fonts URL
```astro
---
import { AstroFont } from "astro-font";
---
```
## Local Fonts
```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";
---
```
## 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 { join } from "node:path";
import { AstroFont } from "astro-font";
---
span",
fallback: "serif",
},
]}
/>
```
## 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).
```astro
---
import { join } from "node:path"
---
span",
},
]}
/>
```
## 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).
```astro
---
import { join } from "node:path"
---
```
## Configuring Fallback Font Name
The `fallbackName` attribute per config object can be used to configure the fallback font's family name (in CSS).
```astro
---
import { join } from "node:path"
---
```