Skip to main content

​
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.

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

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>
All Fonttrio URLs include display=swap by default, which shows fallback text immediately while fonts load.
Consider adding subset parameters if you only need specific character sets (latin, latin-ext, cyrillic, etc.).

​
Source Reference

Implementation: lib/pairings.ts:53-61

Build docs developers (and LLMs) love

Get started for freeTalk to us