feat(web-fonts): add local font support to web font preset

packages/preset-web-fonts/src/index.ts

@@ -5,14 +5,11 @@ export * from './types'
 export { normalizedFontMeta }
 export { createGoogleCompatibleProvider as createGoogleProvider } from './providers/google'
 
-const userAgentWoff2 = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'
-const defaultFetch = async (url: string) => (await import('ofetch')).$fetch(url, { headers: { 'User-Agent': userAgentWoff2 }, retry: 3 })
-
 /**
  * Preset for using web fonts by provide just the names.
  *
  * @see https://unocss.dev/presets/web-fonts
  */
-const presetWebFonts = definePreset(createWebFontPreset(defaultFetch))
+const presetWebFonts = definePreset(createWebFontPreset())
 
 export default presetWebFonts

packages/preset-web-fonts/src/local-font.ts

@@ -0,0 +1,63 @@
+/**
+ * Inspired by:
+ * https://github.com/feat-agency/vite-plugin-webfont-dl/blob/master/src/downloader.ts
+ */
+
+import { mkdir, stat, writeFile } from 'node:fs/promises'
+import { Buffer } from 'node:buffer'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { WebFontsOptions } from './types'
+
+const fontUrlRegex = /[-a-z0-9@:%_+.~#?&/=]+\.(?:woff2?|eot|ttf|otf|svg)/gi
+
+const dir = dirname(fileURLToPath(import.meta.url))
+
+const cachedUrls = new Map<string, string>()
+
+export async function useLocalFont(css: string, fetch: WebFontsOptions['customFetch']) {
+ const allUrls = css.match(fontUrlRegex)?.map(url => url.trim()) || []
+ const newUrls = []
+ for (const url of allUrls) {
+ if (cachedUrls.has(url))
+ css = css.replace(url, cachedUrls.get(url)!)
+ else
+ newUrls.push(url)
+ }
+
+ if (newUrls.length === 0)
+ return css
+
+ async function saveFont(url: string, path: string) {
+ const response = await fetch!(url, { headers: { responseType: 'arraybuffer' } }) as ArrayBuffer
+ const content = new Uint8Array(response)
+ await writeFile(path, Buffer.from(content))
+ return { url, path }
+ }
+
+ // FIXME Currently hardcoded to the playground folder
+ const fontsFolder = resolve(dir, '../../../playground/assets/fonts')
+ await mkdir(fontsFolder, { recursive: true })
+
+ const fontAlreadyDownloaded = async (path: string) => await stat(path).then(r => r.isFile()).catch(() => false)
+
+ const promises = []
+
+ for (const url of newUrls) {
+ const path = resolve(fontsFolder, url.split('/').pop()!)
+ const ignore = await fontAlreadyDownloaded(path)
+ if (ignore)
+ cachedUrls.set(url, path)
+ else
+ promises.push(saveFont(url, path))
+ }
+
+ const localFonts = await Promise.all(promises)
+
+ for (const localFont of localFonts) {
+ css = css.replace(localFont.url, localFont.path)
+ cachedUrls.set(localFont.url, localFont.path)
+ }
+
+ return css
+}

packages/preset-web-fonts/src/preset.ts

@@ -5,7 +5,8 @@ import { BunnyFontsProvider } from './providers/bunny'
 import { GoogleFontsProvider } from './providers/google'
 import { FontshareProvider } from './providers/fontshare'
 import { NoneProvider } from './providers/none'
-import type { Provider, ResolvedWebFontMeta, WebFontMeta, WebFontsOptions, WebFontsProviders } from './types'
+import type { CustomFetchOptions, Provider, ResolvedWebFontMeta, WebFontMeta, WebFontsOptions, WebFontsProviders } from './types'
+import { useLocalFont } from './local-font'
 
 const builtinProviders = {
  google: GoogleFontsProvider,
@@ -37,14 +38,23 @@ export function normalizedFontMeta(meta: WebFontMeta | string, defaultProvider:
  }
 }
 
-export function createWebFontPreset(fetcher: (url: string) => Promise<any>) {
+const userAgentWoff2 = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'
+const defaultHeaders: HeadersInit = { 'User-Agent': userAgentWoff2 }
+
+async function defaultFetch(url: string, { headers = defaultHeaders }: CustomFetchOptions = {}) {
+ const { $fetch } = (await import('ofetch'))
+ return await $fetch(url, { headers, retry: 3 })
+}
+
+export function createWebFontPreset() {
  return (options: WebFontsOptions = {}): Preset<any> => {
  const {
  provider: defaultProvider = 'google',
  extendTheme = true,
  inlineImports = true,
  themeKey = 'fontFamily',
- customFetch = fetcher,
+ customFetch = defaultFetch,
+ downloadLocally = false,
  } = options
 
  const fontObject = Object.fromEntries(
@@ -87,8 +97,12 @@ export function createWebFontPreset(fetcher: (url: string) => Promise<any>) {
 
  if (provider.getImportUrl) {
  const url = provider.getImportUrl(fontsForProvider)
- if (url)
- preflights.push(await importUrl(url))
+ if (url) {
+ let css = await importUrl(url)
+ if (downloadLocally)
+ css = await useLocalFont(css, customFetch)
+ preflights.push(css)
+ }
  }
 
  preflights.push(provider.getPreflight?.(fontsForProvider))

packages/preset-web-fonts/src/types.ts

@@ -15,6 +15,10 @@ export interface ResolvedWebFontMeta extends Omit<WebFontMeta, 'provider'> {
  provider: Provider
 }
 
+export interface CustomFetchOptions {
+ headers?: HeadersInit
+}
+
 export interface WebFontsOptions {
  /**
  * Provider service of the web fonts
@@ -52,7 +56,13 @@ export interface WebFontsOptions {
  *
  * @default undefined
  */
- customFetch?: (url: string) => Promise<any>
+ customFetch?: (url: string, options?: CustomFetchOptions) => Promise<any>
+
+ /**
+ * Whether to download the font locally or not
+ * @default false
+ */
+ downloadLocally?: boolean
 }
 
 export interface Provider {

playground/uno.config.ts

@@ -7,6 +7,7 @@ import {
  transformerDirectives,
  transformerVariantGroup,
 } from 'unocss'
+import presetWebFonts from '../packages/preset-web-fonts/src/'
 
 export default defineConfig({
  theme: {
@@ -22,6 +23,14 @@ export default defineConfig({
  presetAttributify(),
  presetUno(),
  presetIcons(),
+ presetWebFonts({
+ downloadLocally: true,
+ provider: 'google',
+ fonts: {
+ sans: 'Roboto',
+ mono: ['Fira Code', 'Fira Mono:400,700'],
+ },
+ }),
  ],
  transformers: [
  transformerCompileClass(),