Best way to handle dynamic font loading #40345

nicosh · 2022-09-08T11:47:52Z

nicosh
Sep 8, 2022

Hi,
We have a multi tenancy app (using platforms starter kit) that will render different websites, each of them can use different fonts.
Lets say we have a total o 50 different fonts avaible (from google fonts), each website may use only one font just as it could use all of them, which is the best solution to ensure the best performance ?

Load all the fonts, even if only one is used
Add the font url to each page using <Head> (ignoring No Stylesheets In Head Component) and detect which font load using getStaticProps
Other ideas?

I've not mentionated to use custom _document, since it does not support getStaticProps while the app eavily depends on on demand revalidation.

Thanks

codasana · 2022-11-17T03:40:19Z

codasana
Nov 17, 2022

Did you figure out a solution for dynamic font loading? Anything with Nextjs's new @next/font library? https://nextjs.org/docs/basic-features/font-optimization

1 reply

nicosh Nov 17, 2022
Author

Not really, currently i'm using styled.jsx but it causes FOUT.
However this is my current solution :

  let fontString = fonts.reduce((acc, el) => {
    let s = `@import url('https://fonts.googleapis.com/css2?family=${el}&display=swap');\n`;
    acc += s;
    return acc;
  }, '');

and then in my main component :

<div>
      <style jsx global>{`
        ${fontString }
      `}</style>
      ... other  page content
</div>

alexanderbnelson · 2023-05-17T01:40:32Z

alexanderbnelson
May 17, 2023

Either of you figure this one out? I managed to get a little something going. It's not perfect. I have the same use case as @nicosh - Platforms Starter Kit, user themes, custom fonts for each theme. I'm on /app dir though. Basically involves dynamically importing the module with the next/font definitions into page.tsx, then I made a client component to load the fonts on the client. The result is I get just the fonts I need, but the downside is there's a little FOUT on first load.

7 replies

alexanderbnelson Aug 22, 2023

I ended up switching to a different method entirely and I'm really impressed with the results. What's great about it is I'm able to determine what font a user needs on the server first, as opposed to only finding out what font they need once we're on the client. I was able to get rid of the FOUT this way.

The trick is importing the RootLayout into whatever dynamic route has your theme variable definition, wrapping that component in the root layout, then adding your theme variable as a prop to theme RootLayout component. It's counter intuitive that you can import a parent component into one of its own children, but it works. This way your RootLayout has access to your theme as props and so you can serve up the right font at the root. I put them in as data attributes so I could use the same Tailwind theming pattern you'll see used by shadcn/ui for things like dark theme.

// layout.tsx (Root Layout)

import './globals.css';

export default function RootLayout({ children, colorTheme, fontTheme }: { children: React.ReactNode, colorTheme: string, fontTheme: string }) {
  return (
    <html lang="en" data-theme={colorTheme} data-font={fontTheme}>
      <body>{children}</body>
    </html>
  );
}

// page.tsx (route where you have access to your theme definition)

import RootLayout from '../layout';
import myThemeFetcher from '../my-theme-fetcher'

type Props = {
  params: { slug: string };
};

export default async function Page({ params }: Props) {
  const { slug } = params;
  const theme = await myThemeFetcher(slug)

  return (
    <RootLayout colorTheme={theme.colorTheme} fontTheme={theme.fontTheme}>
        <main className="font-display bg-primary">
          <h1 className="text-4xl">{theme.name}</h1>
          <p className="font-text">Colour: {theme.colorTheme}</p>
          <p className="font-text">Font: {theme.fontTheme}</p>
        </main>
    </RootLayout>
  );
}

// tailwind.config.ts

theme: {
    extend: {
      fontFamily: {
        "text": ["var(--font-text)", ...defaultTheme.fontFamily.sans],
        "display": ["var(--font-display)", ...defaultTheme.fontFamily.sans],
      },
    colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        light: {
          DEFAULT: "hsl(var(--light))",
          foreground: "hsl(var(--light-foreground))",
        },
      },
    },
  },

// globals.css

 /* FONTS VARIABLES */
  html[data-font='my-font-theme'] {
    --font-display: 'My Display Font';
    --font-text: 'My Text Font';
  }
  
  /* COLOR VARIABLES */
  [data-theme='red'] {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --primary: 210 40% 50%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --light: 122.2 47.4% 90%;
    --light-foreground: 310 40% 10%;
  }

