Menu
I'm using three Google fonts in a project, where the two first are for headings and regular text, and the third is just for the menu. So, in the menu, I only use a set of letters, all uppercase. When I import the Google fonts "css" I can reduce the size of the third font by 85% if I only call the letters I need, using the "text" variable in the URL:
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);
This is great, but when I add the other fonts to this URL (in order to save calls), the "text" variable affects all the fonts in the URL. So, the solution is to consume one more call and ask for the fonts separately, like this:
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);
@import url(http://fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300);
Now, what I'd like to do, is to retrieve all the fonts in one call, but only a set of characters for one specific font. In other words, combine the previous calls in one. Reading the Google fonts API, I assume it's not possible, but still, I'm asking if anyone knows of a solution for this.
Thank you in advance!
892
There's no way to do that yet. Maybe because the optimized font requests are still in beta.
What I recommend is to use requests in the <head> instead of using inside CSS with @import. From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. If both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time.
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT">
<link rel="stylesheet" href="//fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300">
Even with one more request, the page will load faster than with @import.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
