lxho4g
Last Updated: February 25, 2016
·
2.544K
· jdlich

Combine Google Fonts to Save on HTTP Requests

Saving HTTP requests is all the rage today. So, here's how to save a few more perhaps if you use Google Web Fonts.

Old Way

Instead of using a link tag for each Google font:

<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Istok+Web:400,700' />

New Way

Combine them in a single request using the pipe character:

<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic|Istok+Web:400,700' />

2 Responses
Add your response

14474

This might make your own site's page weight look better but it will damage cache precision across the web, I think Google hasn't publicly documented this concatenation feature for a reason.

over 1 year ago ·
14482

Interesting note, jrz! If you have any resources with more detail, I'd be interested in learning more. Thanks for the comment.

over 1 year ago ·