astro-community / fonts

WIP Fonts Plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Astro Fonts

Astro Fonts lets you embed fonts in Astro.

import Font from '@astropub/fonts'
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro Fonts Example</title>
    <Font.Comforter for="body" />
    <h1>Astro Fonts Example</h1>
npm init astro -- --template astro-community/plugin-template
// astro.config.js
import { fontsPlugin } from '@astropub/fonts'

/** @type {import('astro').AstroUserConfig} */
const config = {
  renderers: [],
  vite: {
    plugins: [

export default config

Open in StackBlitz

Project Structure

Inside of your Astro project, you'll see the following folders and files:

├── demo/
│   ├── public/
│   └── src/
│       └── pages/
│           └── index.astro
└── packages/
    └── my-plugin/
        ├── index.js
        └── package.json

This project uses workspaces to develop a single package, @astropub/fonts.

It also includes a minimal Astro project, demo, for developing and demonstrating the plugin.


All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run start Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run serve Preview your build locally, before deploying

Want to learn more? Read our documentation or jump into our Discord server.


WIP Fonts Plugin


Language:JavaScript 100.0%