getAllGoogleFontsUrls

Get all Google Fonts URLs used across font pairings

getAllGoogleFontsUrls

Returns an array of all unique Google Fonts URLs used across all font pairings in the registry.

Function Signature

lib/pairings.ts

export function getAllGoogleFontsUrls(): string[]

Returns

urls · string[]

Array of all unique Google Fonts URLs across all pairings

Description

The getAllGoogleFontsUrls() function extracts and returns all unique Google Fonts URLs from every pairing in the registry. Each URL contains the font families and weights needed for a pairing. This is useful for preloading fonts, analyzing font usage, or building font loading strategies.

Usage Examples

Basic Usage

import { getAllGoogleFontsUrls } from '@/lib/pairings'

const urls = getAllGoogleFontsUrls()
console.log(urls)
// Output: [
//   'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700...',
//   'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700...',
//   ...
// ]

Preload All Fonts

import { getAllGoogleFontsUrls } from '@/lib/pairings'

export function FontPreloader() {
  const urls = getAllGoogleFontsUrls()
  
  return (
    <>
      {urls.map(url => (
        <link
          key={url}
          rel="preconnect"
          href={url}
          crossOrigin="anonymous"
        />
      ))}
    </>
  )
}

Generate Font Loading Stylesheet

import { getAllGoogleFontsUrls } from '@/lib/pairings'

export function generateFontStylesheet(): string {
  const urls = getAllGoogleFontsUrls()
  
  return urls
    .map(url => `@import url('${url}');`)
    .join('\n')
}

// Usage
const stylesheet = generateFontStylesheet()
console.log(stylesheet)
// Output:
// @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500...');
// @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600...');

Check Font Loading Performance

import { getAllGoogleFontsUrls } from '@/lib/pairings'

async function analyzeFontLoadTimes() {
  const urls = getAllGoogleFontsUrls()
  const results = []
  
  for (const url of urls) {
    const start = performance.now()
    await fetch(url)
    const duration = performance.now() - start
    
    results.push({ url, duration })
  }
  
  return results.sort((a, b) => b.duration - a.duration)
}

Generate Next.js Font Configuration

import { getAllGoogleFontsUrls } from '@/lib/pairings'

function extractFontFamilies(urls: string[]) {
  return urls.map(url => {
    const match = url.match(/family=([^:&]+)/)
    return match ? match[1].replace(/\+/g, ' ') : null
  }).filter(Boolean)
}

const urls = getAllGoogleFontsUrls()
const families = extractFontFamilies(urls)

console.log(families)
// Output: ['Inter', 'Playfair Display', 'Source Serif 4', ...]

Build Font Subset Optimizer

import { getAllGoogleFontsUrls } from '@/lib/pairings'

function optimizeFontUrls(urls: string[], subsets: string[] = ['latin']) {
  return urls.map(url => {
    const hasSubset = url.includes('subset=')
    if (hasSubset) return url
    
    const separator = url.includes('?') ? '&' : '?'
    return `${url}${separator}display=swap&subset=${subsets.join(',')}`
  })
}

const urls = getAllGoogleFontsUrls()
const optimized = optimizeFontUrls(urls, ['latin', 'latin-ext'])

URL Format

Each Google Fonts URL follows this format:

https://fonts.googleapis.com/css2?family=Font+Name:wght@weights&display=swap

Example:

https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap

URLs typically include multiple font families (heading, body, mono) with their respective weights combined in a single request for optimal loading performance.

Related Functions

getPairingGoogleFontsUrl

Get Google Fonts URL for a specific pairing

getAllPairings

Get all available pairings

Notes

• URLs are extracted from the googleFontsUrl field of each pairing
• The function deduplicates URLs automatically using a Set
• Returns an array of strings in no particular order
• Pairings without a googleFontsUrl are skipped (though all current pairings include this field)
• Each URL is already optimized with display=swap for better performance
• Performance: O(n) where n is the number of pairings

Best Practices

Preconnect to Google Fonts

Add preconnect hints in your HTML head to speed up font loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Use font-display: swap

All Fonttrio URLs include display=swap by default, which shows fallback text immediately while fonts load.

Subset Fonts for Language Support

Consider adding subset parameters if you only need specific character sets (latin, latin-ext, cyrillic, etc.).

Source Reference

Implementation: lib/pairings.ts:53-61