Next.js Discord

Discord Forum

Why is the same font family rendered differently? Specifically the "i".

Answered
Bearded Collie posted this in #help-forum
Open in Discord
Bearded CollieOP
The font that's being used is Roboto Mono. The top image is from Miro (similar to Figma), and the bottom one is my from website. I've tried looking into the issue, but most people seem to have a difference in font weight, whereas my "i" is completely different regardless of font weight. Thanks in advance! 

// src/app/layout.js

import "./globals.css";
import { Poppins, Martian_Mono, Roboto_Mono } from "next/font/google";

const robotoMono = Roboto_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-roboto-mono",
});

const martianMono = Martian_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-martian",
});

const poppins = Poppins({
  subsets: ["latin"],
  display: "swap",
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  variable: "--font-poppins",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${poppins.variable} ${martianMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}
Answered by Bearded Collie
    <html lang="en" className={`${poppins.variable} ${martianMono.variable}`}>

I didnt throw the variable in here. The font was changing on my screen so I thought it was working
View full answer

12 Replies

Bearded CollieOP
Ray
check font rendered with the dev tool on browser
@Ray check font rendered with the dev tool on browser
Bearded CollieOP
Oh... the font being rendered is not Roboto Mono
@Bearded Collie Oh... the font being rendered is not Roboto Mono
Ray
which font are you expecting?
@Ray which font are you expecting?
Bearded CollieOP
I'm expecting Roboto Mono, but i'm getting this instead
Ray
did you set the font-family for the text?
@Ray did you set the font-family for the text?
Bearded CollieOP
omg I see the issue
Bearded CollieOP
    <html lang="en" className={`${poppins.variable} ${martianMono.variable}`}>

I didnt throw the variable in here. The font was changing on my screen so I thought it was working
Answer
Bearded CollieOP
Thanks for you help. 🥲
Ray
:lolsob:
np please mark solution if you issue has been solved
Bearded CollieOP
yesir ty