Preset Web Fonts

Utilisez les polices web de Google Fonts, FontShare en fournissant simplement les noms de polices.

Voir tous les fournisseurs supportés.

Code Source

Installation

pnpm

pnpm add -D @unocss/preset-web-fonts

yarn

yarn add -D @unocss/preset-web-fonts

npm

npm install -D @unocss/preset-web-fonts

bun

bun add -D @unocss/preset-web-fonts

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({ /* options */ }),
  ],
})

TIP

Ce preset est inclus dans le package unocss, vous pouvez aussi l'importer depuis là :

import { presetWebFonts } from 'unocss'

Fournisseurs

Fournisseurs actuellement supportés :

• none - ne rien faire, traiter la police comme une police système
• google - Google Fonts
• bunny - Google Fonts respectueux de la vie privée
• fontshare - Service de polices de qualité par ITF

INFO

PR bienvenue pour ajouter plus de fournisseurs. 🙌

Fonction fetch personnalisée

Utilisez votre propre fonction pour récupérer la source de la police.

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({
      // utiliser axios avec un proxy https
      customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data),
      provider: 'google',
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
})

Options

provider

• Type: WebFontsProviders
• Défaut: google

Service fournisseur des polices web.

type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none'

fonts

• Type: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

Les polices. Voir exemple pour plus de détails.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Remplacer le fournisseur
   * @default <correspond à la config racine>
   */
  provider?: WebFontsProviders
}

extendTheme

• Type: boolean
• Défaut: true

Étendre l'objet thème.

themeKey

• Type: string
• Défaut: fontFamily

Clé pour l'objet thème.

inlineImports

• Type: boolean
• Défaut: true

Intégrer les CSS @import().

customFetch

• Type: (url: string) => Promise<string>
• Défaut: undefined

Utilisez votre propre fonction pour récupérer la source de la police. Voir Fonction fetch personnalisée.

Exemple

presetWebFonts({
  provider: 'google', // fournisseur par défaut
  fonts: {
    // ceux-ci étendront le thème par défaut
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // personnalisés
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

Le CSS suivant sera généré automatiquement :

@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";
}

Servir les polices localement

Par défaut, le preset récupérera les polices depuis le CDN du fournisseur. Si vous voulez servir les polices localement, vous pouvez télécharger les polices et les servir depuis votre propre serveur en utilisant le processeur de @unocss/preset-web-fonts/local.

import presetWebFonts from '@unocss/preset-web-fonts'
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWebFonts({
      provider: 'none',
      fonts: {
        sans: 'Roboto',
        mono: 'Fira Code',
      },
      // Ceci téléchargera les polices et les servira localement
      processors: createLocalFontProcessor({
        // Répertoire pour mettre en cache les polices
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // Répertoire pour sauvegarder les assets de polices
        fontAssetsDir: 'public/assets/fonts',

        // URL de base pour servir les polices depuis le client
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

Ceci téléchargera les assets de polices vers public/assets/fonts et les servira depuis /assets/fonts sur le client. En faisant cela, assurez-vous que la licence des polices vous permet de les redistribuer, l'outil n'est pas responsable de tout problème légal.

INFO

Cette fonctionnalité est spécifique à Node.js et ne fonctionnera pas dans le navigateur.