astro-fonts-next

This integration applies Next.js font optimization solution to Astro. reference: https://nextjs.org/docs/basic-features/font-optimization

Installation

yarn add -D astro-fonts-next

Usage

// 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,
  },
})

API Reference

Integration

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) |

License

astro-fonts-next is available under the MIT License.