From web-fonts
Web font optimization reference - font-display, WOFF2, variable fonts, Google Fonts, preloading, and performance
How this skill is triggered — by the user, by Claude, or both
Slash command
/web-fonts:font-optimization-referenceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Quick reference for web font optimization, loading strategies, and performance best practices.
Quick reference for web font optimization, loading strategies, and performance best practices.
| Strategy | FOIT | FOUT | Use Case |
|---|---|---|---|
swap | ❌ | ✅ | Best for body text (recommended) |
block | ✅ | ❌ | Icons, critical headings |
fallback | Short | ✅ | Balanced approach |
optional | Shortest | ✅ | Performance-first |
auto | Browser | Browser | Not recommended |
/* RECOMMENDED - Body text */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}
/* Icons - Prevent layout shift */
@font-face {
font-family: 'Material Icons';
src: url('/fonts/material-icons.woff2') format('woff2');
font-display: block;
}
/* Performance-first */
@font-face {
font-family: 'Optional Font';
src: url('/fonts/optional.woff2') format('woff2');
font-display: optional;
}
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2'), /* Modern browsers */
url('font.woff') format('woff'), /* Fallback */
url('font.ttf') format('truetype'); /* Legacy */
font-display: swap;
}
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
<!-- Preload critical fonts -->
<link
rel="preload"
href="/fonts/inter-regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin>
⚠️ Warning: Only preload 1-2 critical fonts to avoid blocking rendering.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
/* Download fonts from google-webfonts-helper.herokuapp.com */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2');
font-display: swap;
font-weight: 400;
unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
<!-- Only load Latin characters, weights 400 and 700 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap&subset=latin" rel="stylesheet">
@font-face {
font-family: 'Inter Variable';
src: url('inter-variable.woff2') format('woff2-variations');
font-display: swap;
font-weight: 100 900; /* Range */
}
.text {
font-family: 'Inter Variable', sans-serif;
font-weight: 600;
}
.custom {
font-family: 'Inter Variable';
font-variation-settings: 'wght' 650, 'slnt' -10;
}
/* Latin only */
@font-face {
font-family: 'Inter';
src: url('inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
/* Cyrillic only */
@font-face {
font-family: 'Inter';
src: url('inter-cyrillic.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1;
}
body {
font-family:
-apple-system, BlinkMacSystemFont,
'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans',
'Helvetica Neue', sans-serif;
}
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
size-adjust: 105%; /* Adjust to match fallback */
}
// Check if font is loaded
document.fonts.ready.then(() => {
console.log('All fonts loaded');
});
// Load specific font
const font = new FontFace('Inter', 'url(/fonts/inter.woff2)');
font.load().then(() => {
document.fonts.add(font);
});
✅ DO:
font-display: swap for body text❌ DON'T:
crossorigin on preload<!-- System fonts with optional web font enhancement -->
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=optional" rel="stylesheet">
<style>
.enhanced {
font-family: 'Inter', -apple-system, sans-serif;
}
</style>
<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400.woff2') format('woff2');
font-display: swap;
font-weight: 400;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-700.woff2') format('woff2');
font-display: swap;
font-weight: 700;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
}
</style>
<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-display: swap;
font-weight: 100 900;
}
body {
font-family: 'Inter Variable', -apple-system, sans-serif;
font-weight: 400;
}
h1 { font-weight: 700; }
.thin { font-weight: 300; }
</style>
Use this reference for quick font optimization lookups and performance improvements.
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 ehssanatassi/ui-marketplace --plugin web-fonts