How does web font usage vary by country?

I was running an audit of a Japanese website today and was surprised to see that it loads over 1 MB of fonts. Here’s the content breakdown provided by WebPageTest:

MIME Type Bytes Uncompressed
image 5,437,450 5,437,450
font 1,025,064 1,025,064
js 287,016 313,603
css 143,103 143,103
html 15,828 15,048
other 13,882 13,882

Yeah, images are the biggest issue (5.5 MB!) but this post is specifically about the fonts. Here’s the info we have about each font file:

Resource Bytes Downloaded
…/fonts/NotoSansCJKjp-DemiLight.woff2 483.8 KB
…/fonts/NotoSansCJKjp-Medium.woff2 487.2 KB
`https://fonts.gstatic.com/s/roboto/v18/…qEu92Fr1Mu4mxK.woff2 15.0 KB
`https://fonts.gstatic.com/s/roboto/v18/…2Fr1MmWUlfBBc4.woff2 15.1 KB

So there were two Roboto files loaded from the Google Fonts CDN for a total of only 30 KB. The big issue is the Noto Sans CJK files.

Noto Sans CJK and Noto Serif CJK comprehensively cover Simplified Chinese, Traditional Chinese, Japanese, and Korean in a unified font family. This includes the full coverage of CJK Ideographs with variation support for 4 regions, Kangxi radicals, Japanese Kana, Korean Hangul, and other CJK symbols and letters in the Basic Multilingual Plane of Unicode. It also provides limited coverage of CJK Ideographs in Plane 2 of Unicode as necessary to support standards from China and Japan.

https://www.google.com/get/noto/help/cjk/

Also:

…be aware that the web latency for large fonts, such as for Noto Sans CJK, can be large.

https://www.google.com/get/noto/help/guidelines/

In a State of the Web episode on web fonts with my guest Dave Crossland, Dave talked about the challenges of loading CJK fonts and how they can be 100x larger than a European font. Here’s the relevant clip and transcript:

The biggest challenge has been for Chinese, Japanese, and Korean fonts. A typical font for Indian languages can maybe be two or three times larger than a European font. But for East Asia, it can be a hundred times bigger.

That was a big wind-up but that leads me to my web transparency question: if CJK fonts are so huge, how does the median number of font KB compare across countries? We should expect to see Chinese, Japanese, and Korean websites have more font bytes, right?

I adapted the following query from the CrUX Cookbook. The country-specific CrUX tables contain origins for popular websites visited by Chrome users. Because the HTTP Archive crawls the home pages of all CrUX origins, we can JOIN these datasets together in BigQuery and answer our web transparency question.

#standardSQL
WITH
  countries AS (
  SELECT *, 'ad' AS country_code, 'Andorra' AS country FROM `chrome-ux-report.country_ad.201903` UNION ALL
  SELECT *, 'ae' AS country_code, 'United Arab Emirates' AS country FROM `chrome-ux-report.country_ae.201903` UNION ALL
  SELECT *, 'af' AS country_code, 'Afghanistan' AS country FROM `chrome-ux-report.country_af.201903` UNION ALL
  SELECT *, 'ag' AS country_code, 'Antigua and Barbuda' AS country FROM `chrome-ux-report.country_ag.201903` UNION ALL
  SELECT *, 'ai' AS country_code, 'Anguilla' AS country FROM `chrome-ux-report.country_ai.201903` UNION ALL
  SELECT *, 'al' AS country_code, 'Albania' AS country FROM `chrome-ux-report.country_al.201903` UNION ALL
  SELECT *, 'am' AS country_code, 'Armenia' AS country FROM `chrome-ux-report.country_am.201903` UNION ALL
  SELECT *, 'ao' AS country_code, 'Angola' AS country FROM `chrome-ux-report.country_ao.201903` UNION ALL
  SELECT *, 'ar' AS country_code, 'Argentina' AS country FROM `chrome-ux-report.country_ar.201903` UNION ALL
  SELECT *, 'as' AS country_code, 'American Samoa' AS country FROM `chrome-ux-report.country_as.201903` UNION ALL
  SELECT *, 'at' AS country_code, 'Austria' AS country FROM `chrome-ux-report.country_at.201903` UNION ALL
  SELECT *, 'au' AS country_code, 'Australia' AS country FROM `chrome-ux-report.country_au.201903` UNION ALL
  # All ~200 countries...
  # See the link to the query below for the unabridged version.
)

