Attaching multiple webfonts in CSS

caching, css, html, webfonts

Solution

I'm not exactly sure how to interpret "multiple webfonts", so I'll answer two possibilities:

Why are there two font files for different weights of the same font?

That's just how fonts work. Presently, all major font file types only support 1 style or weight of font per each file.

Looking at Arial is a good example. In typical word editors like MS Word, you might be accustomed to selecting `bold` for your font to change its display, which seems like it's just changing something about your font, and not switching to an entirely new one. Behind the scenes, though, it actually is loading an entirely separate font file. Windows computers come with `arial.ttf`, `arialbd.ttf`, `ariali.ttf`, and so on, which as a collection make up Arial, Arial Bold, Arial Italic, and all of their combinations.

In general, the total number of font files you must load for each font is equal to the number of different styles you want for that font.

Why is Webfonts sourcing so many different files for each given weight?

Browser support for `font-face` is limited at this time, with some browsers only supporting certain file-types. This is why each of your font weights sources multiple file types for the same font. For an in-depth look at browser support for the different filetypes, check out this handy guide.

But there's more to say about this when it comes to Web Fonts. If you happen to be a programmer with efficiency in mind, you may neglect using Google's suggested implementation of their webfonts, which looks something like this:

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans|Lora|Roboto|Lobster+Two'>

Your might think to copy the code from URL and paste it into your style sheet, in hopes that you'd decrease the load time of your page by cutting out an HTTP request. But that might not necessarily be the case!

It happens that the Google webfont server only gives you the font that you need when called through the `link` element.

So, to take an example, you'll never be be served the `.eot` file if you're in Firefox. It only gives you the font file that will work in your particular browser. To top it off, calls to the webfont cdn are blazingly fast.

For more on how this works, refer to the Google webfonts docs.

And for your other questions:

Is attaching multiple webfonts in CSS efficient?

Is it maximally efficient? Well, no. To be as efficient as possible, stick to web-safe fonts that the user already has on their machine. But the performance hit for loading from Google Webfonts shouldn't be noticeable given today's internet speeds, so I wouldn't worry about it.

How cache will work in this case?

As usual, the browser will handle caching. Since many sites are using Google Web Fonts these days (especially Open Sans), there's a fair chance that the user will have the font cached on their machine.

Problem

Original source