Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

Our Fonts folder is too big, we need a good solution to cut it down #542

Closed
ianbelanger79 opened this issue Sep 25, 2019 · 15 comments
Closed
Labels

Comments

@ianbelanger79
Copy link
Contributor

We are using the Inter variable font, which is great for most browsers. However, since we have to support IE11 and earlier versions of Edge, we must include over 20 Inter font files.

We need to figure out a good solution to cut down our current themes folder which is over 3MB.

@ianbelanger79
Copy link
Contributor Author

IE11 without Inter font
ie11-without-inter

IE11 with Inter font
ie11-with-inter

@andersnoren
Copy link
Contributor

andersnoren commented Sep 25, 2019

We've discussed only including the variable fonts in the theme, and using a stack of system fonts in browsers that do not have support for variable fonts. You can find a list of browsers without variable fonts support here).

Only including the variable fonts would bring the size of the Inter folder down to 470 KB. Visitors using older browsers would be bit worse off typographically (as in the IE11 screen capture without Inter above), but they would at least get smaller page sizes in the bargain.

@ntwb
Copy link
Member

ntwb commented Sep 25, 2019

I presume #492 reduced the size of the font-stack somewhat?

@nielslange
Copy link
Collaborator

@ntwb I'm afraid that #492 didn't really decrease the total font size.

These will be the folder sizes once #118 got merged:

160K    Cairo
400K    Noto_Sans
5.6M    Noto_Sans_HK
4.3M    Noto_Sans_JP
2.1M    Noto_Sans_KR
7.9M    Noto_Sans_SC
5.4M    Noto_Sans_TC
148K    font-awesome
3.0M    inter

Please note that the following fonts will only be loaded as a non-latin fallback font when required:

  • Cairo
  • Noto_Sans
  • Noto_Sans_HK
  • Noto_Sans_JP
  • Noto_Sans_KR
  • Noto_Sans_SC
  • Noto_Sans_TC

cc: @ianbelanger79 & @andersnoren

@joyously
Copy link

There was someone in #core today, saying that they tried to install the Beta to test, and it timed out halfway through the download (looked like ~10meg out of ~20meg). The zip for WordPress has increased in size with every release, but it shouldn't be larger mostly because of the theme's fonts!

Please just use the fonts that the admin already uses or the generic sans-serif and serif that work for every language (the user gets what they already have chosen in their browser).

@nielslange
Copy link
Collaborator

nielslange commented Sep 26, 2019

@joyously You're saying we should rollback #118 and instead of using custom fonts use system fonts and/or generic sans-serif and serif, right?

@andersnoren What is your share on that. I agree with @joyously that the default theme shouldn't be too big. When including all fallback fonts into the theme, the zip file would be around 30 MB.

@joyously & @andersnoren Would it be an option to load the fallback all fonts directly from via https://fonts.google.com/? This would bring down the zip file to under 1 MB.

@ntwb
Copy link
Member

ntwb commented Sep 26, 2019

@joyously & @andersnoren Would it be an option to load the fallback all fonts directly from via https://fonts.google.com/? This would bring down the zip file to under 1 MB.

There's GDPR issues with this direction I believe

@andersnoren
Copy link
Contributor

@joyously @nielslange I think loading only the variable fonts will keep the theme size down to a tolerable size, while still giving as many users as possible as good of an experience as possible. Especially as support for variable fonts grows more widespread. Relying only on system fonts for all visitors will guarantee some visitors to have a worse experience than others, which I'm not a fan of.

@nielslange We will have to rely on the Google Fonts CDN for the non-latin fonts, or go back to using system fonts if the people in #privacy insists. I would prefer going the Google Fonts CDN route, and giving users an easy way to opt-out. Increasing the theme folder size by 26 MB isn't doable.

Inter isn't available on Google Fonts, so using a CDN isn't an option there.

@nielslange
Copy link
Collaborator

@nielslange We will have to rely on the Google Fonts CDN for the non-latin fonts, or go back to using system fonts if the people in #privacy insists. I would prefer going the Google Fonts CDN route, and giving users an easy way to opt-out. Increasing the theme folder size by 26 MB isn't doable.

Would you rather load the fonts Google Fonts CDN by default and let folks opt-out or don't load them until folks opted-in? I'm not sure if the first option violated GDPR rules as the fonts would get loaded initially without the user's consent.