SELECT
  _TABLE_SUFFIX AS client,
  country,
  COUNT(0) AS urls,
  ROUND(APPROX_QUANTILES(bytesFont, 1001)[OFFSET(501)] / 1024, 2) AS median_font_bytes
FROM
  countries
JOIN
  `httparchive.summary_pages.2019_02_01_*`
ON
  CONCAT(origin, '/') = url
GROUP BY
  client,
  country
client country median_font_bytes urls
desktop China 0 23138
desktop Japan 14.54 560364
desktop Korea 70.35 143057
mobile China 1.17 13342
mobile Japan 10.54 653001
mobile Korea 51.29 131356

Query | Results

Asia Desktop:
image

Asia Mobile:
image

So according to the stats in the Page Weight report, the median font bytes for desktop/mobile is around 100 KB. China and Japan have relatively few font bytes, although China’s sample size is much smaller. Interestingly, Korea has more font bytes than other CJK websites, at 70 KB for desktop.

So why would CJK websites load fewer font bytes? Maybe it’s because the web font files are just so prohibitively huge that it’s not even worth it and they rely on system fonts. Korea is known to have some of the fastest internet in the world, so maybe the download cost is more tolerable. Does anyone have any other insights either from the data or real world experience?

1 Like

Interestingly, the http archive test machines (and WebPageTest machines) have all of the Noto system fonts installed so a font rule that prefers a local version and falls back to webfont is even more important for CJK.

1 Like

Oh, yeah that’s interesting. How and why is Noto used locally? I’d imagine it’s fairly unusual for end users to have it installed and might skew the lab results. Should run a test to be sure…

It is installed locally under the assumption that people in the CJK countries will have local system fonts installed and not just latin.

Much as I like good typography, this is really proof that web-fonts really are a solution in search of a problem. One of my customers is a huge fan of Helvetica and insists on using it for all corporate websites. However, waivers have been given to the east Asian websites precisely because of the problem. Add to this, of course, the inbuilt mismatch between the idea of a typeface designed for alphabets with ideograms and you see “bias” at work. Use system fonts wherever you can. Where they really must be used, it is possible to dynamically assess the characters required for a site or even for a single page and create a much smaller font file: the size is generally down to the need for a lot of very rarely used glyphs.

Fortunately, some of the proposed improvements to CSS should reduce the need for web fonts in the future.

I think we can agree that websites should have the control to stylize text to fit their brand/identity and ensure that it looks consistent across devices. It’s on them to ensure that they do it responsibly and efficiently, just like all other aspects of web dev (image optimization, JS usage, mobile friendliness, etc).

Can you elaborate on why you think this is a case for system fonts? For example, Roboto looks great in Latin languages and doesn’t support CJK. That’s by design and why Noto exists. Web devs can serve one or the other using localization techniques.

Also, anecdotally, I’ve heard that CJK system fonts can have poor legibility and web fonts are often the preferred way to counter that. I’ll try to loop in some people with more familiarity on the subject for their perspectives.

I actually think things like variable fonts and color fonts will increase the desire for web fonts, giving developers and designers more control over how their text appears.

Anyway, thanks for sharing your perspective. It’s always great to hear other POV and have a healthy discussion.

I believe Google Fonts is blocked in China. Wouldn’t that be a big part of the issue here? That was my real world experience a couple years ago, and I don’t think that’s changed.

That wouldn’t explain why it’s so low in Japan however.

All devices have system fonts for the relevant character sets and local fonts will always be faster… Typefaces for Latin (and Cyrillic) won’t work for all languages. For example, some characters must have serifs so it doesn’t make sense to try to force one on them, though there are usually equivalents.

Browsers for years have been adept at automatic substitution though mixing say Arial and CJK on the same page can cause problems, at least it used to look odd on Windows when did this.

