Global font-family with `next/font` ? #1019

vipindigiqt · 2023-03-02T03:44:01Z

vipindigiqt
Mar 2, 2023

Hi, I'm trying to use the custom font in my Next app using next/font method.

Here's my file having global styles:

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

const inter = Inter({
  weight: "variable",
  subsets: ["latin"],
});

& I'm applying it this way:

// [Theme ]
export const [themeClass, theme] = createTheme({
  font: {
    sans: inter.style.fontFamily,
  },
});

I just do this and can see an error in the terminal:

NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: document is not defined
Import trace for requested module:

How should I do it the ideal way?

I just want to add that themeClass to my body element.

Msordet · 2023-04-14T16:06:51Z

Msordet
Apr 14, 2023

Here's how I did my setup:

import React from 'react';

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

const inter = Inter({ subsets: ['latin'] });

export const Fonts: React.FC = () => {
  return (
    <style jsx global>{`
      :root {
        --font-family: ${inter.style.fontFamily};
      }
    `}</style>
  );
};

Import the Fonts component in _app.tsx.
Then you can use var(--font-family) in vanilla-extract like this:

export const fontFamilies = {
  'sans-serif': `var(--font-family), Arial, sans-serif`,
};

globalStyle('body', {
  fontFamily: fontFamilies['sans-serif'],
});

// for sprinkles
const fontProperties = defineProperties({
  properties: {
    fontFamily: fontFamilies,
  },
});

0 replies

Krosantos · 2023-07-29T03:11:58Z

Krosantos
Jul 29, 2023

@Msordet's approach works perfectly, until you try to get server components involved.

I'm using Next 13's new app directory, which is using React server/client component dichotomy under the hood. styled-jsx, which powers that <style jsx global> tag is server-only. If you invoke it in a component with the use client directive, you'll get a gnarly flash of unstyled content/layout shift as the client hydrates and sets the --font-family var.

For me, the workaround was to use assignInlineVars from @vanilla-extract/dynamic [documentation link]. (With the small added benefit of not depending on the string match for the css variable.)

Wherever you're setting up your theme, leave a space for your font variables:

/** #/themes/_contract.css.ts */

import { createThemeContract } from "@vanilla-extract/css";

export const theme = createThemeContract({
  font: {
    display: null,
    body: null,
  },
});

In your server components, import your font(s) with next:

/** app/layout.tsx */

import { Inter } from "next/font/google";
import { assignInlineVars } from "@vanilla-extract/dynamic";
import localFont from "next/font/local";
import { theme } from "#/themes/_contract.css";

// Set up your fonts
const borel = localFont({ src: "./Borel-Regular.ttf" }); 
const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body
        className={nightTheme}
        style={assignInlineVars({
          [theme.font.display]: borel.style.fontFamily, // <--- This is the good stuff!
          [theme.font.body]: inter.style.fontFamily,
        })}
      >
        {children}
      </body>
    </html>
  );
}

Now, you can invoke your theme properties in your css.ts files:

/** component.css.ts */

import { theme } from "#/themes/_contract.css";
import { style } from "@vanilla-extract/css";

export const displayHeader = style({
  fontFamily: theme.font.display,
});

The end result loads without a FOUC/layout shift!

Screen.Recording.2023-07-28.at.11.10.17.PM.mov

1 reply

Krosantos Jul 29, 2023

Unfortunate aside -- the return type of assignInlineVars is Styles (definition below, package version 2.0.3). Although it's basically just an object, React doesn't want to hydrate the client with non-plain-objects, and will warn you about it in the console:

declare type Styles = {
    [cssVarName: string]: string;
};

Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.

Everything you care about is serializable, so there's no meaningful loss of data. There's probably a less hacky way to do it, but for now, I'm dodging the issue by JSON serializing my inlined style, and then immediately parsing it back to a POJO 🙃.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const withFonts = assignInlineVars({
    [theme.font.display]: borel.style.fontFamily,
    [theme.font.body]: inter.style.fontFamily,
  });
  const inlined = JSON.parse(JSON.stringify(withFonts));
  return (
    <html lang="en">
      <body className={nightTheme} style={inlined}>
        {children}
      </body>
    </html>
  );
}

ryo-rm · 2023-08-21T02:18:25Z

ryo-rm
Aug 21, 2023

I'm not sure if this is the best solution, but it seems to work well in my environment.

/** styles/theme.css.ts */

import { createGlobalTheme } from "@vanilla-extract/css";

/**
 * ```
 * Font loader values must be explicitly written literals.
 * ```
 * @see app/layout.tsx
 */
export const vars = createGlobalTheme(":root", {
  font: {
    jp: `var(--font-noto-sans-jp)`,
    en: `var(--font-inter)`,
  },
});

/** app/layout.tsx */

import { Noto_Sans_JP, Inter } from "next/font/google";
import "~/styles/theme.css";

export const noto = Noto_Sans_JP({
  display: "swap",
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
});
export const inter = Inter({
  display: "swap",
  variable: "--font-inter",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className={`${noto.variable} ${inter.variable}`}>
      <body>
        <RootHeader />
        <main>{children}</main>
        <RootFooter />
      </body>
    </html>
  );
}

/** component.css.ts */
import { style } from "@vanilla-extract/css";
import { vars } from "~/styles/theme.css";

export const displayHeader = style({
  fontFamily: vars.font.en,
});

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global font-family with `next/font` ? #1019

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Global font-family with next/font ? #1019

vipindigiqt Mar 2, 2023

Replies: 3 comments · 1 reply

Msordet Apr 14, 2023

Krosantos Jul 29, 2023

Krosantos Jul 29, 2023

ryo-rm Aug 21, 2023

Global font-family with `next/font` ? #1019

vipindigiqt
Mar 2, 2023

Replies: 3 comments 1 reply

Msordet
Apr 14, 2023

Krosantos
Jul 29, 2023

ryo-rm
Aug 21, 2023