Usefulness of @font-face

Hi. I’m having difficulty understanding the full usefulness of the @font-face rule. I understand that it opens up possibilities with more fonts (instead of just using ‘web safe’ fonts), but this can be done just using a link in the head element. It seems really cumbersome to add a @font-face for every weight of the font (e.g 400 italic, 700 bold). Why not just link an url or downloaded file, instead of taking up tons of space in the stylesheet? An explanation would really help!

Hey there honzou86!
font-face is needed in the css file.
When the html file links to the stylesheet the browser loads it and reads this property and understands how the font file needs to be interpreted/served every time it is referred to (using the property font-family).

I agree with you that font-face can take up a lot of lines of your css file. But this is why you can use the @import rule, which basically links some css rules to another css file.

Said so, in my experience I saw better performance (as in a faster server response) by not using @import, because it creates chained requests, which are obviously slower than serving all the information immediately.

Also, stuffing a website with many different fonts is a bad design practice in my opinion, so the issue doesn’t really present itself in reality. But of course, anyone else’s opinion could differ. :slight_smile:

Does this help?

1 Like

Hi usernamegiapreso. Thanks, your answer does help. Font-face is not as scary as I thought as now I know multiple font weights can be declared in one rule. I guess my main question is: why use font-face over a link in the head element? I did a bit more reading and apparently fonts load faster when they are linked.

if you only link your font through font-face in your css file, you have to wait for the browser to read your html, request the linked css file, read the css file, request the linked font file, re-render the webpage. Not the best.

You can avoid this by putting font-face inside a <style> tag in your <head> tag of the html file.
Better still, you can also put a <link> tag with a rel="preconnect" attribute. This way at the same moment the browser reads that line of your html file also sends a parallel request for the font file and keeps reading your html.
When your font was requested and received, will be cached on the browser memory and will not be requested again (if for example there are other link tags or font-face needing it).

This is especially true and useful about font-face, making its src descriptor property (which must be present) skippable, leaving you with a font-face loaded and ready to go.

1 Like

Ok. So it seems using a link tag is the cleanest way to import a font into a document. Thanks for all your help!

1 Like