Update to Font Awesome 6.7.2 (from 5.0.13), minimize size

[flodolo]

Not sure if there's more to this.

I took the all.css file and copied over as fontawesome-all.css, corrected the font rules to only use .woff2.

For example, I changed

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

to

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-brands-400.woff2") format("woff2");
}

[eemeli]

This would add about 180kB to Pontoon's first load size. What is the benefit of this change?

[flodolo]

This would add about 180kB to Pontoon's first load size. What is the benefit of this change?

Use a maintained, up-to-date version of an external dependency?

[flodolo]

Look like v5 is still supported (latest version being 5.15.14)
https://fontawesome.com/support#is-font-awesome-5-still-being-supported

[flodolo]

This would add about 180kB to Pontoon's first load size. What is the benefit of this change?

With that said, I wonder if we should look into optimizing this 🤔

[flodolo]

I've looked into optimizing the font, but it's a ton of work just to identify which icons we're using in the code 😞

[flodolo]

Tried minimizing the font via Python+fonttools, seems to work locally and the gain is about 110k
https://gist.github.com/flodolo/ba0bd409bc1612945b8e436f175abc1f

One downside is that the font binary file changes at every run 🤔

[flodolo]

If the approach sounds reasonable, we should put the script in the pontoon-script repo, and add a README in the folder.
Maybe even rename the fonts, e.g. adding -pontoon, to make it clear it's not the standard full font.