Google fonts loading optimisation and caching

Question

Google's page speed test shows only one problem:

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://fonts.googleapis.com/css?family=Roboto:300,400

The fonts being loaded as fonts.google.com recommends:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

Within <head /> tag.

As far as i know, there is no way to control google's fonts caching and also, this url's output depends on user agent, so it doesn't make sense to distribute the fonts locally. So, the question is: what do i suppose to do with that? How do i satisfy google's speed test?

Have you seen this lib https://github.com/typekit/webfontloader? Maybe it can help you - google fonts example is the first in the "get started" section. — Stanislav Kvitash, May 30 '17 at 10:12
Have you tested with the @import method? This could be more efficient for your application - it did explicitly ping 'above-the-fold content'. If not, something else may be at play here; please show more of this page's code. — Dr Upvote, May 31 '17 at 18:57
I am not sure, but IMHO the warning message is dealing with the position of tag. You can place it before the ending
and the warning dissmiss. But you will have rendering flash after loading the site. — Eduard Void, Jun 01 '17 at 09:11
Cacheable Google Fonts: https://stackoverflow.com/a/57073920/369005 — Hamid Sarfraz, Oct 16 '19 at 23:56

score 1 · Answer 1 · answered Jun 06 '17 at 08:04

1

So far i know ist the best solution today if you use Fontloader. It loads first a short .js script and late the font async.
Tipp: Use font-family: 'Roboto', 'sans serif'; async has the problem the font type is switching after the site is rendered. So the user see a short font switch like a flash. If you use sans serif as fallback the switch is not so big.
Or use .wf-active

answered Jun 06 '17 at 08:04

Lovntola

1,409
10
31

2

Keep in mind: https://fonts.gstatic.com/xxx is cached by many browser for months. https://fonts.googleapis.com/xxx only for 24h to fast support of font changes. – Lovntola Jun 06 '17 at 08:10

score 1 · Answer 2 · answered Jun 06 '17 at 09:55

data:font with fallback needed, load on footer. That will give result like mine :

This is example CSS for fallback, else may fail on some device :

@font-face {
 font-family: 'Arial'; /* Do Proper Naming */
 src: url('Arial.eot'); /* For IE 5-8 */
 src: local('?'), /* It is called smile hack to promote CSS to UTF-16 */
 url(data:font/truetype;charset=utf-8;base64,) format('truetype'), /*base64 encoded font IE9, Safari 3.1+ FF 3.5+ Chrome 4.0+*/
 url('Arial.svg#123XYZ') format('svg'); /* iPad, iPhone with OS less than or equal to 4.1 */
 font-weight: normal;
 font-style: normal;
}

I wrote that -- https://thecustomizewindows.com/2013/10/base64-encoding-and-font-css/ That CSS is from an expert developer whom I paid, font developer. Read my guide, test that website's source code, use in the same way.

score 0 · Answer 3 · answered Jun 01 '17 at 14:24

0

I guess loading fonts asynchronously can resolve the issue. I found an interesting article, may be it can help you font loading asynchronously.

answered Jun 01 '17 at 14:24

vijayscode

1,905
4
21
37

score 0 · Answer 4 · answered Jun 03 '17 at 04:56

Since you cannot control Googles headers (including expiration headers), I can see only one solution – download these two stylesheets and fonts to your own hosting server, change HTML tags accordingly.

Then, you can set expiration headers as you wish.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Download this .woff2 file and save it anywhere on your webserver. Copy & paste this piece of stylesheet into any of your own CSS files or HTML. Change the link from https://fonts.googleapis.com to your new URL.

Don't do it. This files type are depending on the browser and his font support. There a four fonts type the system switch depending on the browser. — Lovntola, Jun 06 '17 at 07:57
This answer is copied almost verbatim from https://stackoverflow.com/a/29091105/2838033 — mechalynx, Sep 15 '17 at 18:19

score 0 · Answer 5 · answered Apr 30 '23 at 23:42

Locally hosting the css and fonts speeds up a site by a significant margin -- at least for the "initial page load" view as calculated by pagespeed.

IMHO its not the CDN but the CSS generation. Googlefonts seems to be running a script to generate the unique CSS for the user's browser. Im guessing its swamped by constant traffic and, or written in php. Lol kidding its 2023 it's gotta be node.

Woff has a 100% Browser Compatibility Score as of 2023-03-20 therefore using woff at this point by itself should be fine. The existence of 5 different font formats regardless. Woff2 has a 92 score with low support for IE.

Lacking an IE 11 browser file use the following User-Agent string in curl or other url agent to obtain the css with a link to the woff file.

"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko"

Or use google-webfonts-helper that makes the download job easy.

Google fonts loading optimisation and caching

5 Answers5