We really need the concept of performance budgets for typefaces, say 40KB max. Variable fonts are pretty neat but I suspect we’ll see more and more functionality moved into CSS so that you only “need” to ship minimal typeface definitions and let the browser do faux bold, faux italic, etc. Designers will hate it but it’s the best approach for the user. I know of one site where 7 fonts of the same typeface are used for the homepage and this is about 50% of the pageload before onload.

And, working with multiple languages including German which is famous for long words: I’d really like to see hyphenation support improve in browsers, less glamourous but far more important in my view. Fortunately, Chromium is finally getting it but the results in all browsers still leave a lot to be desired.

Revisiting this query using the materialized country data table, which greatly simplifies the query and costs only 1 GB to process.

SELECT
  country,
  _TABLE_SUFFIX AS client,
  COUNT(0) AS urls,
  ROUND(APPROX_QUANTILES(bytesFont, 1000)[OFFSET(500)] / 1024, 2) AS median_font_bytes
FROM (
  SELECT
    DISTINCT origin,
    `chrome-ux-report`.experimental.GET_COUNTRY(country_code) AS country
  FROM
    `chrome-ux-report.materialized.country_summary`
  WHERE
    yyyymm = 202006)
JOIN
  `httparchive.summary_pages.2020_06_01_*`
ON
  CONCAT(origin, '/') = url
GROUP BY
  client,
  country
ORDER BY
  country,
  client

Results

Median KB of fonts per page, by country:

(China has 0 bytes of fonts, so it was omitted)

And it’s interesting to compare this with last year’s data to see how the median font weight changed:

