> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```typescript lib/pairings.ts theme={null}
export function getAllGoogleFontsUrls(): string[]
```

## Returns

<ResponseField name="urls" type="string[]">
  Array of all unique Google Fonts URLs across all pairings
</ResponseField>

## 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

```typescript theme={null}
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

```tsx theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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
```

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

## Related Functions

<CardGroup cols={2}>
  <Card title="getPairingGoogleFontsUrl" icon="link" href="/api/functions/get-pairing-google-fonts-url">
    Get Google Fonts URL for a specific pairing
  </Card>

  <Card title="getAllPairings" icon="layer-group" href="/api/functions/get-all-pairings">
    Get all available pairings
  </Card>
</CardGroup>

## 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

<AccordionGroup>
  <Accordion title="Preconnect to Google Fonts">
    Add preconnect hints in your HTML head to speed up font loading:

    ```html theme={null}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    ```
  </Accordion>

  <Accordion title="Use font-display: swap">
    All Fonttrio URLs include `display=swap` by default, which shows fallback text immediately while fonts load.
  </Accordion>

  <Accordion title="Subset Fonts for Language Support">
    Consider adding subset parameters if you only need specific character sets (latin, latin-ext, cyrillic, etc.).
  </Accordion>
</AccordionGroup>

## Source Reference

Implementation: `lib/pairings.ts:53-61`