Stats
Actions
Tags
How this skill is triggered — by the user, by Claude, or both
Slash command
/astro-layer:add-fontThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Adds a custom web font using the Astro built-in Fonts API (preferred) or Fontsource npm package (fallback).
Adds a custom web font using the Astro built-in Fonts API (preferred) or Fontsource npm package (fallback).
Downloads and caches fonts at build time. Served from your own domain — no third-party CDN, no privacy concerns. Automatic fallback optimization.
1. Update astro.config.mjs:
import { defineConfig, fontProviders } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap()],
output: 'static',
fonts: [
{
provider: fontProviders.fontsource(),
name: 'Inter',
cssVariable: '--font-sans',
weights: [400, 500, 600, 700],
styles: ['normal'],
subsets: ['latin'],
fallbacks: ['sans-serif'],
},
],
});
2. Add <Font> to Base.astro <head>:
---
import { Font } from 'astro:assets';
---
<head>
<Font cssVariable="--font-sans" preload />
...
</head>
The CSS variable --font-sans in tokens.css is automatically populated by the Fonts API. No @import needed.
Available providers: fontProviders.google(), fontProviders.fontsource(), fontProviders.bunny(), fontProviders.fontshare(), fontProviders.adobe(), fontProviders.local()
Use when you need advanced control or the Fonts API doesn't support the font.
npm install @fontsource-variable/inter
Import in Base.astro before styles. Update --font-sans token in tokens.css. font-display: swap is automatic. Self-hosted — no CDN.
<link> TagsPrivacy issues, external dependency, performance penalty. Always self-host via Option A or Option B.
See references/font-patterns.md for complete setup for both options and all available Fonts API providers.
npx claudepluginhub bizzet/astro-layer --plugin astro-layerCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.