1---
2name: preset-web-fonts
3description: Easy Google Fonts and other web fonts integration
4---
5 
6# Preset Web Fonts
7 
8Easily use web fonts from Google Fonts and other providers.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetWebFonts, presetWind3 } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetWind3(),
18    presetWebFonts({
19      provider: 'google',
20      fonts: {
21        sans: 'Roboto',
22        mono: 'Fira Code',
23      },
24    }),
25  ],
26})
27```
28 
29## Providers
30 
31- `google` - Google Fonts (default)
32- `bunny` - Privacy-friendly alternative
33- `fontshare` - Quality fonts by ITF
34- `fontsource` - Self-hosted open source fonts
35- `coollabs` - Privacy-friendly drop-in replacement
36- `none` - Treat as system font
37 
38## Font Configuration
39 
40```ts
41fonts: {
42  // Simple
43  sans: 'Roboto',
44  
45  // Multiple (fallback)
46  mono: ['Fira Code', 'Fira Mono:400,700'],
47  
48  // Detailed
49  lato: [
50    {
51      name: 'Lato',
52      weights: ['400', '700'],
53      italic: true,
54    },
55    {
56      name: 'sans-serif',
57      provider: 'none',
58    },
59  ],
60}
61```
62 
63## Usage
64 
65```html
66<p class="font-sans">Roboto</p>
67<code class="font-mono">Fira Code</code>
68```
69 
70## Local Fonts
71 
72Self-host fonts:
73 
74```ts
75import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
76 
77presetWebFonts({
78  provider: 'none',
79  fonts: { sans: 'Roboto' },
80  processors: createLocalFontProcessor({
81    cacheDir: 'node_modules/.cache/unocss/fonts',
82    fontAssetsDir: 'public/assets/fonts',
83    fontServeBaseUrl: '/assets/fonts',
84  })
85})
86```
87 
88<!-- 
89Source references:
90- https://unocss.dev/presets/web-fonts
91-->
92