Next.js Discord

Discord Forum

No font on safari and mobile

Answered
Red imported fire ant posted this in #help-forum
Open in Discord
Red imported fire antOP
Hi!
I tried to link a google font(Inter)

I layout.tsx set as

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

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

...

<html lang='en' className={inter.className}>


On Chrome, Arc, FireFox everything is ok, but in Safari and mobile browesers i got default font.

How to fix it?
Answered by Red imported fire ant
fixed:

changed inter.class...

to

html lang='en' className={${inter.variable}}>
View full answer

6 Replies

Red imported fire antOP
here is how i added font in layout.tsx
Red imported fire antOP
:thinq:
Red imported fire antOP
in inspector i see links to font, but they didn't apply to css
Red imported fire antOP
so, got this error..
Red imported fire antOP
someone know how to fix it?...
Red imported fire antOP
fixed:

changed inter.class...

to

html lang='en' className={${inter.variable}}>
Answer