https://github.com/dc7290/astro-fonts-next

Astro integration that works the same way as Next.js font optimization.
https://github.com/dc7290/astro-fonts-next

astro fonts integration nextjs

Last synced: 2 months ago
JSON representation

Astro integration that works the same way as Next.js font optimization.

• Host: GitHub
• URL: https://github.com/dc7290/astro-fonts-next
• Owner: dc7290
• License: mit
• Created: 2022-06-14T15:04:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-18T22:56:40.000Z (3 months ago)
• Last Synced: 2024-10-19T03:22:36.318Z (3 months ago)
• Topics: astro, fonts, integration, nextjs
• Language: JavaScript
• Homepage:
• Size: 726 KB
• Stars: 24
• Watchers: 1
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-astro - astro-fonts-next - Integration, applies [NextJS font optimization](https://nextjs.org/blog/next-10-2#automatic-webfont-optimization) to Google Fonts (What Do I Use... / If I want to add a font?)

README

        
# astro-fonts-next















This integration applies Next.js font optimization solution to Astro.

reference: https://nextjs.org/docs/basic-features/font-optimization

## Installation

```bash

yarn add -D astro-fonts-next

```

## Usage

```js

// 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.
``
→ `https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap`) |

## License

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