Next.js Discord

Discord Forum

Issue with fonts

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Avatar
Asiatic LionOP
I'm trying to apply DM Serif Display to h1 elements while other elements under body use Poppins. DevTools say it should be working since it shows DM Serif Display as the active font (see image). However, all h1 elements still appear as Poppins for some reason. I've tried changing the body font to DM Serif Display and DevTools says it's been applied but visuals say otherwise. Can somebody help me please?
Image
Answered by B33fb0n3
you need to use it somewhere so it gets downloaded. Just using fontFamily: "'DM...', sans-serif" seems to not trigger the download, so make sure you are doing this somewhere:
className={inter.className} // change the font variable

Example:
<html lang="en" className={inter.className}>
      <body>{children}</body>
</html>
View full answer

22 Replies

Avatar
B33fb0n3
that sounds like that the font wasnt downloaded yet. Make sure you let the browser download it from somewhere. For example though a stylesheet or a connection to google fonts or ...
Also share the code how you implemented the loading and setting of the font.
Also check the network logs if the font was downloaded correctly
Avatar
Asiatic LionOP
I do think it was downloaded because if I add a header directly in layout.js and apply the font through there it works
but ill send you the code in a minute
Avatar
Asiatic LionOP
Image
Image
@B33fb0n3 (sorry idk if I should be pinging) but here it is
Avatar
B33fb0n3
how do you use it?
Also check the network logs if the font was downloaded correctly
Avatar
Asiatic LionOP
It's applied globally to all h1 elements through globals.css but I'll send you an example of where it should be applied and is not
Image
I had tried it without the style=... before and still nothing
Avatar
B33fb0n3
it looks like it wasn't used. Iirc unused fonts will be excluded and not downloaded. So I say it again:
Also check the network logs if the font was downloaded correctly
Image
Avatar
Asiatic LionOP
yep network doesn't show it😥 just checked it
wait so how do i fix that
Avatar
B33fb0n3
you need to use it somewhere so it gets downloaded. Just using fontFamily: "'DM...', sans-serif" seems to not trigger the download, so make sure you are doing this somewhere:
className={inter.className} // change the font variable

Example:
<html lang="en" className={inter.className}>
      <body>{children}</body>
</html>
Answer
Avatar
Asiatic LionOP
Alright! Will try that thanks
Avatar
B33fb0n3
When will you try it?
Avatar
Asiatic LionOP
In like 6 hours when I get home
Avatar
B33fb0n3
@Asiatic Lion tried?
Avatar
Asiatic LionOP
yes! It worked thanks
now im having some issues with the pwa working because for some reason the install prompt doesnt appear
Avatar
B33fb0n3
happy to help
this thread is already resolve. Make sure to create a new thread for that topic, so others are able to help you as well 🙂
Avatar
Asiatic LionOP
yea yea sure