Why does my custom fonts look weird on my website?

HTML & CSS
1

Hi guys,

I have a really simple question here. I really hope that somebody can give me a good explanation for my problem.
I am using a custom font “.otf” on my website, i have converted it from otf to woff, from woff to woff2 and ttf…

This is how i have included it:

   /* Vaud Regular */
@font-face {
font-family: "Vaud-Regular";
  src: url("../fonts/Vaud-Display-Book.woff")  format("woff"),       /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url("../fonts/Vaud-Display-Book.woff2") format('woff2'),      /* Super Modern Browsers */
       url("../fonts/Vaud-Display-Book.otf")   format("opentype"),   /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
       url("../fonts/Vaud-Display-Book.ttf")   format("truetype");   /* Safari, Android, iOS */
}

When i view my website on my iMac the font look so sharp and clean, however when i view the same website on my windows laptop in the same web browser “Chrome” the font… is not CLEAR and CRISP enough… it looks a little bit “italic”. Is this a common issue with custom fonts? Or… do you guys have some advice for this problem?

I really want to fix this, for future projects so that i don’t have the same problem.

Thanks in advance.

KInd regards,
Nino

2

How did you do that? Did you use the FontSquirrel converter? That seems to be the most reliable.

3

I have been using: https://everythingfonts.com

4

The code you posted above doesn’t look ideal to me, so I’d give the Font Squirel service a try—at least to compare the results.

5

( am going to assume by “custom font” you mean just web fonts and not a custom-created typeface

are you using one of the new iMacs? Tex on retina displays are near print-quaity.

6

Hi,

Yes atleast, not the 5K HD screen one but the latest one before it. It’s pretty weird honestly.

7

I will give it a try, thanks anyway.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.