All geek questions in one place

Selective use of the text variable in Google font calls

I use three Google fonts in a project, where the first two are for headings and plain text, and the third is just for menus. So, in the menu I use only a set of letters, all in uppercase. When I import Google fonts "css", I can reduce the size of the third font by 85% if I only name the letters that 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 other fonts to this url (to save the calls), the "text" variable affects all the fonts in the url. So the solution is to use another call and request the fonts separately, for example:

 @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 would like to do is to get all the fonts in one call, but only the character set for one particular font. In other words, combine previous calls into one. Reading the Google Fonts API, I assume this is not possible, but still I ask if anyone knows about this solution.

Thank you in advance!

+6
source share
2 answers

There is no way to do this yet. Perhaps because optimized font requests are still in beta.

I recommend using queries in <head> instead of using CSS with @import . In terms of page speed, @import from a CSS file is almost never used, as it can prevent stylesheets from loading at the same time. If both stylesheets are specified in <link> elements on the HTML main page, both of them can be loaded 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 .

+2
source

While we are limited to a few requests, a service employee can cache both responses so that they are instantly resolved on subsequent page loads.

0
source

Source: https://habr.com/ru/post/952746/

More articles:


All Articles