In any way, I'll update this PR and add a Google Fonts CDN toggle to the customizer.

@andersnoren
Copy link
Contributor

andersnoren commented Sep 26, 2019

I'm not sure either. @garrett-eclipse, could you give us some input from a privacy perspective?

@garretthyder
Copy link
Contributor

garretthyder commented Sep 26, 2019

Thanks for the ping @andersnoren and discussion everyone. From a privacy and performance standpoint I would place my vote on system fonts.

The issue with Google Fonts from a privacy standpoint is it leaks PII (Personally Identifiable Information) to Google, at minimum your IP address but I also believe User Agent is collected. This is a privacy concern as no consent was attained before this collection.

In general, the privacy team is working on removing or internalizing external components and services used by core. This started with the admin (https://core.trac.wordpress.org/ticket/36753) removing Open Sans and with Twenty Nineteen as the first theme to avoid them it was expected future themes would follow this lead (https://core.trac.wordpress.org/ticket/46170#comment:2). As well as bundling them in the older themes. We are also working on having it removed in Gutenberg (https://core.trac.wordpress.org/ticket/46169) which is just pending sign-off from Gutenberg design lead(s) (WordPress/gutenberg#11648).

Pulling from these threads some helpful quotes;

In general though core shouldn't have any external scripts/services to avoid any need to disclose them for GDPR and privacy concerns.

Reference: https://core.trac.wordpress.org/ticket/46343#comment:17

There's two main concerns;
From a privacy standpoint Google Fonts tracks users potentially collecting PII
From a performance standpoint the assets should be served locally to take advantage of modern font-loading optimization, etc. The cross-domain request slows down the site even with pre-fetching.

Reference: https://core.trac.wordpress.org/ticket/46169

Google claims it logs minimal data, however there is no mention whatsoever of what data gets logged, for how long the logs remain and what kind of processing google then does on the logged data. Google's FAQ only states that "The Google Fonts API is designed to limit the collection, storage, and use of end-user data to what is needed to serve fonts efficiently" without providing any specifics.
The vagueness of their docs, the lack of information and specificity is what makes them a serious GDPR concern.

Reference: https://core.trac.wordpress.org/ticket/46169#comment:5

You need the consent from the visitor bevor loading any remote assets. Upfront.

(Note: This comes from the EuGH German legislation.)
Reference: WordPress/gutenberg#11648 (comment)

Some of the longer more involved discussions are below (didn't want to overwhelm with walls of text);
https://core.trac.wordpress.org/ticket/46169#comment:9
https://core.trac.wordpress.org/ticket/46169#comment:11
https://make.wordpress.org/core/2019/02/20/core-privacy-office-hours-minutes-13-february-2019/

So to summarize, using a CDN is a privacy concern, using bundled fonts seems to be increasing the package size overly much, opt-out is against privacy principles and some legislations. So we're left with either an opt-in model which should also come with privacy policy suggested content or system fonts.

@nielslange
Copy link
Collaborator

nielslange commented Sep 26, 2019

@garrett-eclipse Thanks for your detailed explanation.

@andersnoren Which brings us back to the question:

  1. Shipping the fonts with Twenty Twenty despite the *.zip file will be around 30 MB
  2. Using system fonts by default, but enable users to activate Google Fonts via customizer
  3. Using system fonts only
  4. Finding alternative fonts that are smaller

ianbelanger79 pushed a commit that referenced this issue Sep 27, 2019
* Remove the non-variable versions of Inter

* Removed mentions of non-variable Inter from editor styles, RTL styles

Partial fix for #542
@andersnoren
Copy link
Contributor

@garrett-eclipse Thank you for the explanation, and sorry for not getting back to you sooner. After thinking it through and talking it over, we've decided to limit the font stacks used for the non-latin fonts to system fonts only. I have updated the non-latin fonts issue (#118), and I took the liberty of including a link to your comment in this issue for those who want to learn more about why Google Fonts should not be used in Twenty Twenty.

@garretthyder
Copy link
Contributor

Thanks @andersnoren I appreciate the update and decision, the Privacy team thanks you and all for their efforts in this matter.

@nielslange
Copy link
Collaborator

Closed in favour of #118

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

6 participants