country May 2019 June 2020 1 Year Diff (KB)
Afghanistan 69.93 75.78 5.85
Åland Islands 76.61 98.93 22.32
Albania 76.87 89.27 12.4
Algeria 69.07 85.18 16.11
American Samoa 60.21 76.02 15.81
Andorra 89.07 104.28 15.21
Angola 78.39 88.38 9.99
Anguilla 45.83 89.89 44.06
Antigua and Barbuda 63.11 89.77 26.66
Argentina 85.03 101.3 16.27
Armenia 70.21 79.75 9.54
Aruba 76.21 89.77 13.56
Australia 92.07 104.13 12.06
Austria 86.62 101.14 14.52
Azerbaijan 65.61 83.38 17.77
Bahamas 81.01 96.86 15.85
Bahrain 79.72 98.77 19.05
Bangladesh 66.39 84.8 18.41
Barbados 79.29 97.93 18.64
Belarus 75.35 92.29 16.94
Belgium 86.8 102.81 16.01
Belize 71.85 89.77 17.92
Benin 79.89 98.85 18.96
Bermuda 72.97 92.69 19.72
Bhutan 66.27 79.38 13.11
Bolivia (Plurinational State of) 75.68 94.6 18.92
Bonaire, Sint Eustatius and Saba 66.27 87.96 21.69
Bosnia and Herzegovina 91.82 108.12 16.3
Botswana 66.43 91.77 25.34
Brazil 88.97 101.89 12.92
British Indian Ocean Territory 11.75 0 -11.75
Brunei Darussalam 63.11 87.72 24.61
Bulgaria 79.01 95.59 16.58
Burkina Faso 63.92 95.1 31.18
Burundi 63.92 85.09 21.17
Cabo Verde 77.72 86.8 9.08
Cambodia 62.26 67.57 5.31
Cameroon 75.35 94.15 18.8
Canada 90.35 102.81 12.46
Cayman Islands 84.87 97.72 12.85
Central African Republic 30.06 63.92 33.86
Chad 30.06 90.24 60.18
Chile 85.84 103.93 18.09
China 0 0 0
Colombia 84.93 104.28 19.35
Comoros 62.88 89.77 26.89
Congo 71.85 96.72 24.87
Congo, Democratic Republic of the 71.29 92.01 20.72
Cook Islands 30.06 62.25 32.19
Costa Rica 81.8 95.72 13.92
Côte d’Ivoire 75.35 93.33 17.98
Croatia 90.59 107.71 17.12
Cuba 72.49 98.15 25.66
Curaçao 72.33 88.64 16.31
Cyprus 87.33 107.1 19.77
Czechia 77.93 90.8 12.87
Denmark 86.07 98.05 11.98
Djibouti 61.46 78.9 17.44
Dominica 59.56 85.05 25.49
Dominican Republic 78.35 94.54 16.19
Ecuador 79.38 98.39 19.01
Egypt 76.71 95.3 18.59
El Salvador 76.59 95.3 18.71
Equatorial Guinea 49.95 66.38 16.43
Eritrea 30.06 30.06 0
Estonia 82.67 92.17 9.5
Eswatini 71.85 92.65 20.8
Ethiopia 30.06 84.78 54.72
Falkland Islands (Malvinas) 75.35 43.58 -31.77
Faroe Islands 72.49 88.35 15.86
Fiji 88.48 87.72 -0.76
Finland 83.8 100.38 16.58
France 77.94 98.21 20.27
French Guiana 65.36 92.6 27.24
French Polynesia 72.49 87.48 14.99
Gabon 49.95 93.14 43.19
Gambia 82.13 76.07 -6.06
Georgia 80.52 91.48 10.96
Germany 77.94 96.72 18.78
Ghana 66.27 96.33 30.06
Gibraltar 93.55 102.73 9.18
Greece 72.11 107.83 35.72
Greenland 70.56 90.24 19.68
Grenada 82.58 90.65 8.07
Guadeloupe 78.98 99.33 20.35
Guam 77.94 85.52 7.58
Guatemala 71.85 96.97 25.12
Guernsey 66.27 88.78 22.51
Guinea 30.17 91.77 61.6
Guinea-Bissau 64.2 78.77 14.57
Guyana 66.27 85.31 19.04
Haiti 75.36 88.35 12.99
Honduras 30.15 95.51 65.36
Hong Kong 84.73 30.86 -53.87
Hungary 93.55 101.05 7.5
Iceland 77.28 104.85 27.57
India 75.35 94.72 19.37
Indonesia 95.58 90.24 -5.34
Iran (Islamic Republic of) 63.11 104.07 40.96
Iraq 93.46 86.38 -7.08
Ireland 70.22 107.59 37.37
Isle of Man 86.16 87.96 1.8
Israel 86.98 102.37 15.39
Italy 76.74 101.23 24.49
Jamaica 14.54 93.59 79.05
Japan 76.69 27.97 -48.72
Jersey 78.34 92.75 14.41
Jordan 74.8 97.09 22.29
Kazakhstan 82.09 90.15 8.06
Kenya 30.06 95.89 65.83
Kiribati 70.35 30.17 -40.18
Korea, Republic of 78.34 140.1 61.76
Kosovo 75.35 97.05 21.7
Kuwait 65.06 98.24 33.18
Kyrgyzstan 47.61 82.79 35.18
Lao People’s Democratic Republic 79.81 72.12 -7.69
Latvia 75.36 92.65 17.29
Lebanon 46.47 92.67 46.2
Lesotho 59.83 90.23 30.4
Liberia 75.35 83.28 7.93
Libya 64.12 98.77 34.65
Liechtenstein 84.95 99.95 15
Lithuania 87.79 99.36 11.57
Luxembourg 16.89 101.33 84.44
Macao 88.46 17.69 -70.77
Madagascar 69.63 84.52 14.89
Malawi 66.27 89.77 23.5
Malaysia 66.36 75.58 9.22
Maldives 70.56 81.88 11.32
Mali 65.36 91.53 26.17
Malta 83.8 97.78 13.98
Marshall Islands 30.06 73.64 43.58
Martinique 84.28 103.23 18.95
Mauritania 61.13 79.68 18.55
Mauritius 73.43 87.04 13.61
Mayotte 70.56 88.44 17.88
Mexico 83.25 100.56 17.31
Micronesia (Federated States of) 30.06 57.62 27.56
Moldova, Republic of 75.35 92.78 17.43
Monaco 67.47 95 27.53
Mongolia 73.06 76.85 3.79
Montenegro 84.64 113 28.36
Montserrat 30.06 62.25 32.19
Morocco 75.36 95.67 20.31
Mozambique 71.85 84.78 12.93
Myanmar 63.53 73.59 10.06
Namibia 72.49 92.21 19.72
Nauru 30.06 93.86 63.8
Nepal 73.46 84.78 11.32
Netherlands 89.35 104.41 15.06
New Caledonia 78.62 90.52 11.9
New Zealand 88.57 97.83 9.26
Nicaragua 75.35 91.64 16.29
Niger 62.41 75.47 13.06
Nigeria 81.95 99.61 17.66
North Macedonia 71.85 99.34 27.49
Northern Mariana Islands 90.71 87.15 -3.56
Norway 74.25 99.6 25.35
Oman 70.22 86.87 16.65
Pakistan 71.85 85.66 13.81
Palau 84.26 75.35 -8.91
Palestine, State of 81.64 97.14 15.5
Panama 63.92 98.98 35.06
Papua New Guinea 80.81 78.24 -2.57
Paraguay 82.11 98.3 16.19
Peru 75.35 98.96 23.61
Philippines 91.54 83.14 -8.4
Poland 87.5 104.31 16.81
Portugal 83.44 99.02 15.58
Puerto Rico 82.62 99.4 16.78
Qatar 82.35 93 10.65
Réunion 85.98 100.2 14.22
Romania 76.25 103.45 27.2
Russian Federation 83.8 93.78 9.98
Rwanda 30.06 92.14 62.08
Saint Barthélemy 66.27 93.86 27.59
Saint Helena, Ascension and Tristan da Cunha 65.17 30.06 -35.11
Saint Kitts and Nevis 71.85 87.48 15.63
Saint Lucia 66.27 94.23 27.96
Saint Martin (French part) 30.06 87.96 57.9
Saint Pierre and Miquelon 59.83 57.62 -2.21
Saint Vincent and the Grenadines 66.27 89.77 23.5
Samoa 77.39 87.96 10.57
San Marino 45.83 105.79 59.96
Sao Tome and Principe 87.28 73.9 -13.38
Saudi Arabia 74.9 106.79 31.89
Senegal 86.47 90.58 4.11
Serbia 52.14 103.46 51.32
Seychelles 60.21 73.9 13.69
Sierra Leone 73.43 84.07 10.64
Singapore 71.85 83.05 11.2
Sint Maarten (Dutch part) 80.86 93.59 12.73
Slovakia 93.91 99.22 5.31
Slovenia 30.06 112.19 82.13
Solomon Islands 72.13 66.16 -5.97
Somalia 83.44 90.24 6.8
South Africa 37.36 99.94 62.58
South Sudan 90.22 73.12 -17.1
Spain 65.3 104.98 39.68
Sri Lanka 80.71 77.5 -3.21
Sudan 60.21 102.49 42.28
Suriname 30.65 76.02 45.37
Svalbard and Jan Mayen 62.26 93.86 31.6
Sweden 88.58 98.53 9.95
Switzerland 89.02 101.44 12.42
Syrian Arab Republic 75.35 98.49 23.14
Taiwan, Province of China 15.36 30.08 14.72
Tajikistan 56.96 75.35 18.39
Tanzania, United Republic of 71.61 85.41 13.8
Thailand 68.58 85.69 17.11
Timor-Leste 48.81 67.98 19.17
Togo 83.44 98.19 14.75
Tonga 42.32 43.33 1.01
Trinidad and Tobago 78.8 95.78 16.98
Tunisia 77.65 95.92 18.27
Turkey 92.71 109.4 16.69
Turkmenistan 54.89 72.58 17.69
Turks and Caicos Islands 66.27 84.2 17.93
Tuvalu 30.06 16.12 -13.94
Uganda 71.29 84.92 13.63
Ukraine 75.35 92.73 17.38
United Arab Emirates 86.11 101.01 14.9
United Kingdom of Great Britain and Northern Ireland 90.13 103.95 13.82
United States of America 90.71 105.21 14.5
Uruguay 79.68 98.49 18.81
Uzbekistan 62.64 75.55 12.91
Vanuatu 30.06 55.43 25.37
Venezuela (Bolivarian Republic of) 75.35 91.84 16.49
Viet Nam 87.68 97.2 9.52
Virgin Islands (British) 30.06 92.5 62.44
Virgin Islands (U.S.) 91.45 103.16 11.71
Western Sahara 66.27 77.03 10.76
Yemen 83.44 95.3 11.86
Zambia 71.29 90.24 18.95
Zimbabwe 77.93 94.87 16.94