Too many fonts loading from google fonts

Question

I have embedded only one font from google fonts. this is the embed code:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 

but if I am looking at the network monitor there are 3 font elements loaded, and 1 css from google fonts. this is the list of fonts that I`m getting:

Status  Method  Domain  File    Cause   Type    Transfered  Size

200 GET fonts.googleapis.com    css?family=Open+Sans&display=swap   stylesheet  css 557 B   2.53 KB
200 GET fonts.gstatic.com   mem8YaGs126MiZpBA-UFVZ0b.woff2  font    woff2   14.04 KB    14.04 KB
200 GET fonts.gstatic.com   mem8YaGs126MiZpBA-UFW50bbck.woff2   font    woff2   11.05 KB    11.05 KB
200 GET fonts.gstatic.com   mem8YaGs126MiZpBA-UFWp0bbck.woff2   font    woff2   5.89 KB 5.89 KB

Beside this I have a whole font list in attached css.

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Why is that?

Answer 1

I have embedded only one font from google fonts. this is the embed code:

This isn't correct, you embedded multiple typefaces and character sets from a font family. A font isn't a single thing:

• font family ( Arial )
  • typeface ( Arial Regular )
  • typeface ( Arial Italic )
  • typeface ( Arial Bold )
  • typeface ( Arial Bold Italic )

Where each typeface is then split further into further sub-files that contain different character sets.

If we look at the CSS file, there are multiple typefaces being loaded. They all implement a different part of the Open Sans font, specifically different character sets:

• Open Sans cyrillic-ext
• Open Sans cyrillic
• Open Sans greek-ext
• Open Sans greek
• Open Sans vietnamese
• Open Sans latin-ext
• Open Sans latin

Each entry declares a range of unicode characters the file supports.

For example without this file Vietnamese characters won't render:

https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWp0bbck.woff2

And without this file characters in the european latin character space won't render:

https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2

Likewise, if you had chosen the italic, bold, bold italic, etc styles, a file would have been added for each.

Finally, you didn't tell the browser to load the fonts, you told the browser to load a stylesheet, and the stylesheet loaded the fonts, so that's another extra file.

Why Doesn't It Bundle Them Into A Single File?

This wouldn't save any filespace over loading them separately, and with HTTP/1 it might load slower as it can't transfer in parallel.

However, if I'm writing a site purely in Cyrillic, do I really need Vietnamese characters in the font? By choosing only the scripts you intend to use, you save bandwidth and speed up font loading. This is why Google gave you a file for each script, rather than bundling it all into a single file.

Transferring lots of small files this way gives better performance than transferring one single large file thanks to HTTP/2