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.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub bizzet/astro-layer --plugin astro-layer