Why does the browser not render my fonts properly

Question

I'm using custom font with @font-face. But they're rendered with jagged edges in the browser. I tried .woff & .otf, Chrome & Firefox; same results.

Funny thing is, that the same font on the same page in small text, looks much much better (see screenshot 2).

Answer 1

OK, I found the cause of the problem: The big text was in a h1 element, which by default gets a font-weight: bold. I had to unset it by putting font-weight: unset, & walla!!! looks amazing now 😀.