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.
|
2 years ago | |
---|---|---|
.. | ||
LICENSE | 2 years ago | |
README.md | 2 years ago | |
package.json | 2 years ago |
README.md
@unocss/preset-web-fonts
Web fonts support for UnoCSS.
Install
npm i -D @unocss/preset-web-fonts
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
@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 fontgoogle
- Google Fontsbunny
- Privacy-Friendly Google Fontsfontshare
- Quality Font Service by ITF
PR welcome to add more providers 🙌
Configuration
Refer to the type definition for all configurations available.
License
MIT License © 2022-PRESENT Anthony Fu