Web Font Trouble Shooting

So I’ve used this in multiple different web font testers from the web fonts tutorial and everything seems to be working fine. I’m using chrome and having this weird issue whenever I try to use my font. Very new to web fonts and any help would be GREATLY appreciated!

It seems that you have not removed overlaps.

1 Like

Thanks for the response, okay got it, I updated the file with remove overlaps checked and it didn’t seem to fix however what did fix is when I added font-weight: 100 Is there any reason I would even have to do that normally?

So it seems that the rasterizer is applying a fake bold effect.

1 Like

Yes, because h1 is styled with a bold font (font-weight: 700) by default. You either have to tell the browser that your font is already bold in the @font-face rule, or assign a normal weight (font-weight: 400) to h1, as you did (weight 100 works as well because browsers don’t apply a fake thinning effect :wink: ).

1 Like