[@next/font] Need "FIXED" font family name

[niklauslee]

Describe the feature you'd like to request

I'm using <canvas> and drawing some shapes and texts with font name (e.g. "Inter", "Roboto", etc_) and the shape's data including font name is stored in database. So I want to use @next/font with the FIXED font family name like "Inter", "MyFont" instead of using auto-generated name like "inter-23987176".

Describe the solution you'd like

It would be nice if we have an option for the FIXED font family name as below:

import localFont from "@next/font/local";
const myFont = localFont({
  familyName: "Inter", // optional. use generated name if not provided
  src: [...]
}

...

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px Inter'; // Use "FIXED" font family name
ctx.fillText('Hello world', 10, 50);

Describe alternatives you've considered

I've tried "declarations" option with "font-family" property, but it didn't work.

[Fredkiss3]

You can define your font as a css variable and use that name in your styles.

import localFont from "@next/font/local";
const myFont = localFont({
  variable: "--my-font",
  src: [...], 
}

...

<div style={{fontFamily: "var(--my-font)"}}>...</div>

[niklauslee]

@Fredkiss3 I know it, but it's not a solution for my issue. I'm developing a Lucidchart-like diagramming tool and users need to use font names like "Inter", "Roboto" for Text shape objects which have to be drawn in HTML5 Canvas element.

Assumes that I used the css variable (e.g. inter-239873) for shape object's font family. The shapes data is stored in database as JSON like below:

{
   "type": "Text",
   "x": 100, "y": 100, "w": 50, "h": 70,
   "fontFamily": "inter-239873", "fontSize": 12,
   ...
}

When I rebuild the Next.js project then the css variable may be changed to likeinter-a4b49502. Then, I can't redraw the Text object loaded from database on Canvas element.

[Fredkiss3]

@niklauslee One workaround idea could be to keep a mapping of fontName: css-variable-name in your data store and you could save your data like this in your db :

{
   "type": "Text",
   "x": 100, "y": 100, "w": 50, "h": 70,
   "fontFamily": "--font-inter", "fontSize": 12,
   ...
}

[niklauslee]

@Fredkiss3 Yes, it could solve, but I think the mapping is unnecessary if I can use a fixed font name. Is there any reason not to support fixed font names?

[justinkahrs]

Is there any workaround for this? I have third party components that come in with a font-family already assigned, I'd like to simply load the font with nextjs.

[riceboyler]

I have similar concerns for use with a 3rd party visual CMS like Builder.io. It automatically imports your fonts, but if the font-family is variable, it means that the font-family that is assigned when applying styling won't necessarily match every time because it's a variable name. That means you could randomly end up with unstyled content because the font-family name changed during a deploy.

I understand the variable name is probably required due to how these are built under the covers, but there has to be some way to establish a fixed name, doesn't there?

[awkaiser-tr]

Assuming you've abandoned IE 11 and can use CSS Variables, consider updating / overriding impacted CSS rules:

/* BEFORE */
font-family: Inter, Helvetica, san-serif;

/* AFTER */
font-family: var(--font-inter, 'Inter'), Helvetica, san-serif;

... setting next/font custom variable property to match, e.g.

const inter = Inter({
  display: 'swap',
  subsets: ['latin'],
  variable: '--font-inter',
  weight: ['400', '500', '600', '700', '800'],
});

Finally, use value of inter.variable instead of inter.className on wrapper element: ¹

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.variable}>
      <Component {...pageProps} />
    </main>
  );
}

FWIW, the official Tailwind integration advice for next/font makes a similar recommendation:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
};

Footnotes

1. You can find alternatives for using a wrapper element in the next/font docs ↩

[filiptdz]

It seems crazy to me that this isn't supported. According to the docs you should be able to specify declarations: [{ prop: 'font-family', value: 'New Name' }], but that doesn't work.

[yashsway]

I tried this as well - didn't work. Looks like there are some properties that cannot be changed.

[blvdmitry]

Upvote the MR below so we can hopefully get it reviewed by the Next.js team 🙌

[dannyrb]

FWIW, this feature is only for local fonts, not google

[blvdmitry]

Would definitely love to see this supported. It's very helpful for component libraries shipping font-family styles with custom fonts and asking product teams to import the font assets. In that case you don't have access to the css to switch to a variable or use a generated font name.

[blvdmitry]

Had some time so figured out a fix that could work locally, so planning to open a PR after I read through all the contribution guidelines 😅

What I'm doing in my local branch right now is:

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

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

What do you think about this approach? Right now it's just ignoring the hashing if the flag is true, but I can also see minor potential improvements here:

• Use a different flag name, like ignoreFontFamilyHashing or similar
• Turn the flag into a string, allowing developers passing a custom font family name instead of a boolean
• Support both boolean and a string

Edit:
Updated the code snippet to only use the fontFamily value as a string

[blvdmitry]

Opened a PR for this: #53608

Had some issues running the next/font tests locally so still trying to figure out why they can't start the Next instance but would be great to get folks interested in this feature check the PR as well.

[swiftrees]

For anyone here trying to use next fonts for writing text on a canvas, heres how i did it:

const caveat = Caveat({ subsets: ["latin"] })

ctx.font = 64px ${caveat.style.fontFamily}

[blvdmitry]

This is now resolved in https://github.com/vercel/next.js/releases/tag/v14.3.0-canary.64