Support font optimization in Google Fonts and Google Icons

src/providers/google.ts

@@ -38,6 +38,7 @@ export default defineFontProvider<ProviderOption>('google', async (_options = {}
   async function getFontDetails(family: string, options: ResolveFontOptions) {
     const font = googleFonts.find(font => font.family === family)!
     const styles = [...new Set(options.styles.map(i => styleMap[i]))].sort()
+    const glyphs = options.glyphs?.join('')
 
     const variableWeight = font.axes.find(a => a.tag === 'wght')
     const weights = variableWeight
@@ -73,6 +74,7 @@ export default defineFontProvider<ProviderOption>('google', async (_options = {}
         headers: { 'user-agent': userAgents[extension as keyof typeof userAgents] },
         query: {
           family: `${family}:${resolvedAxes.join(',')}@${resolvedVariants.join(';')}`,
+          ...(glyphs && { text: glyphs }),
         },
       })
     }

src/providers/googleicons.ts

@@ -1,5 +1,6 @@
-import { hash } from 'ohash'
+import type { ResolveFontOptions } from '../types'
 
+import { hash } from 'ohash'
 import { extractFontFaceData } from '../css/parse'
 import { $fetch } from '../fetch'
 import { defineFontProvider } from '../utils'
@@ -21,7 +22,10 @@ export default defineFontProvider('googleicons', async (_options, ctx) => {
   // svg: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3',
   }
 
-  async function getFontDetails(family: string) {
+  async function getFontDetails(family: string, options: ResolveFontOptions) {
+    // Google Icons require sorted icon names, or we will see a 400 error
+    const iconNames = options.glyphs?.sort().join(',')
+
     let css = ''
 
     if (family.includes('Icons')) {
@@ -51,6 +55,7 @@ export default defineFontProvider('googleicons', async (_options, ctx) => {
           headers: { 'user-agent': userAgents[extension as keyof typeof userAgents] },
           query: {
             family: `${family}:` + `opsz,wght,FILL,[email protected],100..700,0..1,-50..200`,
+            ...(iconNames && { icon_names: iconNames }),
           },
         })
       }
@@ -60,12 +65,12 @@ export default defineFontProvider('googleicons', async (_options, ctx) => {
   }
 
   return {
-    async resolveFont(fontFamily, defaults) {
+    async resolveFont(fontFamily, options) {
       if (!googleIcons.includes(fontFamily)) {
         return
       }
 
-      const fonts = await ctx.storage.getItem(`googleicons:${fontFamily}-${hash(defaults)}-data.json`, () => getFontDetails(fontFamily))
+      const fonts = await ctx.storage.getItem(`googleicons:${fontFamily}-${hash(options)}-data.json`, () => getFontDetails(fontFamily, options))
       return { fonts }
     },
   }

src/types.ts

@@ -18,6 +18,13 @@ export interface ResolveFontOptions {
   // TODO: improve support and support unicode range
   subsets: string[]
   fallbacks?: string[]
+  /**
+   * Specifies the specific characters / icons to download.
+   * This can reduce the size of the font file.
+   *
+   * Currently only supported by Google Fonts / Google Icons (Only available specifying the new 'Material Symbols' icons).
+   */
+  glyphs?: string[]
 }
 
 export interface RemoteFontSource {

test/providers/google.test.ts

@@ -65,4 +65,35 @@ describe('google', () => {
     expect(resolvedStyles).toMatchObject(styles)
     expect(resolvedWeights).toMatchObject(weights)
   })
+
+  it('respects glyphs option and resolves optimized font', async () => {
+    const unifont = await createUnifont([providers.google()])
+
+    const { fonts } = await unifont.resolveFont('Poppins', {
+      glyphs: ['Hello', 'World'],
+      styles: ['normal'],
+      weights: ['400'],
+      subsets: [],
+    })
+
+    // Do not use sanitizeFontSource here, as we must test the url parameters
+    expect(fonts).toMatchInlineSnapshot(`
+      [
+        {
+          "src": [
+            {
+              "format": "woff2",
+              "url": "https://fonts.gstatic.com/l/font?kit=pxiEyp8kv8JHgFVrFJXUdVNFIvDDHy0hxgHa&skey=87759fb096548f6d&v=v22",
+            },
+            {
+              "format": "woff",
+              "url": "https://fonts.gstatic.com/l/font?kit=pxiEyp8kv8JHgFVrFJPMcBMSdJLnJzs&skey=87759fb096548f6d&v=v22",
+            },
+          ],
+          "style": "normal",
+          "weight": 400,
+        },
+      ]
+    `)
+  })
 })