You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
85 lines
2.1 KiB
2 years ago
|
# @unocss/preset-web-fonts
|
||
|
|
|
||
|
|
Web fonts support for [UnoCSS](https://github.com/unocss/unocss).
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm i -D @unocss/preset-web-fonts
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import presetWebFonts from '@unocss/preset-web-fonts'
|
||
|
|
import presetUno from '@unocss/preset-uno'
|
||
|
|
|
||
|
|
Unocss({
|
||
|
|
presets: [
|
||
|
|
presetUno(),
|
||
|
|
presetWebFonts({
|
||
|
|
provider: 'google', // default provider
|
||
|
|
fonts: {
|
||
|
|
// these will extend the default theme
|
||
|
|
sans: 'Roboto',
|
||
|
|
mono: ['Fira Code', 'Fira Mono:400,700'],
|
||
|
|
// custom ones
|
||
|
|
lobster: 'Lobster',
|
||
|
|
lato: [
|
||
|
|
{
|
||
|
|
name: 'Lato',
|
||
|
|
weights: ['400', '700'],
|
||
|
|
italic: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'sans-serif',
|
||
|
|
provider: 'none',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
The following CSS will be generated
|
||
|
|
|
||
|
|
```css
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||
|
|
|
||
|
|
/* layer: default */
|
||
|
|
.font-lato {
|
||
|
|
font-family: "Lato", sans-serif;
|
||
|
|
}
|
||
|
|
.font-lobster {
|
||
|
|
font-family: "Lobster";
|
||
|
|
}
|
||
|
|
.font-mono {
|
||
|
|
font-family: "Fira Code", "Fira Mono", ui-monospace, SFMono-Regular, Menlo,
|
||
|
|
Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
|
|
}
|
||
|
|
.font-sans {
|
||
|
|
font-family: "Roboto", ui-sans-serif, system-ui, -apple-system,
|
||
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
||
|
|
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||
|
|
"Noto Color Emoji";
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Providers
|
||
|
|
|
||
|
|
Currently supported Providers:
|
||
|
|
|
||
|
|
- `none` - do nothing, treat the font as system font
|
||
|
|
- `google` - [Google Fonts](https://fonts.google.com/)
|
||
|
|
- `bunny` - [Privacy-Friendly Google Fonts](https://fonts.bunny.net/)
|
||
|
|
- `fontshare` - [Quality Font Service by ITF](https://www.fontshare.com/)
|
||
|
|
|
||
|
|
PR welcome to add more providers 🙌
|
||
|
|
|
||
|
|
## Configuration
|
||
|
|
|
||
|
|
Refer to the [type definition](https://github.com/unocss/unocss/blob/main/packages/preset-web-fonts/src/types.ts#L4) for all configurations available.
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
MIT License © 2022-PRESENT [Anthony Fu](https://github.com/antfu)
|