Optimizing Multiple Google Web Fonts

Question

When loading custom fonts from Google they offer a way for you to optimize them: https://developers.google.com/webfonts/docs/getting_started#Optimizing_Requests

Meaning if you are you using a custom font for just a header, rather than loading the whole font, you can tell it what letters you need so not to load the entire font alphabet. So far so good.

However, in the example it only has one font style. How do you do it with two?

For instance I'm using this to load to styles of a font:

The normal 400 I use for a lot of text, but the 400italic is only used for one short header.

If I do:

Will it load the entire 400 and just the "sample header" for 400italic like I want or will it do something else?

Answer 1

If you're doing character subsetting and trying to combine multiple fonts into one CSS request, then the specified characters need to be the union of all the required characters between all the fonts.

Take a look here: http://jsbin.com/welcome/22005/edit

<link href="http://fonts.googleapis.com/css?family=Inconsolata|Skranji&text=ABCDHIJK" rel="stylesheet">

Two things going above. We're asking for two fonts (Inconsolate and Skranji) and specifying that both fonts should serve characters A-K. If you only need A-D for one, and H-K for another, then you'll have to split the above into two distinct CSS requests.