Many requests to Google font API

Question

From the page source I can see there are two references to fonts.googleapis.com

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,300,400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />

but while page load there are lot of .woff2 file loading from http://fonts.gstatic.com/

I want to know why this is happening?

Answer 1

When you look inside the referenced CSS files, you will see there are multiple font-faces defined. This is what the URL was requesting. A query like Open+Sans:400italic,600italic,700italic,300,400,600,700 means, give me Open Sans in

• 400 italic
• 600 italic
• 700 italic
• 300 normal
• 400 normal
• 600 normal
• 700 normal

The numbers mean font weight.

So only the first CSS file already escalates to 7 font-styles.

The second CSS file has mostly the same fonts defined. Only 3 of them are not covered in the first file. This should sum up to 10 different font-styles.

Open Sans has a lot of script extensions available:

• Cyrillic Extended (cyrillic-ext)
• Latin (latin)
• Greek Extended (greek-ext)
• Greek (greek)
• Vietnamese (vietnamese)
• Latin Extended (latin-ext)
• Cyrillic (cyrillic)

To cover all those combinations, Google creates font-style * script font-face definitions, which results into 70 font-faces each with a different font file (in case of Google Chrome woff2).

To reduce the number of files:

• Make sure you need all those font-styles. You really need all those different font-weights?
• Do you need all the extensions? If you will never display vietnamese or cyrillic characters you do not need to load those fonts.

Both can be individually selected on the Use page of Open Sans.

Answer 2

Sep 2023

@udondan was right

The more font weights you include, the more requests will be made. However, regarding character sets like Cyrillic or Greek, they will only be called if needed from the font file.

You can verify this by opening the 'Inspect' tool in Chrome and selecting 'Font' under the Network tab. Depending on the number of font weights you include, you will receive a corresponding number of requests. If you click the link under the 'Initiator' column, it will take you to the source tab. Whatever font is displayed in the Name column can be found here (Source).

Google servers are known for their speed.

I downloaded the necessary fonts and called them locally versus calling them from the Google server. Notice that both have the same size, and the loading speeds are similar as well.

#	Name	Before (google domain)	Size	After (mydomain)	Size
1	MP6lQ.woff2	fonts.gstatic.com	11.1 KB	mydomain.com	20.4 KB
2	TU1Kg.woff2	fonts.gstatic.com	11.2 KB	mydomain.com	16.1 KB
3	8m9eY.woff2	fonts.gstatic.com	20.1 KB	mydomain.com	16.2 KB

If you use any third-party services and they are also calling the same font family using Google, you will experience more requests. Be cautious.