Preset de Fuentes Web

Usa fuentes web de Google Fonts, FontShare simplemente proporcionando los nombres de las fuentes.

Consulta todos los proveedores soportados.

Código Fuente

Instalación

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({ /* opciones */ }),
  ],
})

TIP

Este preset está incluido en el paquete unocss, también puedes importarlo desde ahí:

import { presetWebFonts } from 'unocss'

Proveedores

Proveedores actualmente soportados:

• none - no hacer nada, tratar la fuente como fuente del sistema
• google - Google Fonts
• bunny - Google Fonts Amigable con la Privacidad
• fontshare - Servicio de Fuentes de Calidad por ITF

INFO

PR bienvenido para añadir más proveedores. 🙌

Función de fetch personalizada

Usa tu propia función para obtener la fuente de la fuente.

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({
      // usar axios con 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'],
      },
    }),
  ],
})

Opciones

provider

• Tipo: WebFontsProviders
• Predeterminado: google

Servicio proveedor de las fuentes web.

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

fonts

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

Las fuentes. Consulta ejemplo para más detalles.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Sobrescribir el proveedor
   * @default <coincide con la configuración raíz>
   */
  provider?: WebFontsProviders
}

extendTheme

• Tipo: boolean
• Predeterminado: true

Extender el objeto del tema.

themeKey

• Tipo: string
• Predeterminado: fontFamily

Clave para el objeto del tema.

inlineImports

• Tipo: boolean
• Predeterminado: true

Insertar CSS @import().

customFetch

• Tipo: (url: string) => Promise<string>
• Predeterminado: undefined

Usa tu propia función para obtener la fuente de la fuente. Consulta Función de fetch personalizada.

Ejemplo

presetWebFonts({
  provider: 'google', // proveedor predeterminado
  fonts: {
    // estos extenderán el tema predeterminado
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // personalizados
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

El siguiente CSS será generado automáticamente:

@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 Fuentes Localmente

Por defecto el preset obtendrá las fuentes del CDN del proveedor. Si quieres servir las fuentes localmente, puedes descargar las fuentes y servirlas desde tu propio servidor usando el procesador 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',
      },
      // Esto descargará las fuentes y las servirá localmente
      processors: createLocalFontProcessor({
        // Directorio para cachear las fuentes
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // Directorio para guardar los assets de las fuentes
        fontAssetsDir: 'public/assets/fonts',

        // URL base para servir las fuentes desde el cliente
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

Esto descargará los assets de las fuentes a public/assets/fonts y las servirá desde /assets/fonts en el cliente. Al hacer esto, por favor asegúrate de que la licencia de las fuentes te permita redistribuirlas, la herramienta no es responsable de ningún problema legal.

INFO

Esta función es específica de Node.js y no funcionará en el navegador.