NEW DESIGN: Host Google font for Material icons locally

[stephanegigandet]

What

• The Material Icon font is currently loaded from Google servers. It would be best to host it locally.

Part of

• NEW DESIGN: remaining issues #7295

[stephanegigandet]

Current fonts we use:

https://fonts.googleapis.com/css2?family=Public+Sans&family=Material+Icons

on Chrome, this returns:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/publicsans/v14/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpmJywcob18.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: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/publicsans/v14/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpmJygcob18.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: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/publicsans/v14/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpmJxAco.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;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

With wget:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('true
type');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/publicsans/v14/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpm5ww.ttf) fo
rmat('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

[stephanegigandet]

We can host fonts, but then we lose all the "smart" things Google Font does by returning fonts specific to what the user can use (e.g. woff2 instead of ttf, and variable fonts instead of fixed fonts). We could also try to replicate that, by specifying both woff2 and ttf fonts in the CSS.

We lose also the automated updates.

On the up side, we are less dependent on an external server and we don't send data to it.

[alexgarel]

I'm more in favor of hosting fonts locally as google fonts is known to be a tracker on users.

https://github.com/neverpanic/google-font-download can help ? It seems capable of generating the CSS supporting different browser.

[alexgarel]

Also https://google-webfonts-helper.herokuapp.com is really easy to use.

[stephanegigandet]

Thanks for the links. The first one is very outdated and does not support the newest changes: neverpanic/google-font-download#27

But I think I can copy the format generated by the second one (it has Public Sans but not Material Icons for some reason).

I'll give it a try.

[VaiTon]

As I wrote on slack, we could use another CDN service that is more privacy-friendly than Google, for example https://bunny.net/fonts/. It's hosted in EU so it has to comply with GDPR.

[CharlesNepote]

@VaiTon Bunny fonts seems really interesting and provides "a Google Fonts drop-in compatible API". They provide the "Public Sans" we use, but unfortunately I can't find Material Icons.
Nice project though.