Expand externalization of data: URLs in @font-face rules

[westonruter]

Twenty Nineteen has quite a bit of CSS, and part of it is due to the NonBreakingSpaceOverride font which is inlined as a data: URL. While this font was temporarily removed from the frontend styles in WordPress/twentynineteen#623 it was added back in WordPress/twentynineteen#670 as @kjellr notes in WordPress/twentynineteen#623 (comment):

@allancole — It's possible you didn't see the PR, but @jasmussen and I merged that into the front end in WordPress/twentynineteen#585 the other day. While not definitely required, it does fix some little quirks like the menu spacing noted in the PR. Since the custom font only covers one character, it should add just a couple kilobytes to the site's load. I'd prefer to keep it in, but not a huge deal either way.

In AMP it turns out to be a big deal, because of the 50KB budget for style[amp-custom]. The data:-URL inlined WOFF2 and WOFF files account for 3KB, which is 6% of the budget. This is a lot especially for something that definitely not required, per above.

The AMP plugin already has built-in support for externalizing data: URLs for font files in the case of Dashicons. That externalization depended on one of the font src URLs to be an external file so that it could guess where to find the external file version of the data:-encoded font. For example, dashicons.css has:

@font-face {
	font-family: dashicons;
	src: url("../fonts/dashicons.eot?50db0456fde2a241f005968eede3f987");
	src: url("../fonts/dashicons.eot?50db0456fde2a241f005968eede3f987#iefix") format("embedded-opentype"),
		url("data:application/x-font-woff;charset=utf-8;base64,d09GR....") format("woff"),
		url("../fonts/dashicons.ttf?50db0456fde2a241f005968eede3f987") format("truetype");
	font-weight: 400;
	font-style: normal;
}

Based on this, the plugin can successfully guess that woff font encoded in the data: URL would probably be located at ../fonts/dashicons.woff since the TrueType version is located at ../fonts/dashicons.ttf.

That's all well and good. But what if there are no non-data: URLs defined? This is the case for Twenty Nineteen. It contains:

@font-face {
    font-family: "NonBreakingSpaceOverride";
    src: url("data:application/font-woff2;charset=utf-8;base64,d09GM...") format("woff2"),
         url("data:application/font-woff;charset=utf-8;base64,d09GR...") format("woff");
}

The AMP plugin doesn't know where to locate the woff2 and woff files.

It turns out that even though Twenty Nineteen doesn't reference these files externally, they are present in the theme at:

• fonts/NonBreakingSpaceOverride.woff2
• fonts/NonBreakingSpaceOverride.woff

With this in mind, the plugin can expand its guessing of the external file locations based on the name in the font-family.

As an added touch for performance, when a data: URL is converted to an external URL, the @font-face gets a font-display: swap. This prevents the font's loading from blocking the rendering of the text.

Before: style.css at 42KB

<!--
The style[amp-custom] element is populated with:
     0 B: style[amp-custom=]
    81 B: style
    73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://example.com/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1-beta1-20190406T044858Z-28b70b03][type=text/css][media=all]
  4348 B (37%): link#wp-block-library-css[rel=stylesheet][id=wp-block-library-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1554612185][type=text/css][media=all]
   857 B (72%): link#wp-block-library-theme-css[rel=stylesheet][id=wp-block-library-theme-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1554612185][type=text/css][media=all]
 41583 B (72%): link#twentynineteen-style-css[rel=stylesheet][id=twentynineteen-style-css][href=https://example.com/wp-content/themes/twentynineteen/style.css?ver=1.0][type=text/css][media=all]
   417 B: style#twentynineteen-style-inline-css[id=twentynineteen-style-inline-css][type=text/css]
  2487 B (99%): link#twentynineteen-print-style-css[rel=stylesheet][id=twentynineteen-print-style-css][href=https://example.com/wp-content/themes/twentynineteen/print.css?ver=1.0][type=text/css][media=print]
   119 B: div.wp-block-cover has-background-dim alignwide amp-wp-d28a8c9[class=wp-block-cover has-background-dim alignwide amp-wp-d28a8c9]
Total included size: 49,965 bytes (67% of 73,555 total after tree shaking)

The following stylesheets are too large to be included in style[amp-custom]:
   122 B: style[type=text/css]
    80 B: p.has-large-font-size amp-wp-13076d9[class=has-large-font-size amp-wp-13076d9]
    79 B: p.amp-wp-f6e3d7f[class=amp-wp-f6e3d7f]
    80 B: p.amp-wp-13076d9[class=amp-wp-13076d9]
    80 B: p.amp-wp-13076d9[class=amp-wp-13076d9]
    80 B: p.amp-wp-13076d9[class=amp-wp-13076d9]
Total excluded size: 521 bytes (100% of 521 total after tree shaking)

Total combined size: 50,486 bytes (68% of 74,076 total after tree shaking)
-->

/*...*/
@font-face {
    font-family: "NonBreakingSpaceOverride";
    src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==") format("woff2"),
         url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG") format("woff");
}
/*...*/

After: style.css at 39KB

<!--
The style[amp-custom] element is populated with:
     0 B: style[amp-custom=]
    81 B: style
    73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://example.com/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1-beta1-20190407T055539Z-9c273505][type=text/css][media=all]
  4348 B (37%): link#wp-block-library-css[rel=stylesheet][id=wp-block-library-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1554616748][type=text/css][media=all]
   857 B (72%): link#wp-block-library-theme-css[rel=stylesheet][id=wp-block-library-theme-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1554616748][type=text/css][media=all]
 38893 B (71%): link#twentynineteen-style-css[rel=stylesheet][id=twentynineteen-style-css][href=https://example.com/wp-content/themes/twentynineteen/style.css?ver=1.0][type=text/css][media=all]
   417 B: style#twentynineteen-style-inline-css[id=twentynineteen-style-inline-css][type=text/css]
  2487 B (99%): link#twentynineteen-print-style-css[rel=stylesheet][id=twentynineteen-print-style-css][href=https://example.com/wp-content/themes/twentynineteen/print.css?ver=1.0][type=text/css][media=print]
   122 B: style[type=text/css]
   119 B: div.wp-block-cover has-background-dim alignwide amp-wp-d28a8c9[class=wp-block-cover has-background-dim alignwide amp-wp-d28a8c9]
    80 B: p.has-large-font-size amp-wp-13076d9[class=has-large-font-size amp-wp-13076d9]
    79 B: p.amp-wp-f6e3d7f[class=amp-wp-f6e3d7f]
Total included size: 47,556 bytes (66% of 71,146 total after tree shaking)
-->

/*...*/
@font-face {
    font-family: "NonBreakingSpaceOverride";
    src: url("https://example.com/wp-content/themes/twentynineteen/fonts/NonBreakingSpaceOverride.woff2") format("woff2"),
         url("https://example.com/wp-content/themes/twentynineteen/fonts/NonBreakingSpaceOverride.woff") format("woff");
    font-display: swap;
}
/*...*/

See #1492.

[amedina]

6% reduction in CSS size is a good gain. Ship it.

[westonruter]

Good gain or good loss? 😉