@unocss/preset-web-fonts

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',
      },
    }),
  ],
});