# 📖 Usage Guide How to integrate Anthropic Fonts into your web projects. ## Table of Contents 1. [Quick Start](#quick-start) 2. [HTML Integration](#html-integration) 3. [CSS Integration](#css-integration) 4. [JavaScript Integration](#javascript-integration) 5. [Framework Specific](#framework-specific) 6. [Advanced Usage](#advanced-usage) --- ## Quick Start ### Option 1: Static CSS (Simplest) ```html

Hello World

``` ### Option 2: Dynamic CSS (Performance) Only load the fonts and weights you need: ```html ``` ### Option 3: Font Import in CSS ```css @import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css'); body { font-family: 'Anthropic Sans', sans-serif; } ``` --- ## HTML Integration ### Basic Setup ```html My Site with Anthropic Fonts

Welcome to Anthropic Fonts

This is a paragraph in Anthropic Sans.

This is code in Anthropic Mono. ``` ### Inline Styles ```html

Styled Heading

Light serif text with good line height

``` ### Different Weights ```html

300 - Light

400 - Regular

500 - Medium

600 - Semi-Bold

700 - Bold

800 - Extra Bold

900 - Black

``` --- ## CSS Integration ### Basic Usage ```css @import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css'); /* Sans Serif (default weight: 400) */ body { font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Serif */ h1, h2, h3 { font-family: 'Anthropic Serif', Georgia, serif; } /* Monospace */ code, pre { font-family: 'Anthropic Mono', 'Courier New', monospace; } ``` ### Variable Font Weights ```css @import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css'); .light { font-family: 'Anthropic Sans', sans-serif; font-weight: 300; } .regular { font-family: 'Anthropic Sans', sans-serif; font-weight: 400; } .medium { font-family: 'Anthropic Sans', sans-serif; font-weight: 500; } .semibold { font-family: 'Anthropic Sans', sans-serif; font-weight: 600; } .bold { font-family: 'Anthropic Sans', sans-serif; font-weight: 700; } .extrabold { font-family: 'Anthropic Sans', sans-serif; font-weight: 800; } .black { font-family: 'Anthropic Sans', sans-serif; font-weight: 900; } ``` ### Typography Scale ```css @import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css'); /* Headings */ h1 { font-family: 'Anthropic Serif', serif; font-size: 48px; font-weight: 700; line-height: 1.2; } h2 { font-family: 'Anthropic Serif', serif; font-size: 36px; font-weight: 700; line-height: 1.3; } h3 { font-family: 'Anthropic Serif', serif; font-size: 28px; font-weight: 600; line-height: 1.4; } /* Body */ body { font-family: 'Anthropic Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: #333; } /* Code */ code, pre { font-family: 'Anthropic Mono', monospace; font-size: 14px; font-weight: 400; } ``` ### Responsive Typography ```css @import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css'); /* Mobile first */ h1 { font-family: 'Anthropic Serif', serif; font-size: 28px; font-weight: 700; } body { font-family: 'Anthropic Sans', sans-serif; font-size: 14px; } /* Tablet */ @media (min-width: 768px) { h1 { font-size: 36px; } body { font-size: 16px; } } /* Desktop */ @media (min-width: 1024px) { h1 { font-size: 48px; } body { font-size: 18px; } } ``` --- ## JavaScript Integration ### Dynamic CSS Injection ```javascript // Load fonts dynamically function loadFonts(family = 'AnthropicSans', weights = '400;700') { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = `https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=${family}&weights=${weights}`; document.head.appendChild(link); } // Usage loadFonts('AnthropicSans', '400;500;700'); ``` ### Font Loading Observer ```javascript // Wait for fonts to load before rendering const fontLoad = new Promise((resolve) => { if (document.fonts) { document.fonts.ready.then(resolve); } else { resolve(); } }); fontLoad.then(() => { console.log('✅ Fonts loaded!'); document.body.style.visibility = 'visible'; }); ``` ### Fetch & Apply Fonts ```javascript async function getFontCSS(family = 'AnthropicSans', weights = '400;700') { try { const response = await fetch( `https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=${family}&weights=${weights}` ); const css = await response.text(); const style = document.createElement('style'); style.textContent = css; document.head.appendChild(style); console.log('✅ Fonts CSS loaded'); } catch (error) { console.error('❌ Failed to load fonts:', error); } } // Usage getFontCSS('AnthropicSans', '400;700'); ``` ### Detect Font Support ```javascript // Check if fonts are loaded function checkFontAvailable(fontName, timeout = 3000) { return new Promise((resolve) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const text = 'Anthropic'; // Measure without font ctx.font = '16px sans-serif'; const widthWithoutFont = ctx.measureText(text).width; // Measure with font ctx.font = `16px "${fontName}", sans-serif`; const widthWithFont = ctx.measureText(text).width; resolve(widthWithoutFont !== widthWithFont); }); } // Usage checkFontAvailable('Anthropic Sans').then(available => { console.log(available ? '✅ Font loaded' : '❌ Font not loaded'); }); ``` --- ## Framework Specific ### React ```jsx import { useEffect, useState } from 'react'; // Load fonts on mount function App() { const [fontsLoaded, setFontsLoaded] = useState(false); useEffect(() => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css'; link.onload = () => setFontsLoaded(true); document.head.appendChild(link); }, []); return (

