What is @unocss/preset-web-fonts?
@unocss/preset-web-fonts is a preset for UnoCSS that allows you to easily integrate web fonts into your project. It simplifies the process of adding and managing web fonts by providing a set of utilities and configurations.
What are @unocss/preset-web-fonts's main functionalities?
Basic Font Integration
This feature allows you to easily integrate basic web fonts into your project. You can specify different font families for sans, serif, and mono text.
import { defineConfig } from 'unocss';
import { presetWebFonts } from '@unocss/preset-web-fonts';
export default defineConfig({
presets: [
presetWebFonts({
fonts: {
sans: 'Roboto',
serif: 'Merriweather',
mono: 'Source Code Pro',
},
}),
],
});
Custom Font Weights and Styles
This feature allows you to specify custom font weights and styles, including italic variants, for your web fonts.
import { defineConfig } from 'unocss';
import { presetWebFonts } from '@unocss/preset-web-fonts';
export default defineConfig({
presets: [
presetWebFonts({
fonts: {
sans: [
{
name: 'Roboto',
weights: ['400', '700'],
italic: true,
},
],
},
}),
],
});
Google Fonts Integration
This feature allows you to easily integrate Google Fonts into your project by specifying the provider as 'google'.
import { defineConfig } from 'unocss';
import { presetWebFonts } from '@unocss/preset-web-fonts';
export default defineConfig({
presets: [
presetWebFonts({
provider: 'google',
fonts: {
sans: 'Roboto',
serif: 'Merriweather',
mono: 'Source Code Pro',
},
}),
],
});
Other packages similar to @unocss/preset-web-fonts
typeface
The 'typeface' package allows you to self-host fonts by providing a collection of npm packages for popular fonts. Unlike @unocss/preset-web-fonts, which focuses on configuration and integration, 'typeface' provides the actual font files for self-hosting.
webfontloader
The 'webfontloader' package, developed by Google and Typekit, provides a more advanced and flexible way to load web fonts. It offers more control over font loading behavior compared to @unocss/preset-web-fonts, which focuses on ease of use and configuration.
@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',
fonts: {
sans: 'Roboto',
mono: ['Fira Code', 'Fira Mono:400,700'],
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');
.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 Fonts
PR welcome to add more providers 🙌
Configuration
Refer to the type definition for all configurations avaliable.
License
MIT License © 2022-PRESENT Anthony Fu