How to load custom *remote* font with Next.js and Vercel?

[lancejpollard]

Summary

I am looking at https://nextjs.org/docs/app/api-reference/components/font and https://nextjs.org/docs/pages/building-your-application/optimizing/fonts but they only show:

import localFont from 'next/font/local'
 
const myFont = localFont({ src: './my-font.woff2' })

What if my font is hosted in an s3 bucket? Or some other remote URL? How can I load it then? I have 10,000 fonts, I think it is too many to load "locally" in a Vercel app, I would prefer to have this many fonts loaded in a dedicated CDN. Something like this would be great:

import localFont from 'next/font/local'
 
const myFont = localFont({ src: 'https://cdn.mysite.com/fonts/MyCustomFont-Regular.ttf' })

Or even:

import remoteFont from 'next/font/remote'
 
const myFont = remoteFont({ src: 'https://cdn.mysite.com/fonts/MyCustomFont-Regular.ttf' })

Thanks for your help!

Additional information

No response

Example

No response

[glomotion]

I'd also love to learn about this!

[somerandomguythatneedshelp]

you probably might not want to use lazy loading as loading that many fonts is gonna use up all of your memory, as for a cdn there isnt really any good options other than making a free website and using that as a place to hold your fonts

[bhavesh-chaudhari]

Any update on this? Came across a similar situation.

[looterz]

Is there really no native way to use fonts you have hosted on your own CDN like Cloudflare R2? Just google and local fonts only?

[dnywh]

+1. Would love to remote fonts supported in next/font.

Here’s how I’ve done it in the interim, for any lurkers reading:

I’m already using Pigment CSS (like styled-components). Pigment CSS supports and recommends setting a single global CSS instance in the root app/layout.tsx file. I just added the following to the top of that global CSS:

import { globalCss } from "@pigment-css/react";

globalCss`
  @font-face {
    font-family: 'National';
    src: url('https://mystoragelocation.example/national-2-regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  // Repeat above for the other font-weights

  // Apply that font family to all elements
  * {
    font-family: 'National', system-ui, -apple-system, sans-serif;
  }

It’s not the cleanest solution, and misses out on some next/font niceties (e.g. subsetting), but it works.

I subset (subsetted?) the font manually with fonttools and used that as my remote font source:

# Install fonttools and brotli
pip install fonttools
pip install brotli

# Loop through all National font files
for font in national-2-*.woff2; do
    # Extract the name without extension
    basename="${font%.woff2}"
    
    echo "Subsetting $font..."
    
    pyftsubset "$font" \
        --output-file="${basename}-subset.woff2" \
        --flavor=woff2 \
        --layout-features='*' \
        --unicodes="U+0000-00FF" \
        --desubroutinize
done

echo "Done! Created subset versions of all fonts"