feat: support system proxy when fetching fonts/metadata

package.json

@@ -52,7 +52,7 @@
     "jiti": "^1.21.0",
     "magic-regexp": "^0.8.0",
     "magic-string": "^0.30.8",
-    "ofetch": "^1.3.3",
+    "node-fetch-native": "^1.6.2",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "sirv": "^2.0.4",
@@ -74,6 +74,7 @@
     "consola": "^3.2.3",
     "eslint": "^8.57.0",
     "execa": "^8.0.1",
+    "ofetch": "^1.3.3",
     "nitropack": "^2.9.4",
     "nuxt": "^3.11.1",
     "nuxt-fonts-devtools": "latest",
@@ -89,4 +90,4 @@
   "resolutions": {
     "@nuxt/fonts": "workspace:*"
   }
-}
+}

src/assets.ts

@@ -1,7 +1,7 @@
 import fsp from 'node:fs/promises'
 import { addDevServerHandler, useNuxt } from '@nuxt/kit'
 import { eventHandler, createError, lazyEventHandler } from 'h3'
-import { fetch } from 'ofetch'
+import { fetch } from 'node-fetch-native/proxy'
 import chalk from 'chalk'
 import { defu } from 'defu'
 import type { NitroConfig } from 'nitropack'

src/fetch.ts

@@ -0,0 +1,26 @@
+import defu from 'defu'
+import { fetch } from 'node-fetch-native/proxy'
+import { joinURL, withQuery } from 'ufo'
+
+interface Mini$FetchOptions extends RequestInit {
+  baseURL?: string
+  responseType?: 'json' | 'arrayBuffer'
+  query?: Record<string, any>
+}
+
+const mini$fetch = <T = unknown> (url: string, options?: Mini$FetchOptions) => {
+  if (options?.baseURL) {
+    url = joinURL(options.baseURL, url)
+  }
+  if (options?.query) {
+    url = withQuery(url, options.query)
+  }
+  return fetch(url, options)
+    .then(r => options?.responseType === 'json' ? r.json() : options?.responseType === 'arrayBuffer' ? r.arrayBuffer() : r.text()) as Promise<T>
+}
+
+export const $fetch = Object.assign(mini$fetch, {
+  create: (defaults?: Mini$FetchOptions) => <T = unknown> (url: string, options?: Mini$FetchOptions) => mini$fetch<T>(url, defu(options, defaults))
+})
+
+export { fetch }

src/providers/adobe.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 interface ProviderOption {
@@ -106,7 +106,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
       styles.push(style)
     }
     if (styles.length === 0) { continue }
-    const css = await fontCSSAPI(`${fonts.kits[kit]!.id}.css`)
+    const css = await fontCSSAPI<string>(`${fonts.kits[kit]!.id}.css`)
 
     // Adobe uses slugs instead of names in its CSS to define its font faces,
     // so we need to first transform names into slugs.

src/providers/bunny.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {
@@ -75,7 +75,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
 
   const resolvedVariants = weights.flatMap(w => [...styles].map(s => `${w}${s}`))
 
-  const css = await fontAPI('/css', {
+  const css = await fontAPI<string>('/css', {
     query: {
       family: id + ':' + resolvedVariants.join(',')
     }

src/providers/fontshare.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {
@@ -69,6 +69,7 @@ async function initialiseFontMeta () {
     let chunk
     do {
       chunk = await fontAPI<{ fonts: FontshareFontMeta[], has_more: boolean }>('/fonts', {
+        responseType: 'json',
         query: {
           offset,
           limit: 100
@@ -105,7 +106,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
 
   if (numbers.length === 0) return []
 
-  const css = await fontAPI(`/css?f[]=${font.slug + '@' + numbers.join(',')}`)
+  const css = await fontAPI<string>(`/css?f[]=${font.slug + '@' + numbers.join(',')}`)
 
   // TODO: support subsets and axes
   return addLocalFallbacks(family, extractFontFaceData(css))

src/providers/fontsource.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, NormalizedFontFaceData, ResolveFontFacesOptions } from '../types'
 import { addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {

src/providers/google.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {
@@ -46,7 +46,7 @@ interface FontIndexMeta {
 let fonts: FontIndexMeta[]
 
 async function fetchFontMetadata () {
-  return await $fetch<{ familyMetadataList: FontIndexMeta[] }>('https://fonts.google.com/metadata/fonts')
+  return await $fetch<{ familyMetadataList: FontIndexMeta[] }>('https://fonts.google.com/metadata/fonts', { responseType: 'json' })
     .then(r => r.familyMetadataList)
 }
 
@@ -84,7 +84,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
   let css = ''
 
   for (const extension in userAgents) {
-    css += await $fetch('/css2', {
+    css += await $fetch<string>('/css2', {
       baseURL: 'https://fonts.googleapis.com',
       headers: { 'user-agent': userAgents[extension as keyof typeof userAgents] },
       query: {