Google Fonts loading explained

Question

I'd like to know, how google fonts finds out, which fonts to load. For example when I use this inside my CSS

@import '//fonts.googleapis.com/css?family=Roboto:300';

it returns a CSS that is interpreted immediately (the loading of this resource even blocks the browser rendering afaik):

/* cyrillic-ext */
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 300;
 src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.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(http://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
// ...and some more

I always thought, when you provide a url(...) inside CSS, the browser loads this resource immediately.

However, when you open this pen http://codepen.io/anon/pen/EgkvEr

@import '//fonts.googleapis.com/css?family=Roboto:300';
body {
 font-family: 'Roboto';
}

<h1>Hello äöüß</h1>

and have a look at your network tab (maybe clear your cache) you can see that it loads exactly two resources: http://fonts.googleapis.com/css?family=Roboto:300 and then http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2 which is the normal latin range (defined at the bottom of the loaded font css):

/* latin */
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 300;
 src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.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, U+E0FF, U+EFFD, U+F000;
}

So, does the browser look at what characters you use, and THEN load the used font? Or does it depend on your browser settings? I can't find any resource that documents this behaviour (or I'm searching for the wrong keyword). I suspect it has something to do with the unicode-range: at the bottom of the CSS.

Answer 1

1. The browser reads the @import instruction which tells him to load this CSS page served by Google: http://fonts.googleapis.com/css?family=Roboto:300. This page is loaded instantly.

2. In that page, there are some url() instructions which tell the browser where the font files are located. The browser doesn't download these fonts until it needs them. For example, if that font is never used by any element, the browser won't download it.

I suspect it has something to do with the unicode-range: at the bottom of the CSS.

Yes, that is why. unicode-range specifies which class of characters is included in that font (for example, cyrillic characters). If there isn't any character in that rage inside of your page, those fonts won't be downloaded.

For reference: https://en.wikipedia.org/wiki/Unicode_block

• randominstanceOfLivingThing: Another reference - developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…

Answer 2

1. Browser performs page layout and determines which font variants are required to render specified text on the page.
2. For each required font the browser checks if the font is available locally.
3. If the file is not available locally, it iterates over external definitions:
• If a format hint is present the browser checks if it supports it before initiating the download, and otherwise advances to the next one.
• If no format hint is present, the browser downloads the resource.

Google web font optimization