Astro integration that works the same way as Next.js font optimization.
MIT License
This integration applies Next.js font optimization solution to Astro. reference: https://nextjs.org/docs/basic-features/font-optimization
yarn add -D astro-fonts-next
// astro.config.mjs
import { defineConfig } from 'astro/config'
import fonts from 'astro-fonts-next'
export default defineConfig({
integrations: [
fonts({ url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' }),
// fonts({ url: 'https://use.typekit.net/~~~~~.css' }),
// or
fonts({
url: [
'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap',
],
}),
],
experimental: {
integrations: true,
},
})
import fonts from 'astro-fonts-next'
key | type | required | default | description |
---|---|---|---|---|
url |
string | string[]
|
true | The actual link to the font provider to be used. You may specify more than one in the array.(e.g.<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> → https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap ) |
astro-fonts-next is available under the MIT License.