anthropic-fonts 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +83 -0
- package/LICENSE +21 -0
- package/README.md +682 -0
- package/cdn/v1/css/advanced.css +37 -0
- package/cdn/v1/css/all-ie.css +108 -0
- package/cdn/v1/css/all.css +125 -0
- package/cdn/v1/css/all.min.css +18 -0
- package/cdn/v1/css/anthropicmono.css +13 -0
- package/cdn/v1/css/anthropicsans.css +61 -0
- package/cdn/v1/css/anthropicserif.css +61 -0
- package/cdn/v1/data.json +150 -0
- package/cdn/v1/fonts/AnthropicMono@400.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@300.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@400.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@500.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@600.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@700.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@800.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSans@900.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@300.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@400.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@500.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@600.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@700.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@800.woff2 +0 -0
- package/cdn/v1/fonts/AnthropicSerif@900.woff2 +0 -0
- package/docs/API.md +477 -0
- package/docs/DEPLOYMENT.md +622 -0
- package/docs/PERFORMANCE.md +545 -0
- package/docs/USAGE.md +682 -0
- package/index.js +149 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,682 @@
|
|
|
1
|
+
# 📖 Usage Guide
|
|
2
|
+
|
|
3
|
+
How to integrate Anthropic Fonts into your web projects.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
1. [Quick Start](#quick-start)
|
|
8
|
+
2. [HTML Integration](#html-integration)
|
|
9
|
+
3. [CSS Integration](#css-integration)
|
|
10
|
+
4. [JavaScript Integration](#javascript-integration)
|
|
11
|
+
5. [Framework Specific](#framework-specific)
|
|
12
|
+
6. [Advanced Usage](#advanced-usage)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
### Option 1: Static CSS (Simplest)
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<!DOCTYPE html>
|
|
22
|
+
<html>
|
|
23
|
+
<head>
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<h1 style="font-family: 'Anthropic Sans'">Hello World</h1>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Option 2: Dynamic CSS (Performance)
|
|
33
|
+
|
|
34
|
+
Only load the fonts and weights you need:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=AnthropicSans&weights=400;700">
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Option 3: Font Import in CSS
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
@import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css');
|
|
44
|
+
|
|
45
|
+
body {
|
|
46
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## HTML Integration
|
|
53
|
+
|
|
54
|
+
### Basic Setup
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!DOCTYPE html>
|
|
58
|
+
<html lang="en">
|
|
59
|
+
<head>
|
|
60
|
+
<meta charset="UTF-8">
|
|
61
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
62
|
+
<title>My Site with Anthropic Fonts</title>
|
|
63
|
+
|
|
64
|
+
<!-- Load fonts with preconnect for faster loading -->
|
|
65
|
+
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
|
66
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
|
|
67
|
+
|
|
68
|
+
<style>
|
|
69
|
+
body {
|
|
70
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
71
|
+
}
|
|
72
|
+
h1, h2, h3 {
|
|
73
|
+
font-family: 'Anthropic Serif', serif;
|
|
74
|
+
font-weight: 700;
|
|
75
|
+
}
|
|
76
|
+
code {
|
|
77
|
+
font-family: 'Anthropic Mono', monospace;
|
|
78
|
+
}
|
|
79
|
+
</style>
|
|
80
|
+
</head>
|
|
81
|
+
<body>
|
|
82
|
+
<h1>Welcome to Anthropic Fonts</h1>
|
|
83
|
+
<p>This is a paragraph in Anthropic Sans.</p>
|
|
84
|
+
<code>This is code in Anthropic Mono.</code>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Inline Styles
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<h1 style="font-family: 'Anthropic Sans'; font-weight: 700; font-size: 32px;">
|
|
93
|
+
Styled Heading
|
|
94
|
+
</h1>
|
|
95
|
+
|
|
96
|
+
<p style="font-family: 'Anthropic Serif'; font-weight: 300; line-height: 1.6;">
|
|
97
|
+
Light serif text with good line height
|
|
98
|
+
</p>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Different Weights
|
|
102
|
+
|
|
103
|
+
```html
|
|
104
|
+
<!-- Light -->
|
|
105
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 300;">300 - Light</p>
|
|
106
|
+
|
|
107
|
+
<!-- Regular -->
|
|
108
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 400;">400 - Regular</p>
|
|
109
|
+
|
|
110
|
+
<!-- Medium -->
|
|
111
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 500;">500 - Medium</p>
|
|
112
|
+
|
|
113
|
+
<!-- Semi-Bold -->
|
|
114
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 600;">600 - Semi-Bold</p>
|
|
115
|
+
|
|
116
|
+
<!-- Bold -->
|
|
117
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 700;">700 - Bold</p>
|
|
118
|
+
|
|
119
|
+
<!-- Extra Bold -->
|
|
120
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 800;">800 - Extra Bold</p>
|
|
121
|
+
|
|
122
|
+
<!-- Black -->
|
|
123
|
+
<p style="font-family: 'Anthropic Sans'; font-weight: 900;">900 - Black</p>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## CSS Integration
|
|
129
|
+
|
|
130
|
+
### Basic Usage
|
|
131
|
+
|
|
132
|
+
```css
|
|
133
|
+
@import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css');
|
|
134
|
+
|
|
135
|
+
/* Sans Serif (default weight: 400) */
|
|
136
|
+
body {
|
|
137
|
+
font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* Serif */
|
|
141
|
+
h1, h2, h3 {
|
|
142
|
+
font-family: 'Anthropic Serif', Georgia, serif;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Monospace */
|
|
146
|
+
code, pre {
|
|
147
|
+
font-family: 'Anthropic Mono', 'Courier New', monospace;
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Variable Font Weights
|
|
152
|
+
|
|
153
|
+
```css
|
|
154
|
+
@import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css');
|
|
155
|
+
|
|
156
|
+
.light {
|
|
157
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
158
|
+
font-weight: 300;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.regular {
|
|
162
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
163
|
+
font-weight: 400;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.medium {
|
|
167
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.semibold {
|
|
172
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
173
|
+
font-weight: 600;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.bold {
|
|
177
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
178
|
+
font-weight: 700;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.extrabold {
|
|
182
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
183
|
+
font-weight: 800;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.black {
|
|
187
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
188
|
+
font-weight: 900;
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### Typography Scale
|
|
193
|
+
|
|
194
|
+
```css
|
|
195
|
+
@import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css');
|
|
196
|
+
|
|
197
|
+
/* Headings */
|
|
198
|
+
h1 {
|
|
199
|
+
font-family: 'Anthropic Serif', serif;
|
|
200
|
+
font-size: 48px;
|
|
201
|
+
font-weight: 700;
|
|
202
|
+
line-height: 1.2;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
h2 {
|
|
206
|
+
font-family: 'Anthropic Serif', serif;
|
|
207
|
+
font-size: 36px;
|
|
208
|
+
font-weight: 700;
|
|
209
|
+
line-height: 1.3;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
h3 {
|
|
213
|
+
font-family: 'Anthropic Serif', serif;
|
|
214
|
+
font-size: 28px;
|
|
215
|
+
font-weight: 600;
|
|
216
|
+
line-height: 1.4;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Body */
|
|
220
|
+
body {
|
|
221
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
222
|
+
font-size: 16px;
|
|
223
|
+
font-weight: 400;
|
|
224
|
+
line-height: 1.6;
|
|
225
|
+
color: #333;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* Code */
|
|
229
|
+
code, pre {
|
|
230
|
+
font-family: 'Anthropic Mono', monospace;
|
|
231
|
+
font-size: 14px;
|
|
232
|
+
font-weight: 400;
|
|
233
|
+
}
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### Responsive Typography
|
|
237
|
+
|
|
238
|
+
```css
|
|
239
|
+
@import url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css');
|
|
240
|
+
|
|
241
|
+
/* Mobile first */
|
|
242
|
+
h1 {
|
|
243
|
+
font-family: 'Anthropic Serif', serif;
|
|
244
|
+
font-size: 28px;
|
|
245
|
+
font-weight: 700;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
body {
|
|
249
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
250
|
+
font-size: 14px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* Tablet */
|
|
254
|
+
@media (min-width: 768px) {
|
|
255
|
+
h1 {
|
|
256
|
+
font-size: 36px;
|
|
257
|
+
}
|
|
258
|
+
body {
|
|
259
|
+
font-size: 16px;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* Desktop */
|
|
264
|
+
@media (min-width: 1024px) {
|
|
265
|
+
h1 {
|
|
266
|
+
font-size: 48px;
|
|
267
|
+
}
|
|
268
|
+
body {
|
|
269
|
+
font-size: 18px;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
---
|
|
275
|
+
|
|
276
|
+
## JavaScript Integration
|
|
277
|
+
|
|
278
|
+
### Dynamic CSS Injection
|
|
279
|
+
|
|
280
|
+
```javascript
|
|
281
|
+
// Load fonts dynamically
|
|
282
|
+
function loadFonts(family = 'AnthropicSans', weights = '400;700') {
|
|
283
|
+
const link = document.createElement('link');
|
|
284
|
+
link.rel = 'stylesheet';
|
|
285
|
+
link.href = `https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=${family}&weights=${weights}`;
|
|
286
|
+
document.head.appendChild(link);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
// Usage
|
|
290
|
+
loadFonts('AnthropicSans', '400;500;700');
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
### Font Loading Observer
|
|
294
|
+
|
|
295
|
+
```javascript
|
|
296
|
+
// Wait for fonts to load before rendering
|
|
297
|
+
const fontLoad = new Promise((resolve) => {
|
|
298
|
+
if (document.fonts) {
|
|
299
|
+
document.fonts.ready.then(resolve);
|
|
300
|
+
} else {
|
|
301
|
+
resolve();
|
|
302
|
+
}
|
|
303
|
+
});
|
|
304
|
+
|
|
305
|
+
fontLoad.then(() => {
|
|
306
|
+
console.log('✅ Fonts loaded!');
|
|
307
|
+
document.body.style.visibility = 'visible';
|
|
308
|
+
});
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
### Fetch & Apply Fonts
|
|
312
|
+
|
|
313
|
+
```javascript
|
|
314
|
+
async function getFontCSS(family = 'AnthropicSans', weights = '400;700') {
|
|
315
|
+
try {
|
|
316
|
+
const response = await fetch(
|
|
317
|
+
`https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=${family}&weights=${weights}`
|
|
318
|
+
);
|
|
319
|
+
const css = await response.text();
|
|
320
|
+
|
|
321
|
+
const style = document.createElement('style');
|
|
322
|
+
style.textContent = css;
|
|
323
|
+
document.head.appendChild(style);
|
|
324
|
+
|
|
325
|
+
console.log('✅ Fonts CSS loaded');
|
|
326
|
+
} catch (error) {
|
|
327
|
+
console.error('❌ Failed to load fonts:', error);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// Usage
|
|
332
|
+
getFontCSS('AnthropicSans', '400;700');
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
### Detect Font Support
|
|
336
|
+
|
|
337
|
+
```javascript
|
|
338
|
+
// Check if fonts are loaded
|
|
339
|
+
function checkFontAvailable(fontName, timeout = 3000) {
|
|
340
|
+
return new Promise((resolve) => {
|
|
341
|
+
const canvas = document.createElement('canvas');
|
|
342
|
+
const ctx = canvas.getContext('2d');
|
|
343
|
+
const text = 'Anthropic';
|
|
344
|
+
|
|
345
|
+
// Measure without font
|
|
346
|
+
ctx.font = '16px sans-serif';
|
|
347
|
+
const widthWithoutFont = ctx.measureText(text).width;
|
|
348
|
+
|
|
349
|
+
// Measure with font
|
|
350
|
+
ctx.font = `16px "${fontName}", sans-serif`;
|
|
351
|
+
const widthWithFont = ctx.measureText(text).width;
|
|
352
|
+
|
|
353
|
+
resolve(widthWithoutFont !== widthWithFont);
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
// Usage
|
|
358
|
+
checkFontAvailable('Anthropic Sans').then(available => {
|
|
359
|
+
console.log(available ? '✅ Font loaded' : '❌ Font not loaded');
|
|
360
|
+
});
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
---
|
|
364
|
+
|
|
365
|
+
## Framework Specific
|
|
366
|
+
|
|
367
|
+
### React
|
|
368
|
+
|
|
369
|
+
```jsx
|
|
370
|
+
import { useEffect, useState } from 'react';
|
|
371
|
+
|
|
372
|
+
// Load fonts on mount
|
|
373
|
+
function App() {
|
|
374
|
+
const [fontsLoaded, setFontsLoaded] = useState(false);
|
|
375
|
+
|
|
376
|
+
useEffect(() => {
|
|
377
|
+
const link = document.createElement('link');
|
|
378
|
+
link.rel = 'stylesheet';
|
|
379
|
+
link.href = 'https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css';
|
|
380
|
+
link.onload = () => setFontsLoaded(true);
|
|
381
|
+
document.head.appendChild(link);
|
|
382
|
+
}, []);
|
|
383
|
+
|
|
384
|
+
return (
|
|
385
|
+
<div style={{ visibility: fontsLoaded ? 'visible' : 'hidden' }}>
|
|
386
|
+
<h1 style={{ fontFamily: 'Anthropic Serif' }}>Hello React</h1>
|
|
387
|
+
</div>
|
|
388
|
+
);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
export default App;
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
### Vue.js
|
|
395
|
+
|
|
396
|
+
```vue
|
|
397
|
+
<template>
|
|
398
|
+
<div v-if="fontsLoaded" class="container">
|
|
399
|
+
<h1 class="serif-font">Hello Vue</h1>
|
|
400
|
+
<p class="sans-font">This uses Anthropic fonts</p>
|
|
401
|
+
</div>
|
|
402
|
+
</template>
|
|
403
|
+
|
|
404
|
+
<script>
|
|
405
|
+
export default {
|
|
406
|
+
name: 'App',
|
|
407
|
+
data() {
|
|
408
|
+
return {
|
|
409
|
+
fontsLoaded: false
|
|
410
|
+
};
|
|
411
|
+
},
|
|
412
|
+
mounted() {
|
|
413
|
+
const link = document.createElement('link');
|
|
414
|
+
link.rel = 'stylesheet';
|
|
415
|
+
link.href = 'https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css';
|
|
416
|
+
link.onload = () => {
|
|
417
|
+
this.fontsLoaded = true;
|
|
418
|
+
};
|
|
419
|
+
document.head.appendChild(link);
|
|
420
|
+
}
|
|
421
|
+
};
|
|
422
|
+
</script>
|
|
423
|
+
|
|
424
|
+
<style scoped>
|
|
425
|
+
.serif-font {
|
|
426
|
+
font-family: 'Anthropic Serif', serif;
|
|
427
|
+
}
|
|
428
|
+
.sans-font {
|
|
429
|
+
font-family: 'Anthropic Sans', sans-serif;
|
|
430
|
+
}
|
|
431
|
+
</style>
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
### Next.js
|
|
435
|
+
|
|
436
|
+
```jsx
|
|
437
|
+
// In _app.js or _app.tsx
|
|
438
|
+
import Head from 'next/head';
|
|
439
|
+
|
|
440
|
+
function MyApp({ Component, pageProps }) {
|
|
441
|
+
return (
|
|
442
|
+
<>
|
|
443
|
+
<Head>
|
|
444
|
+
<link
|
|
445
|
+
rel="stylesheet"
|
|
446
|
+
href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css"
|
|
447
|
+
/>
|
|
448
|
+
</Head>
|
|
449
|
+
<Component {...pageProps} />
|
|
450
|
+
</>
|
|
451
|
+
);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
export default MyApp;
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
### Tailwind CSS
|
|
458
|
+
|
|
459
|
+
```javascript
|
|
460
|
+
// tailwind.config.js
|
|
461
|
+
module.exports = {
|
|
462
|
+
theme: {
|
|
463
|
+
fontFamily: {
|
|
464
|
+
sans: ['Anthropic Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
|
465
|
+
serif: ['Anthropic Serif', 'ui-serif', 'Georgia', 'serif'],
|
|
466
|
+
mono: ['Anthropic Mono', 'ui-monospace', 'monospace'],
|
|
467
|
+
},
|
|
468
|
+
},
|
|
469
|
+
};
|
|
470
|
+
```
|
|
471
|
+
|
|
472
|
+
```html
|
|
473
|
+
<!-- In your HTML -->
|
|
474
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
|
|
475
|
+
|
|
476
|
+
<!-- Usage -->
|
|
477
|
+
<h1 class="font-serif text-4xl font-bold">Serif Heading</h1>
|
|
478
|
+
<p class="font-sans text-base">Sans serif paragraph</p>
|
|
479
|
+
<code class="font-mono">Monospace code</code>
|
|
480
|
+
```
|
|
481
|
+
|
|
482
|
+
### Svelte
|
|
483
|
+
|
|
484
|
+
```svelte
|
|
485
|
+
<script>
|
|
486
|
+
onMount(() => {
|
|
487
|
+
const link = document.createElement('link');
|
|
488
|
+
link.rel = 'stylesheet';
|
|
489
|
+
link.href = 'https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css';
|
|
490
|
+
document.head.appendChild(link);
|
|
491
|
+
});
|
|
492
|
+
</script>
|
|
493
|
+
|
|
494
|
+
<h1>Hello Svelte</h1>
|
|
495
|
+
|
|
496
|
+
<style>
|
|
497
|
+
:global(h1) {
|
|
498
|
+
font-family: 'Anthropic Serif', serif;
|
|
499
|
+
}
|
|
500
|
+
</style>
|
|
501
|
+
```
|
|
502
|
+
|
|
503
|
+
---
|
|
504
|
+
|
|
505
|
+
## Advanced Usage
|
|
506
|
+
|
|
507
|
+
### Variable Font Syntax
|
|
508
|
+
|
|
509
|
+
```css
|
|
510
|
+
/* Load specific weights only */
|
|
511
|
+
@font-face {
|
|
512
|
+
font-family: 'Anthropic Sans';
|
|
513
|
+
src: url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@700.woff2') format('woff2');
|
|
514
|
+
font-weight: 700;
|
|
515
|
+
font-display: swap;
|
|
516
|
+
}
|
|
517
|
+
```
|
|
518
|
+
|
|
519
|
+
### Font Subsetting
|
|
520
|
+
|
|
521
|
+
```html
|
|
522
|
+
<!-- Only load Latin characters (smaller file) -->
|
|
523
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
|
|
524
|
+
|
|
525
|
+
<!-- Custom subset request (if API supports) -->
|
|
526
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/api/css?family=AnthropicSans@400;700&subset=latin">
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
### Font Loading Strategies
|
|
530
|
+
|
|
531
|
+
#### 1. Font Display Swap (Recommended)
|
|
532
|
+
|
|
533
|
+
```css
|
|
534
|
+
@font-face {
|
|
535
|
+
font-family: 'Anthropic Sans';
|
|
536
|
+
font-display: swap; /* Show system font immediately, swap when loaded */
|
|
537
|
+
}
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
#### 2. Font Display Fallback
|
|
541
|
+
|
|
542
|
+
```css
|
|
543
|
+
@font-face {
|
|
544
|
+
font-family: 'Anthropic Sans';
|
|
545
|
+
font-display: fallback; /* Use system font for 100ms, then swap */
|
|
546
|
+
}
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
#### 3. Font Display Optional
|
|
550
|
+
|
|
551
|
+
```css
|
|
552
|
+
@font-face {
|
|
553
|
+
font-family: 'Anthropic Sans';
|
|
554
|
+
font-display: optional; /* Use system font if not loaded in 100ms */
|
|
555
|
+
}
|
|
556
|
+
```
|
|
557
|
+
|
|
558
|
+
### Preload Strategy
|
|
559
|
+
|
|
560
|
+
```html
|
|
561
|
+
<head>
|
|
562
|
+
<!-- Preconnect for speed -->
|
|
563
|
+
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
|
564
|
+
|
|
565
|
+
<!-- Preload critical fonts -->
|
|
566
|
+
<link
|
|
567
|
+
rel="preload"
|
|
568
|
+
as="font"
|
|
569
|
+
type="font/woff2"
|
|
570
|
+
href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@400.woff2"
|
|
571
|
+
crossorigin
|
|
572
|
+
>
|
|
573
|
+
<link
|
|
574
|
+
rel="preload"
|
|
575
|
+
as="font"
|
|
576
|
+
type="font/woff2"
|
|
577
|
+
href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/fonts/AnthropicSans@700.woff2"
|
|
578
|
+
crossorigin
|
|
579
|
+
>
|
|
580
|
+
|
|
581
|
+
<!-- Load all fonts CSS -->
|
|
582
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devchauhann/fonts@v1.1.0/cdn/v1/css/all.css">
|
|
583
|
+
</head>
|
|
584
|
+
```
|
|
585
|
+
|
|
586
|
+
### Local Fallbacks
|
|
587
|
+
|
|
588
|
+
```css
|
|
589
|
+
/* If CDN fails, use system fonts */
|
|
590
|
+
body {
|
|
591
|
+
font-family: 'Anthropic Sans',
|
|
592
|
+
-apple-system,
|
|
593
|
+
BlinkMacSystemFont,
|
|
594
|
+
'Segoe UI',
|
|
595
|
+
Helvetica,
|
|
596
|
+
Arial,
|
|
597
|
+
sans-serif;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
h1 {
|
|
601
|
+
font-family: 'Anthropic Serif',
|
|
602
|
+
Georgia,
|
|
603
|
+
'Times New Roman',
|
|
604
|
+
serif;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
code {
|
|
608
|
+
font-family: 'Anthropic Mono',
|
|
609
|
+
'Courier New',
|
|
610
|
+
Courier,
|
|
611
|
+
monospace;
|
|
612
|
+
}
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
### Error Handling
|
|
616
|
+
|
|
617
|
+
```javascript
|
|
618
|
+
// Detect if fonts failed to load
|
|
619
|
+
const fontLoadTimeout = setTimeout(() => {
|
|
620
|
+
console.warn('⚠️ Fonts took too long to load, using fallback');
|
|
621
|
+
document.body.classList.add('fonts-fallback');
|
|
622
|
+
}, 3000);
|
|
623
|
+
|
|
624
|
+
document.fonts.ready.then(() => {
|
|
625
|
+
clearTimeout(fontLoadTimeout);
|
|
626
|
+
document.body.classList.add('fonts-loaded');
|
|
627
|
+
console.log('✅ Fonts loaded successfully');
|
|
628
|
+
});
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
### Performance Monitoring
|
|
632
|
+
|
|
633
|
+
```javascript
|
|
634
|
+
// Measure font loading performance
|
|
635
|
+
if (window.performance && window.performance.getEntriesByType) {
|
|
636
|
+
window.addEventListener('load', () => {
|
|
637
|
+
const resources = performance.getEntriesByType('resource');
|
|
638
|
+
const fontResources = resources.filter(r => r.name.includes('fonts'));
|
|
639
|
+
|
|
640
|
+
fontResources.forEach(font => {
|
|
641
|
+
console.log(`Font: ${font.name}`);
|
|
642
|
+
console.log(`Size: ${(font.transferSize / 1024).toFixed(2)} KB`);
|
|
643
|
+
console.log(`Time: ${(font.duration).toFixed(2)} ms`);
|
|
644
|
+
});
|
|
645
|
+
});
|
|
646
|
+
}
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
---
|
|
650
|
+
|
|
651
|
+
## 🎨 Font Families Available
|
|
652
|
+
|
|
653
|
+
| Family | Weights | Best For |
|
|
654
|
+
|--------|---------|----------|
|
|
655
|
+
| **Anthropic Sans** | 300, 400, 500, 600, 700, 800, 900 | Body text, UI |
|
|
656
|
+
| **Anthropic Serif** | 300, 400, 500, 600, 700, 800, 900 | Headings, Editorial |
|
|
657
|
+
| **Anthropic Mono** | 400 | Code, Terminal |
|
|
658
|
+
|
|
659
|
+
---
|
|
660
|
+
|
|
661
|
+
## ❓ Common Questions
|
|
662
|
+
|
|
663
|
+
**Q: Which font should I use?**
|
|
664
|
+
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.
|
|
665
|
+
|
|
666
|
+
**Q: Do I need all weights?**
|
|
667
|
+
A: No. Use the dynamic API: `?weights=400;700` to load only what you need.
|
|
668
|
+
|
|
669
|
+
**Q: How can I optimize performance?**
|
|
670
|
+
A: Use preload for critical fonts, preconnect to CDN, use font-display: swap, and load only needed weights.
|
|
671
|
+
|
|
672
|
+
**Q: What if the CDN is down?**
|
|
673
|
+
A: Provide fallback fonts in your CSS. The browser will automatically use system fonts.
|
|
674
|
+
|
|
675
|
+
---
|
|
676
|
+
|
|
677
|
+
## 📚 More Resources
|
|
678
|
+
|
|
679
|
+
- [PERFORMANCE.md](./PERFORMANCE.md) - Optimization tips
|
|
680
|
+
- [DEPLOYMENT.md](./DEPLOYMENT.md) - CDN deployment guide
|
|
681
|
+
- [API.md](./API.md) - API reference
|
|
682
|
+
- Main [README.md](../README.md)
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* Anthropic Fonts - Advanced CSS with Preload Hints */
|
|
2
|
+
/* Generated: 2026-04-02T14:52:43.572Z */
|
|
3
|
+
|
|
4
|
+
/* Variable fonts declaration for flexible weights */
|
|
5
|
+
|
|
6
|
+
@font-face {
|
|
7
|
+
font-family: 'Anthropic Sans';
|
|
8
|
+
src: url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@main/cdn/v1/fonts/AnthropicSans@300.woff2') format('woff2');
|
|
9
|
+
font-weight: 300;
|
|
10
|
+
font-style: normal;
|
|
11
|
+
font-display: swap;
|
|
12
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
13
|
+
}
|
|
14
|
+
@font-face {
|
|
15
|
+
font-family: 'Anthropic Serif';
|
|
16
|
+
src: url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@main/cdn/v1/fonts/AnthropicSerif@300.woff2') format('woff2');
|
|
17
|
+
font-weight: 300;
|
|
18
|
+
font-style: normal;
|
|
19
|
+
font-display: swap;
|
|
20
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
21
|
+
}
|
|
22
|
+
@font-face {
|
|
23
|
+
font-family: 'Anthropic Mono';
|
|
24
|
+
src: url('https://cdn.jsdelivr.net/gh/devchauhann/fonts@main/cdn/v1/fonts/AnthropicMono@400.woff2') format('woff2');
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
font-style: normal;
|
|
27
|
+
font-display: swap;
|
|
28
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
29
|
+
}
|
|
30
|
+
/* Recommended: Add to <head> */
|
|
31
|
+
/*
|
|
32
|
+
<link rel="preconnect" href="https://cdn.example.com">
|
|
33
|
+
<link rel="dns-prefetch" href="https://cdn.example.com">
|
|
34
|
+
<link rel="preload" as="font" type="font/woff2" href="https://cdn.example.com/v1/fonts/AnthropicSans@400.woff2">
|
|
35
|
+
<link rel="preload" as="font" type="font/woff2" href="https://cdn.example.com/v1/fonts/AnthropicSerif@400.woff2">
|
|
36
|
+
<link rel="preload" as="font" type="font/woff2" href="https://cdn.example.com/v1/fonts/AnthropicMono@400.woff2">
|
|
37
|
+
*/
|