Next.js Discord

Discord Forum

Nextjs fonts not working

Answered
Anay-208 posted this in #help-forum
Open in Discord
Anay-208OP
Fonts are not working for some reason in nextjs
Answered by Ray
tailwind class name cannot be dynamic meaning you cant do font-${project.font}
View full answer

18 Replies

Anay-208OP
This is my code:
 {projects.map((project, index) => (
        <div key={index} className="flex h-auto w-2/3 flex-col mx-auto">
          <Image
            className="inset-0 z-10 h-fit w-full rounded-t-md"
            src={project.image}
            width={1280}
            height={720}
            alt={project.title}
          />
          <div className="rounded-b-md bg-slate-950">
            <h2 className={`font-${project.font} text-center text-2xl`}>{project.title}</h2>
            <p className="text-center mx-4 my-2 h-28 sm:h-20">{project.description} &nbsp;
            <Link className=" text-blue-500 underline" href={project.link + "/about"}>Read More</Link></p>
            <Link href={project.link} className="mx-auto my-3 block rounded bg-gradient-to-r from-purple-500 to-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 w-fit bg-[length:200%_200%] hover:animate-gradient">
              View Site
            </Link>
          </div>
        </div>
      ))}
However, when I replace project.font, with the font name, and load the page, the fonts start loading
and when I undo the changes, the fonts work. But not for long
Full source code can be viewed at https://github.com/anay-208/portfolio
live url is in my bio
Ray
tailwind class name cannot be dynamic meaning you cant do font-${project.font}
Answer
Ray
do project.font ? 'font-sans' : 'font-display' instead
@Ray tailwind class name cannot be dynamic meaning you cant do `font-${project.font}`
Anay-208OP
there can be any number of projects, so I can't use this operator. There'll be custom font. anything else I can do
Ray
do it with switch case or a map
const fontMap = {
  "project1": "font-sans",
  "project2": "font-2",
  "project3": "font-3"
}

something like this
@Ray ts const fontMap = { "project1": "font-sans", "project2": "font-2", "project3": "font-3" } something like this
Anay-208OP
instead, can I just use project.font, and 
project = {
font: "font-sans"
}
Ray
its up to you
Anay-208OP
wait, can I do this?
            <h2 className={`${"font-" + project.font} text-center text-2xl`}>{project.title}</h2>
Ray
as long as the classname exist in the file, then tailwind will compile it
no
Anay-208OP
ok got it
thanks