Weirdly rendered font specifically in Next.js

Answered

Yacare Caiman posted this in #help-forum

Open in Discord

Yacare CaimanOP

2023-10-08T17:09:13.000Z

Hello, im getting weirdly rendered text in Next.js with pure basic project. Any clue what could be wrong?
Im pretty there is no issue with the font itself, as its the default next/font/google
https://github.com/shulinnn/face-assist - heres repo if needed

Answered by Clown

I literally do not know what could be wrong then.

View full answer

68 Replies

@Yacare Caiman Hello, im getting weirdly rendered text in Next.js with pure basic project. Any clue what could be wrong? Im pretty there is no issue with the font itself, as its the default `next/font/google` https://github.com/shulinnn/face-assist - heres repo if needed

2023-10-08T17:26:18.000Z

Whats wrong with it?

Yacare CaimanOP

2023-10-08T17:27:36.000Z

Should look like this.

Might be on my side only and not actually be something wrong wrong Next.js but my text looks hella blurry

2023-10-08T17:30:05.000Z

Remove font-sans

Also maybe try passing Inter with the className

Yacare CaimanOP

2023-10-08T17:30:38.000Z

Tried that also, nothing changed

Tried the default one actually which u get when u bootstrap the project with create-next-app

2023-10-08T17:31:31.000Z

Its grainy?

Yacare CaimanOP

2023-10-08T17:35:17.000Z

And has white shadow underneath it

Though it might be something with the font format itself

Also , fully reinstalled my OS, so im sure its not in my OS.

@Yacare Caiman Hello, im getting weirdly rendered text in Next.js with pure basic project. Any clue what could be wrong? Im pretty there is no issue with the font itself, as its the default `next/font/google` https://github.com/shulinnn/face-assist - heres repo if needed

2023-10-08T17:36:23.000Z

I dont see any shadow in this firstly. Secondly the icon is also grainy, meaning the screenshot you took is grainy itself, not the font.

Other than that i can only see a size difference

Yacare CaimanOP

2023-10-08T17:37:01.000Z

U dont see any small weird white shadow under the text in the first pic i've sent?

2023-10-08T17:37:54.000Z

You can try the same thing in something like codesandbox to ensure its not nextjs

Also, i may be blind cause i literally do not see a white shadow

Yacare CaimanOP

2023-10-08T17:38:32.000Z

It could also be my gfx card, as my friend which is looking into it is saying, he sees it okay.

But that would be weird , because on other projects i've done, i dont see anything like that

2023-10-08T17:39:18.000Z

Yacare CaimanOP

2023-10-08T17:39:29.000Z

U see the jagged white edges?

Its like a glow around the text , a very little bit

2023-10-08T17:40:02.000Z

The image itself is grainy

Yacare CaimanOP

2023-10-08T17:40:51.000Z

Could u clone the repo and check for yourself? if its also at your side that u see it clearly in browser, then its my hw issue

2023-10-08T17:45:05.000Z

I see it crystal crisp

https://test-repo-alpha-ten.vercel.app/

Yacare CaimanOP

2023-10-08T17:45:39.000Z

Aight , then its my hw issue then

Maybe my monitor cant handle such colors? idk

2023-10-08T17:45:58.000Z

Surely have a mobile right?

Test that link

2023-10-08T17:46:18.000Z

what OS are you on?

2023-10-08T17:46:26.000Z

Im literally on a mobile rn

Yacare CaimanOP

2023-10-08T17:46:29.000Z

windows 11

Ye, phone looks clear and nice

2023-10-08T17:46:38.000Z

I dont think it matters tbh

2023-10-08T17:46:43.000Z

it does

windows font rendering

its always crap

2023-10-08T17:47:04.000Z

The rendering is done by the browser tho

Windows doesnt handle that

2023-10-08T17:47:46.000Z

im pretty sure the rendering is different in chrome on macOS and windows for example

Yacare CaimanOP

2023-10-08T17:47:55.000Z

Also disabled 2d canvas in chrome

Also tried brave , same thing

@KINXZ im pretty sure the rendering is different in chrome on macOS and windows for example

2023-10-08T17:48:19.000Z

OS literally has nothing to do with font rendering of the browser

The browser handles the font rendering

2023-10-08T17:48:28.000Z

i see the jagged on windows too

2023-10-08T17:48:49.000Z

Try different browser maybe

Yacare CaimanOP

2023-10-08T17:48:57.000Z

On edge same result

2023-10-08T17:49:04.000Z

Weird.

Yacare CaimanOP

2023-10-08T17:49:15.000Z

https://shulinnn.github.io/wiz-interview/ but here

2023-10-08T17:49:15.000Z

Windows shouldn't be effecting that at all

Yacare CaimanOP

2023-10-08T17:49:20.000Z

i got nothing wrong

all looks clear

2023-10-08T17:49:33.000Z

Try using subpixel-antialias

Yacare CaimanOP

2023-10-08T17:50:22.000Z

Nah , same result

@KINXZ what gfx + monitor u have ?

2023-10-08T17:50:55.000Z

Try a different font then

Maybe not a variable-size font this time

Roboto or urbanist maybe?

Try the link in my about me. That uses the urbanist font

https://answers.microsoft.com/en-us/windows/forum/all/specific-font-rendered-badly-and-unreadable-on/1575ec3e-a469-484d-bd14-99bbfa920eea

Also this might have some solutions

Yacare CaimanOP

2023-10-08T17:53:05.000Z

Your link looks ok.

It seems like it is issue with specific color combination

using Roboto now

and it seems like it has some sort of glow

@Clown https://answers.microsoft.com/en-us/windows/forum/all/specific-font-rendered-badly-and-unreadable-on/1575ec3e-a469-484d-bd14-99bbfa920eea

Yacare CaimanOP

2023-10-08T17:55:44.000Z

Every text on my pc is readable , and everywhere else. This is actually a detail, but was wondering what could be wrong here.

2023-10-08T17:57:39.000Z

I literally do not know what could be wrong then.

Answer

Yacare CaimanOP

2023-10-08T17:59:33.000Z

Could also be issue with my monitor showing colors.

Thanks for your time, i do really appreciate that