Skip to content
BranchesTags

Repository files navigation

📖 Usage Guide

How to integrate Anthropic Fonts into your web projects.

Table of Contents

  1. Quick Start
  2. HTML Integration
  3. CSS Integration
  4. JavaScript Integration
  5. Framework Specific
  6. Advanced Usage

Quick Start

Option 1: Static CSS (Simplest)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css">
</head>
<body>
  <h1 style="font-family: 'Anthropic Sans'">Hello World</h1>
</body>
</html>

Option 2: Dynamic CSS (Performance)

Only load the fonts and weights you need:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/api/css?family=AnthropicSans&weights=400;700">

Option 3: Font Import in CSS

@import url('https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css');

body {
  font-family: 'Anthropic Sans', sans-serif;
}

HTML Integration

Basic Setup

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site with Anthropic Fonts</title>
  
  <!-- Load fonts with preconnect for faster loading -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css">
  
  <style>
    body {
      font-family: 'Anthropic Sans', sans-serif;
    }
    h1, h2, h3 {
      font-family: 'Anthropic Serif', serif;
      font-weight: 700;
    }
    code {
      font-family: 'Anthropic Mono', monospace;
    }
  </style>
</head>
<body>
  <h1>Welcome to Anthropic Fonts</h1>
  <p>This is a paragraph in Anthropic Sans.</p>
  <code>This is code in Anthropic Mono.</code>
</body>
</html>

Inline Styles

<h1 style="font-family: 'Anthropic Sans'; font-weight: 700; font-size: 32px;">
  Styled Heading
</h1>

<p style="font-family: 'Anthropic Serif'; font-weight: 300; line-height: 1.6;">
  Light serif text with good line height
</p>

Different Weights

<!-- Light -->
<p style="font-family: 'Anthropic Sans'; font-weight: 300;">300 - Light</p>

<!-- Regular -->
<p style="font-family: 'Anthropic Sans'; font-weight: 400;">400 - Regular</p>

<!-- Medium -->
<p style="font-family: 'Anthropic Sans'; font-weight: 500;">500 - Medium</p>

<!-- Semi-Bold -->
<p style="font-family: 'Anthropic Sans'; font-weight: 600;">600 - Semi-Bold</p>

<!-- Bold -->
<p style="font-family: 'Anthropic Sans'; font-weight: 700;">700 - Bold</p>

<!-- Extra Bold -->
<p style="font-family: 'Anthropic Sans'; font-weight: 800;">800 - Extra Bold</p>

<!-- Black -->
<p style="font-family: 'Anthropic Sans'; font-weight: 900;">900 - Black</p>

CSS Integration

Basic Usage

@import url('https://cdn.jsdelivr.net/gh/dqev/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

@import url('https://cdn.jsdelivr.net/gh/dqev/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

@import url('https://cdn.jsdelivr.net/gh/dqev/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

@import url('https://cdn.jsdelivr.net/gh/dqev/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

// 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/dqev/fonts@v1.1.0/cdn/api/css?family=${family}&weights=${weights}`;
  document.head.appendChild(link);
}

// Usage
loadFonts('AnthropicSans', '400;500;700');

Font Loading Observer

// 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

async function getFontCSS(family = 'AnthropicSans', weights = '400;700') {
  try {
    const response = await fetch(
      `https://cdn.jsdelivr.net/gh/dqev/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

// 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

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/dqev/fonts@v1.1.0/cdn/v1/css/all.css';
    link.onload = () => setFontsLoaded(true);
    document.head.appendChild(link);
  }, []);

  return (
    <div style={{ visibility: fontsLoaded ? 'visible' : 'hidden' }}>
      <h1 style={{ fontFamily: 'Anthropic Serif' }}>Hello React</h1>
    </div>
  );
}

export default App;

Vue.js

<template>
  <div v-if="fontsLoaded" class="container">
    <h1 class="serif-font">Hello Vue</h1>
    <p class="sans-font">This uses Anthropic fonts</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      fontsLoaded: false
    };
  },
  mounted() {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css';
    link.onload = () => {
      this.fontsLoaded = true;
    };
    document.head.appendChild(link);
  }
};
</script>

<style scoped>
.serif-font {
  font-family: 'Anthropic Serif', serif;
}
.sans-font {
  font-family: 'Anthropic Sans', sans-serif;
}
</style>

Next.js

// In _app.js or _app.tsx
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link 
          rel="stylesheet" 
          href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Tailwind CSS

// 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'],
    },
  },
};
<!-- In your HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css">

<!-- Usage -->
<h1 class="font-serif text-4xl font-bold">Serif Heading</h1>
<p class="font-sans text-base">Sans serif paragraph</p>
<code class="font-mono">Monospace code</code>

Svelte

<script>
  onMount(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css';
    document.head.appendChild(link);
  });
</script>

<h1>Hello Svelte</h1>

<style>
  :global(h1) {
    font-family: 'Anthropic Serif', serif;
  }
</style>

Advanced Usage

Variable Font Syntax

/* Load specific weights only */
@font-face {
  font-family: 'Anthropic Sans';
  src: url('https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

Font Subsetting

<!-- Only load Latin characters (smaller file) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css">

<!-- Custom subset request (if API supports) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/api/css?family=AnthropicSans@400;700&subset=latin">

Font Loading Strategies

1. Font Display Swap (Recommended)

@font-face {
  font-family: 'Anthropic Sans';
  font-display: swap; /* Show system font immediately, swap when loaded */
}

2. Font Display Fallback

@font-face {
  font-family: 'Anthropic Sans';
  font-display: fallback; /* Use system font for 100ms, then swap */
}

3. Font Display Optional

@font-face {
  font-family: 'Anthropic Sans';
  font-display: optional; /* Use system font if not loaded in 100ms */
}

Preload Strategy

<head>
  <!-- Preconnect for speed -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  
  <!-- Preload critical fonts -->
  <link 
    rel="preload" 
    as="font" 
    type="font/woff2"
    href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@400.woff2"
    crossorigin
  >
  <link 
    rel="preload" 
    as="font" 
    type="font/woff2"
    href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@700.woff2"
    crossorigin
  >
  
  <!-- Load all fonts CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dqev/fonts@v1.1.0/cdn/v1/css/all.css">
</head>

Local Fallbacks

/* 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

// 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

// 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

About

No description, website, or topics provided.

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

5 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages