Question about web fonts

MDN Learn
#1

Hi.

I was wondering, why would I ever use “@font-face” route when adding a font to my website if I can just use an online font service instead? It’s so much easier and does the same job. All I have to do is to just link the font source once and that’s it. “@font-face” route is much more complicated and harder to remember. So why would anyone bother with that? Are there any advantages to it?

#2

Hi @George.C! Welcome to the community.

You are right that in real terms, you probably wouldn’t bother to write all the @font-face code yourself when you can just use something like Google Fonts to write the code for you, optimize everything, etc.

What you’ve got to remember is that all of those online font services will be using @font-face code in the background, and it is useful to have an idea of how the underlying code works, so that you can debug problems more easily if they should arise.

Also, there are other advantages to knowing the underlying code:

  1. There are some clever things you can do with web fonts that might not be available with an online service, for example what if you want to use a specific font for only a few characters, and don’t want users to download the entire font just for a few glyphs? The answer is that you could edit the font file to create a special version with only the glyphs you need and download that (or use unicode-range to achieve the same thing dynamically without having to edit the font file)
  2. Probably the biggest plus for me is that you can use @font-face to specify to use a local version of the font if it is available, meaning that users don’t have to load fonts unnecessarily when they’ve already got them installed. Also, this is useful for you when you don’t have internet access but want to keeping work on your site (e.g. if you are on a train or something)

So, I’d say you are largely right, but it’s still worth understanding it, even so :wink:

#3

That makes sense, thank you for your explanation!

#4

You are very welcome!