Web Fonts preset

Använd webtypsnitt från Google Fonts, FontShare genom att helt enkelt ange typsnittsnamnen.

Se alla supportade leverantörer.

Källkod

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

TIP

Denna preset ingår i unocss-paketet, du kan också importera den därifrån:

import { presetWebFonts } from 'unocss'

Leverantörer

För närvarande supportade leverantörer:

• none - gör ingenting, behandla typsnittet som systemtypsnitt
• google - Google Fonts
• bunny - Privacy-Friendly Google Fonts
• fontshare - Quality Font Service by ITF

INFO

PR välkomnas för att lägga till fler leverantörer. 🙌

Anpassad hämtningsfunktion

Använd din egen funktion för att hämta typsnittskälla.

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({
      // använd axios med en https-proxy
      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'],
      },
    }),
  ],
})

Alternativ

provider

• Typ: WebFontsProviders
• Standard: google

Leverantörstjänst för webtypsnitt.

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

fonts

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

Typsnitten. Se exempel för mer information.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Åsidosätt leverantören
   * @default <matchar rotkonfiguration>
   */
  provider?: WebFontsProviders
}

extendTheme

• Typ: boolean
• Standard: true

Utöka temaobjektet.

themeKey

• Typ: string
• Standard: fontFamily

Nyckel för temaobjektet.

inlineImports

• Typ: boolean
• Standard: true

Inline CSS @import().

customFetch

• Typ: (url: string) => Promise<string>
• Standard: undefined

Använd din egen funktion för att hämta typsnittskälla. Se Anpassad hämtningsfunktion.

Exempel

presetWebFonts({
  provider: 'google', // standardleverantör
  fonts: {
    // dessa kommer att utöka standardtemat
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // anpassade
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

Följande CSS kommer att genereras automatiskt:

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

Servera typsnitt lokalt

Som standard kommer preset att hämta typsnitten från leverantörens CDN. Om du vill servera typsnitten lokalt kan du ladda ner typsnitten och servera dem från din egen server med hjälp av processorn från @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',
      },
      // Detta kommer att ladda ner typsnitten och servera dem lokalt
      processors: createLocalFontProcessor({
        // Katalog för att cachelagra typsnitten
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // Katalog för att spara typsnittsresurser
        fontAssetsDir: 'public/assets/fonts',

        // Bas-URL för att servera typsnitten från klienten
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

Detta kommer att ladda ner typsnittsresurser till public/assets/fonts och servera dem från /assets/fonts på klienten. När du gör detta, se till att licensen för typsnitten tillåter dig att distribuera dem, verktyget är inte ansvarigt för eventuella juridiska problem.

INFO

Denna funktion är specifik för Node.js och kommer inte att fungera i webbläsaren.