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' />Written by Jacob Lichner
Related protips
3 Responses
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
·
Google actually explicitly suggests doing this: https://developers.google.com/fonts/docs/getting_started#specifying_font_families_and_styles_in_a_stylesheet_url
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Performance
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#