Is it possible to reduce Google Web Fonts to one request if I'm using multiple fonts?

Question

I ran a speed test on my website and one of the suggestions was to reduce my external requests. I am using 3 Google Web Fonts, in effect 3 separate requests. Is it posible to combine these into 1 request?

Reld

Answer 1

You can combine several fonts with just one call using the | character. Example:

<link href='//fonts.googleapis.com/css?family=Cantarell|Terminal+Dosis' rel='stylesheet' type='text/css'>

Montes

Answer 2

Yes you can load multiple fonts in single request like

<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Lato:300,400,700,900'>

Interscholastic

Answer 3

Aren't Fonts (like image assets, JSON objects, or videos) separate resources that need individual requests?

Urinalysis

Answer 4

You can avoid the three requests by embedding the fonts in data: URIs inside the CSS - at least in IE9+ and most modern browsers.

note: they also work in IE8, but are limited to 32KB

note2: obviously, you won't get the benefits of the Google CDN, since you'll have to serve the fonts inside your CSS...

Chantey

I imagine the benefits of the Google CDN are > than loading them on my server + the 3 requests? – Reld

Hard to say; Google's CDN will almost surely have higher bandwidth and lower latency. Moreover base64-encoded data take up more space. OTOH, it will require an additional DNS lookup and 3 requests instead of one (or zero, if you already have a CSS file). Benchmarking is the only way to know. – Chantey