CODEWITHSUNDEEP
htmlcsscachingwebfonts
Nawal
Nawal

Reputation: 55

Attaching multiple webfonts in CSS

Google has recently added an Arabic font to its Webfont collection. In order to use that I have to use http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css, which will be the following codes:

/* 
 * Droid Arabic Naskh (Arabic) http://www.google.com/webfonts/earlyaccess
 */
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.ttf) format('truetype');
}

Why are they doing it like this? Is attaching multiple webfonts in CSS efficient? I think each font is about 50Kb. How cache will work in this case?

Thanks
Nawal

Upvotes: 4

Views: 1451

Answers (2)

jamesplease
jamesplease

Reputation: 12869

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.

Upvotes: 3

Adrift
Adrift

Reputation: 59799

If I understand your question correctly then its not so much about efficiency as it is variety ..

The purpose is to allow different font-faces for the Droid Arabic Naskh font-family ... Not every font-family has a font-face to represent each font-weight or related font-property and adding those rules yourself can be risky as some browsers (Safari iOS, Chrome 25) can double-italicize and double-bold certain glyphs that are already bold/italic by default. Google is simply providing the font-faces for this family. Those are the only faces available for use.

Fonts are also cached the same way other web resources are cached

Upvotes: 1

Related Questions