Hello React

); } export default App; ``` ### Vue.js ```vue ``` ### Next.js ```jsx // In _app.js or _app.tsx import Head from 'next/head'; function MyApp({ Component, pageProps }) { return ( <> ); } export default MyApp; ``` ### Tailwind CSS ```javascript // tailwind.config.js module.exports = { theme: { fontFamily: { sans: ['Anthropic Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'], serif: ['Anthropic Serif', 'ui-serif', 'Georgia', 'serif'], mono: ['Anthropic Mono', 'ui-monospace', 'monospace'], }, }, }; ``` ```html

Serif Heading

Sans serif paragraph

Monospace code ``` ### Svelte ```svelte

Hello Svelte

``` --- ## Advanced Usage ### Variable Font Syntax ```css /* Load specific weights only */ @font-face { font-family: 'Anthropic Sans'; src: url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@700.woff2') format('woff2'); font-weight: 700; font-display: swap; } ``` ### Font Subsetting ```html ``` ### Font Loading Strategies #### 1. Font Display Swap (Recommended) ```css @font-face { font-family: 'Anthropic Sans'; font-display: swap; /* Show system font immediately, swap when loaded */ } ``` #### 2. Font Display Fallback ```css @font-face { font-family: 'Anthropic Sans'; font-display: fallback; /* Use system font for 100ms, then swap */ } ``` #### 3. Font Display Optional ```css @font-face { font-family: 'Anthropic Sans'; font-display: optional; /* Use system font if not loaded in 100ms */ } ``` ### Preload Strategy ```html ``` ### Local Fallbacks ```css /* If CDN fails, use system fonts */ body { font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } h1 { font-family: 'Anthropic Serif', Georgia, 'Times New Roman', serif; } code { font-family: 'Anthropic Mono', 'Courier New', Courier, monospace; } ``` ### Error Handling ```javascript // Detect if fonts failed to load const fontLoadTimeout = setTimeout(() => { console.warn('⚠️ Fonts took too long to load, using fallback'); document.body.classList.add('fonts-fallback'); }, 3000); document.fonts.ready.then(() => { clearTimeout(fontLoadTimeout); document.body.classList.add('fonts-loaded'); console.log('✅ Fonts loaded successfully'); }); ``` ### Performance Monitoring ```javascript // Measure font loading performance if (window.performance && window.performance.getEntriesByType) { window.addEventListener('load', () => { const resources = performance.getEntriesByType('resource'); const fontResources = resources.filter(r => r.name.includes('fonts')); fontResources.forEach(font => { console.log(`Font: ${font.name}`); console.log(`Size: ${(font.transferSize / 1024).toFixed(2)} KB`); console.log(`Time: ${(font.duration).toFixed(2)} ms`); }); }); } ``` --- ## 🎨 Font Families Available | Family | Weights | Best For | |--------|---------|----------| | **Anthropic Sans** | 300, 400, 500, 600, 700, 800, 900 | Body text, UI | | **Anthropic Serif** | 300, 400, 500, 600, 700, 800, 900 | Headings, Editorial | | **Anthropic Mono** | 400 | Code, Terminal | --- ## ❓ Common Questions **Q: Which font should I use?** A: Use Anthropic Sans for body text and UI (default, very readable). Use Anthropic Serif for headings and editorial content. Use Anthropic Mono for code. **Q: Do I need all weights?** A: No. Use the dynamic API: `?weights=400;700` to load only what you need. **Q: How can I optimize performance?** A: Use preload for critical fonts, preconnect to CDN, use font-display: swap, and load only needed weights. **Q: What if the CDN is down?** A: Provide fallback fonts in your CSS. The browser will automatically use system fonts. --- ## 📚 More Resources - [PERFORMANCE.md](./PERFORMANCE.md) - Optimization tips - [DEPLOYMENT.md](./DEPLOYMENT.md) - CDN deployment guide - [API.md](./API.md) - API reference - Main [README.md](../README.md)