Next.js Discord

Discord Forum

Applying multiple google fonts to tailwind project

Answered
Cinnamon posted this in #help-forum
Open in Discord
CinnamonOP
I'm trying to import multiple fonts into my tailwind project, but I'm having trouble getting everything working. I'm importing them into my layout.tsx, but I think the issue is defining them in my tailwind config. I'm able to get montserrat working fine, but anything with more than one word in it is not working as expected.

I tried doing underscores like the actual font name, as it seems that putting them in the tailwind config is just related to the actual name (but not case sensitive?), and not the variable assigned to it when imported in layout.tsx. I also tried just putting the name in quotes, but that doesn't seem to work either. SOMETHING is changing, as when I use the classnames in my page.tsx, it is changing to Times New Roman.

Photos attached.
Answered by Asian black bear
You need to import them to the root layout and add their classnames to html or something
View full answer

15 Replies

CinnamonOP
Additional info: I was able to get source code pro to work by just making the name have spaces in the config, but not playfair display. I'm not sure what the difference could be.
Asian black bear
Note that Tailwind does not automatically escape font names for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}
Lots of examples I have seen of using Google fonts in Tailwind use CSS variables, like 
import { Asap as Font } from "next/font/google";

const DefaultFont = Font({ subsets: ["latin"], variable: "--font-default" });
export default DefaultFont;


Then in tailwind.config.js

      fontFamily: {
        display: ["var(--font-default)", ...defaultTheme.fontFamily.sans],
      },
@Asian black bear > Note that Tailwind does not automatically escape font names for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
CinnamonOP
Yeah, I definitely tried this several different ways, both with escapes and single around double quotes. But just to get a second pair of eyes, source code pro and playfair display look exactly the same as far as how I've written them, right? For some reason, source is working, but playfair is not.
CinnamonOP
And here's me trying to make it work with the variables. Both source and playfair don't work with this configuration.
@Cinnamon And here's me trying to make it work with the variables. Both source and playfair don't work with this configuration.
Asian black bear
You need to import them to the root layout and add their classnames to html or something
Answer
Asian black bear
@Cinnamon <html lang="en" className={classNames(inter.variable, jost.variable)}>
From another of my projects with two fonts
You export the variables from the font constructors
@Asian black bear You need to import them to the root layout and add their classnames to html or something
CinnamonOP
I'm sorry, I feel like I'm just asking follow up after follow up here. I tried that pattern, but I'm getting that classNames is not defined. Is that an additional dependency, or something else?
@Cinnamon I'm sorry, I feel like I'm just asking follow up after follow up here. I tried that pattern, but I'm getting that classNames is not defined. Is that an additional dependency, or something else?
joulev
it is this lib https://www.npmjs.com/package/classnames, if you already use clsx then you can use clsx, if you don't have any of these libs installed then just
className={`${font1.variable} ${font2.variable} ${font3.variable}`}
This solution worked! Thank you all for your help!