Parth909 Aug 31, 2023

Hey @alexanderbnelson how are you loading fonts dynamically can you paste it in a gist or point to a website or something.
We have a survey platform where we want to enable the use of different fonts. It would be really helpful.

tecoad Sep 12, 2023

Same question @alexanderbnelson

samducker Jan 27, 2024

@alexanderbnelson also wondering :D

alexanderbnelson Jan 30, 2024

Hi hi. Sorry to be slow on the reply here.

The fonts get loaded dynamically when you dynamically import your CSS relative to your theme. That theme CSS file needs to have your @font-face imports and your font and colour variables.

I explain in more detail here and with an updated, cleaner method that doesn't involve passing the root layout to a child of itself.
vercel/platforms#378 (comment)

Note the method I use does not work with next/font

abhisaha1 · 2023-12-31T08:33:06Z

abhisaha1
Dec 31, 2023

I am also having the same problem in my platform of a multi-tenant app - https://letterpad.app

Note: I am using nextJs 14 with the app dir.

After understanding how these fonts work and trying multiple different ways, I came to realise that its not possible. Below are my findings:

To use a font, you declare it like this:

import { Inter } from 'next/font/google';

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

When the build runs, it is going to recognise this root level const and download the font and add the preload script.

But when you are using variable font, you will receive the font name from a database call or something. These were my attempts:

Attempt 1:

import { Inter , Lora } from 'next/font/google';

const fonts = {
   Inter:  Inter({
     subsets: ['latin'],
     display: 'swap',
  }),
  Lora:   Lora({
     subsets: ['latin'],
     display: 'swap',
  }),
}

const Layout = () => {
  const theme = await getTheme();
  const font = fonts[theme.font].className;
  
 return ...
}

The above code is not going to work because the build is not going to recognise the font. It is not used at the root but instead inside an object fonts.

Attempt 2

I create two files - Inter.tsx and Lora.tsx and load them dynamically like this:

// Inter.tsx

const inter = Inter({
     subsets: ['latin'],
     display: 'swap',
})
export default function({children}) {
   return <div className={inter.className}>{children}</div>
}

In layout I use it like this:

import dynamic from "next/dynamic";

const inter = dynamic(() => import('./inter'));
const lora = dynamic(() => import('./lora'));

const Layout = () => {
  const theme = await getTheme();
  const FontWrapper = theme.font === "inter" ? inter : lora
  
 return <FontWrapper>... layout stuff</FontWrapper>
}

This is going to work if this is server rendered but it is going preload both the fonts.
If you mark it as client component, then it will load only one font but the lazy loading causes FOUT.

Attempt 3

Next attempt was to load it in client but also use preload. However, next does not allow preloading of lazy components in client. I tried using webpackPreload: true comment but nextJS does not recognise this.

Attmept 4

Next attempt was to use await inside the layout component itself and make it server rendered.

const inter = dynamic(() => import('./fonts/inter'));
const lora = dynamic(() => import('./fonts/inter'));

const Layout = () => {
  const theme = await getTheme();
  const font = await import(`./fonts/${theme.fontName}`);
  
 return <div className={font.className}>... layout stuff</div>
}

When you do dynamic path import, webpack will try to build all the files inside the fonts dir and will add it in the bundle. And so both fonts are going to load.

Attempt 5

This attempt to provide with /* webpackChunkName: "primaryFont" */ with dynamic import. Knowing this chunk name will allow me to manually add the preload script. However, in network tab, I was unable to see the chunk with the name primaryFont. Tested in dev mode.

Conclusion

There is no clean solution to this yet.

1 reply

dsacramone Jul 24, 2024

@abhisaha1 Did you find a solution?

softcam-henrique · 2024-01-17T12:15:05Z

softcam-henrique
Jan 17, 2024

I'm having the same problem.

0 replies

pashax0 · 2024-01-22T13:16:37Z

pashax0
Jan 22, 2024

