Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@unocss/preset-web-fonts
Advanced tools
@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.
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',
},
}),
],
});
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.
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.
Web fonts support for UnoCSS.
Please refer to the documentation.
MIT License © 2022-PRESENT Anthony Fu
FAQs
Web Fonts support for Uno CSS
The npm package @unocss/preset-web-fonts receives a total of 173,056 weekly downloads. As such, @unocss/preset-web-fonts popularity was classified as popular.
We found that @unocss/preset-web-fonts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.