anthropic-fonts

v1.1.0

Published

a month ago

Production-ready open-source font CDN system with Anthropic Sans, Serif, and Mono typefaces

Downloads

191

0High
0Medium
0Low

devchauhann

fonts cdn web-fonts woff2 typography self-hosted anthropic typeface sans-serif serif monospace font-library

📖 Usage Guide

How to integrate Anthropic Fonts into your web projects.

Quick Start

Option 1: Static CSS (Simplest)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/[email protected]/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/devchauhann/[email protected]/cdn/api/css?family=AnthropicSans&weights=400;700">

Option 3: Font Import in CSS

@import url('https://cdn.jsdelivr.net/gh/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/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/devchauhann/[email protected]/cdn/v1/fonts/[email protected]') 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/devchauhann/[email protected]/cdn/v1/css/all.css">

<!-- Custom subset request (if API supports) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/[email protected]/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/devchauhann/[email protected]/cdn/v1/fonts/[email protected]"
    crossorigin
  >
  <link 
    rel="preload" 
    as="font" 
    type="font/woff2"
    href="https://cdn.jsdelivr.net/gh/devchauhann/[email protected]/cdn/v1/fonts/[email protected]"
    crossorigin
  >
  
  <!-- Load all fonts CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/[email protected]/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

PERFORMANCE.md - Optimization tips
DEPLOYMENT.md - CDN deployment guide
API.md - API reference
Main README.md