@unocss/preset-web-fonts

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.

README

@unocss/preset-web-fonts

Web fonts support for UnoCSS.

Documentation

Please refer to the documentation.

License

MIT License © 2022-PRESENT Anthony Fu