Last Updated: January 21, 2021
· 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=',700,400italic' />
<link rel="stylesheet" href=',700' />

New Way

Combine them in a single request using the pipe character:

<link rel="stylesheet" href=',700,400italic|Istok+Web:400,700' />

3 Responses
Add your response

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 ·

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 ·