Tailwindcss font issue?
Unanswered
Cuban Crocodile posted this in #help-forum
Cuban CrocodileOP
Hello,
I just installed nextjs using
Has anyone else noticed something like this or am I missing something obvious here?
I just installed nextjs using
npx create-next-app@latest and opted to use tailwindcss. Then grabbed a sidebar navigation example from TailwindUI. However, when I look at the final result on my nextjs project and the live preview on TailwindUI site, I notice that the font looks different. Inspect element shows both elements having same classes and same font-weight.Has anyone else noticed something like this or am I missing something obvious here?
14 Replies
@Cuban Crocodile Hello,
I just installed nextjs using `npx create-next-app@latest` and opted to use tailwindcss. Then grabbed a sidebar navigation example from TailwindUI. However, when I look at the final result on my nextjs project and the live preview on TailwindUI site, I notice that the font looks different. Inspect element shows both elements having same classes and same font-weight.
Has anyone else noticed something like this or am I missing something obvious here?
That’s because while both use Inter, they use different variants of Inter
If you use Inter from Google Fonts you can only get the left image
To get the right image you need to use the original font file in https://rsms.me/inter/
Visit the link to learn about different variants of Inter
@joulev That’s because while both use Inter, they use different variants of Inter
Cuban CrocodileOP
Oh that makes sense. Thank you! Do you know if I can use
next/font to get the variant on the right?@Cuban Crocodile Oh that makes sense. Thank you! Do you know if I can use `next/font` to get the variant on the right?
next/font can do it provided you use next/font/local with the font file downloaded from rsms.me above
next/font/google won’t work
@joulev next/font can do it provided you use next/font/local with the font file downloaded from rsms.me above
Cuban CrocodileOP
I tried it (like below) but there's still a difference. I'm wondering if there's another setting I have to configure or use a different woff2 file?
import localFont from 'next/font/local';
// Font files can be colocated inside of `app`
const myFont = localFont({
src: './InterVariable.woff2',
weight: '100 900'
});
import './globals.css';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app'
};
export default function RootLayout({ children }) {
return (
<html lang='en'>
<body className={myFont.className}>{children}</body>
</html>
);
}@Cuban Crocodile I tried it (like below) but there's still a difference. I'm wondering if there's another setting I have to configure or use a different woff2 file?
import localFont from 'next/font/local';
// Font files can be colocated inside of `app`
const myFont = localFont({
src: './InterVariable.woff2',
weight: '100 900'
});
import './globals.css';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app'
};
export default function RootLayout({ children }) {
return (
<html lang='en'>
<body className={myFont.className}>{children}</body>
</html>
);
}
Add this to the css file
html {
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}@joulev Add this to the css file
css
html {
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
Cuban CrocodileOP
Just tried but still no luck 😦
@Cuban Crocodile Just tried but still no luck 😦
I will try with my laptop once I can open it (but that won’t happen today or tomorrow). For the time being try using
body instead of html in the css codeCuban CrocodileOP
Unfortunately switching to
body did not work either. I'll wait for you to try – I really appreciate you taking the time on this.notice the lowercase a, thats the biggest difference between the two