Loading fonts correctly with CSS | Web Design Tutorial

Using this method to load your web page fonts allows you to not only remove the unwanted effect of "fake" (or faux) font rendering but also lets you take advantage of the standard font-weight and font-style CSS rules.

Fake (or faux) font rendering is when the web browser tries its best to apply a weight or style to a font when it does not have the respective version loaded. For example, if a web developer has set the font-weight as "bold" for a particular element but has not provided the "bold" font file (i.e. woff, woff2 etc.) then the browser will "fake" bold it. This means you will get different looks across different browsers.

To combat this and to use the font-weight and font-style rules correctly, you can use the method described in this video.

An article on fake (or faux) bolding:

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[gopinathkrm]

awesome, I was having some problem in loading woff fonts. This helped me a lot

[arzoojain]

will it only work for woff, not for ttf?

[tobiasschauble]

THANK YOU SOOO MUCH MY FRIEND - BE BLESSED

[brielov]

What monospace font are you using inside vcode?