My solution of same problem (draft implementation):
in Layout:
{font ? (
<>
<style jsx global>{html { font-family: '${font}' !important; }}</style>
<link rel="stylesheet" href={https://fonts.googleapis.com/css?family=${replaceSpacesWithPlus(font)}} />
</>
) : null}

0 replies

alexanderbnelson · 2024-01-31T00:54:06Z

alexanderbnelson
Jan 31, 2024

A follow up - here's a Stackblitz for a basic version of how I'm dynamically loading fonts. Swap the fonts being used by changing the themeName variable in layout.tsx

Note the network tab to see that only the selected fonts are loading.

7 replies

Jdruwe May 16, 2024

I still get a flash of unstyled text using that approach, what am I doing wrong? I can also see it happening if I open up the Stackblitz in a new window with cache disabled.

SimonVreman Sep 11, 2024

@alexanderbnelson You might be able to circumvent having to call headers() in the layout by doing a rewrite in middleware that includes some tenant identifying property as a route parameter. Then you can use route cache as well. Just a thought, I use a variant of this and it serves me well.

mattbf Sep 11, 2024

@alexanderbnelson You might be able to circumvent having to call headers() in the layout by doing a rewrite in middleware that includes some tenant identifying property as a route parameter. Then you can use route cache as well. Just a thought, I use a variant of this and it serves me well.

@SimonVreman can you share some barebones example code of your middleware and/or routes?

SimonVreman Sep 12, 2024

Sure! I separate tenants based on host: either they use their own domain, or a free generated subdomain of mine. But accessing this requires looking in the headers.

Folder structure

.
└── app/
    └── [host]/
        ├── layout.tsx
        ├── page.tsx
        └── ...

Middleware

function resolveHost(headers: Headers) {
  return headers.get('x-forwarded-host') ?? headers.get('host') ?? ''
}

export async function middleware(request: NextRequest) {
  const host = resolveHost(request.headers)
  const url = new URL(`/${host}${request.nextUrl.pathname}`, request.url)

  return NextResponse.rewrite(url)
}

Layout

export default async function RootLayout({ params: { host } }: { params: { host: string } }) {
  const tenant = await getTenantByHost(decodeURIComponent(host));
}
...

Now you are not accessing headers(), and you can use route cache. Even static generation at build time works, if you provide the tenant hosts.

mattbf Sep 12, 2024

Makes sense!

export default async function RootLayout({ params: { host } }: { params: { host: string } }) {
  const tenant = await getTenantByHost(decodeURIComponent(host));
}
...

Do your tenant's have a custom theme object or font url? How are you loading custom fonts and applying each tenant's custom css?

Multiply · 2024-02-18T08:25:57Z

Multiply
Feb 18, 2024

We're loading specific fonts based on given locale, and would love to conditionally load one of the four fonts we have available.

Currently it preloads them all, and only conditionally selects one of them, based on the className we set.

0 replies

therealtgd · 2024-07-05T12:26:50Z

therealtgd
Jul 5, 2024

Any solution?

0 replies

yaman3bd · 2024-07-25T06:38:49Z

yaman3bd
Jul 25, 2024

I have a multi-tenant app, each tenant has its own theme, colors, and fonts. and fonts are loaded from Google Fonts or my own hosted fonts based on the tenant choice so here is how I am doing it:

import React from "react";

import { notFound } from "next/navigation";

import { fetchTenant } from "@/app/lib/fetchers";
import "@/styles/globals.scss";

const DEFAULT_FONTS = ["Dubai", "Cairo", "Sahel", "Samim", "Speda", "Vazir", "JFFlat"];
const DEFAULT_FONT = "Dubai";

type RootLayoutProps = {
  children: React.ReactNode;
  params: {
    locale: string;
    [key: string]: string;
  };
};
export default async function RootLayout({ children }: RootLayoutProps) {
  const tenant = await fetchTenant();

  if (!tenant) {
    return notFound();
  }

  const fontFamily = tenant.font_family ?? DEFAULT_FONT;
  const fontBody = tenant.font_body ?? DEFAULT_FONT;

  const dir = tenant.locale === "ar" ? "rtl" : "ltr";

  return (
    <html
      dir={dir}
      lang={tenant.locale}
    >
      <head>
        {DEFAULT_FONTS.includes(fontFamily) ? (
          <style>{`@import url(https://self-hosted.com/assets/fonts/${fontFamily}/style.css);`}</style>
        ) : (
          <style>{`@import url(https://fonts.googleapis.com/css2?family=${fontFamily.replaceAll(" ", "+")});`}</style>
        )}
        {fontBody !== fontFamily &&
          (DEFAULT_FONTS.includes(fontBody) ? (
            <style>{`@import url(https://self-hosted.com/assets/fonts/${fontBody}/style.css);`}</style>
          ) : (
            <style>{`@import url(https://fonts.googleapis.com/css2?family=${fontBody.replaceAll(" ", "+")});`}</style>
          ))}
        <style
          dangerouslySetInnerHTML={{
            __html: `
            :root {
              --bs-font-sans-serif: "${fontFamily}", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
              --headlines-font-family: var(--bs-font-sans-serif);
              --paragraph-font-family: "${fontBody}", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
              --bs-body-font-family: "${fontBody}", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }
            body {
              font-family: var(--paragraph-font-family);
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              color: var(--bs-headline) !important;
              font-family: var(--headlines-font-family) !important;
            }
            `
          }}
        />
      </head>
      {children}
    </html>
  );
}

0 replies

AmirShafikhani · 2024-09-08T04:57:43Z

AmirShafikhani
Sep 8, 2024

any updates on this?
still having this issue on next 14 app dir
is there any clean way to do so?

0 replies

jamie-phlo · 2024-10-11T14:41:05Z

jamie-phlo
Oct 11, 2024

I understand that the font loader files must specify literals currently as you get a "Font loader values must be explicitly written literals" error when you try and add in env variables. But why is this, why can't an env file be used to dynamically specify values at build time?

e.g.

export const inter = localFont({
  preload: process.env.NEXT_PUBLIC_TENANT_REQUIRES_INTER_PRELOAD === 'true',
  src: [
    {
      path: '../assets/fonts/Inter/Inter-VariableFont_opsz,wght.woff2',
      style: 'normal',
    },
  ],
});

0 replies

moazzam-hameed-paracha · 2024-10-15T10:38:21Z

moazzam-hameed-paracha
Oct 15, 2024

So I think I've managed to find an answer. This doesn't give me any FOUT as well.
Basically just dynamically fetch the fonts from a provider then create a custom style and add it inside of it and it seems to work well for me.

0 replies

shx-riff · 2024-11-29T16:40:51Z

shx-riff
Nov 29, 2024

I've got a flashing of the default font when I open the MUI modal with the manual adding the <head> and <style> tags approach. I still don't know what was the exact issue, but I ended up with the following approach, it works fine for me without bugs and FOAT so far:

'use client'

import { preconnect, preinit } from 'react-dom';

export const CustomFontLinks = () => {
  const font_family = ... // get your font family somewhere

  const link = `https://fonts.googleapis.com/css2?family=${font_family
    .split(' ')
    .join('+')}&display=swap`;

  /**
   * We preconnect to google fonts as google recommends.
   * React will create the following tags and place them into the <head>
   * <link rel="preconnect" href="https://fonts.googleapis.com">
   * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   */
  preconnect('https://fonts.googleapis.com');
  preconnect('https://fonts.gstatic.com', { crossOrigin: '' });

  /**
   * We eagerly fetch and evaluate a stylesheet with custom google font.
   * React will create the following tag and place it into the <head>
   * <link rel="stylesheet" href="...">
   */
  preinit(link, { as: 'style', precedence: 'high' });

  return null;
};

Then render the CustomFontLinks component somewhere inside the body tag

0 replies

Austin1serb · 2025-04-26T21:47:25Z

Austin1serb
Apr 26, 2025

✅ Dynamic Google Fonts in Next.js 15 App Router (Clean Solution)

I ran into this exact problem while building a tool
that identifies the Google Font used in any uploaded image: WHAT THE GOOGLE FONT
*Very helpful for next apps using next/font

Because the detected font could change dynamically after a user uploads an image, I needed a way to load fonts at runtime, inside the App Router, without predefining them in next/font or the root layout.

The Challenge:
In Next.js 15 (App Router), fonts are normally defined statically in the root layout and optimized at build time.
Dynamic font loading isn't directly supported by next/font.

✅ The Solution:

On the server I fetch the raw CSS from the Google Fonts API:

const response = await fetch(`https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontName)}:wght@100;200;300;400;500;600;700;800;900&display=swap`)
const css = await response.text()

On the client, when the font name changes (e.g., after an image upload, or after your trigger, I inject the font dynamically into the DOM:

const [result, setResult] = useState<ApiResponse | null>(null)
const fontStyleRef = useRef<HTMLStyleElement | null>(null)

useEffect(() => {
  if (result?.css) {
    // Remove any previously injected font
    if (fontStyleRef.current) {
      fontStyleRef.current.remove()
      fontStyleRef.current = null
    }

    // Inject new font CSS
    const style = document.createElement("style")
    style.textContent = result.css
    document.head.appendChild(style)
    fontStyleRef.current = style
  }
}, [result])

The css field contains the raw @font-face rules returned from Google Fonts.
I replace the previous <style> block each time a new font is detected.
No <Head> tag injection.
No client-side fetch of external stylesheets at runtime (CORS-safe).

Why this works cleanly:

Compatible with the App Router architecture.
No Next.js warnings about dynamic head mutations.
No static pre-importing or bundling every possible font.
Works with any font provider (not just Google Fonts).
Full control over font weights, styles, and font-display behavior.

I tested a lot of other approaches (dynamic import hacks, manual <link> insertions, next/font/local tricks) —
but this method was the cleanest, fastest, and most robust way to dynamically load fonts at runtime in Next.js 15.

It’s been production-tested and works extremely well.

🧹 Minor optional notes you could add:

You might want to clean up .ttf to .woff2 in some cases for modern browser optimization.
You could add a fade-in transition after the font loads to avoid FOUT (flash of unstyled text).

0 replies

salaarkhan-dev · 2025-07-20T07:54:02Z

salaarkhan-dev
Jul 20, 2025

✅ Dynamic Google Fonts with Next.js 15 (Client Component Approach)

I recently encountered the same issue and wanted to share a fully working dynamic solution for loading Google Fonts at runtime using Next.js 15 with Tailwind CSS v4. This is particularly useful when the font name comes from an external source (like an API or user preferences).

🔧 Solution Overview

This approach uses:

A client-side component to inject the desired Google Font.
Tailwind’s @theme inline support for CSS variables.
Native document.createElement API to load fonts dynamically at runtime.

📦 Code Breakdown

1. `GoogleFontLoader.tsx` — Client Component

"use client";

import { useGoogleFont } from "@/hooks/utils/use-google-font";
import { useEffect } from "react";

export function GoogleFontLoader({ font }: { font: string }) {
  useGoogleFont(font);

  return (
    <style jsx global>{`
      :root {
        --font-profile: "${font}", sans-serif;
      }
    `}</style>
  );
}

2. `use-google-font.ts` — Utility Hook

import { useEffect } from "react";

export function useGoogleFont(fontName: string) {
  useEffect(() => {
    if (!fontName || typeof window === "undefined") return;

    const id = `google-font-${fontName.replace(/\s+/g, "-").toLowerCase()}`;
    if (document.getElementById(id)) return;

    const link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(
      /\s+/g,
      "+"
    )}&display=swap`;

    document.head.appendChild(link);

    return () => {
      const existingLink = document.getElementById(id);
      if (existingLink) {
        document.head.removeChild(existingLink);
      }
    };
  }, [fontName]);
}

3. `global.css` (Tailwind v4 with `@theme inline`)

@theme inline {
  /* other variables */
  --font-profile: var(--font-profile);
}

🧑‍💻 Usage in a Component

const dynamicFontName = profile.fontName; // e.g. "Poppins", "Bowlby One"

return (
  <>
    <GoogleFontLoader font={dynamicFontName} />

    <h1 className="font-bold text-foreground mb-0.5 font-profile">
      {profile.name || "Your Name"}
    </h1>
  </>
);

📌 Notes

Fonts are injected only once to avoid duplicates.
Works only on the client, which is perfect for user-configurable themes or dashboards.
This is compatible with Next.js App Router, React Server Components, and Tailwind v4 using the @theme inline strategy.

Hope this helps others looking for a runtime font loading solution in modern Next.js setups! Feedback or improvements welcome. 👇

0 replies

Best way to handle dynamic font loading #40345

Uh oh!

Replies: 15 comments · 16 replies

Uh oh!

Uh oh!

nicosh Nov 17, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Attempt 1:

Attempt 2

Attempt 3

Attmept 4

Attempt 5

Conclusion

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 15 comments 16 replies

nicosh Nov 17, 2022
Author