dashicons css: load woff file instead of inline embed base64 code in dashicons.css

[Matthias Reuter]

Currently, the woff code is embed into the /wp-includes/css/dashicons.css aswell as /wp-includes/css/dashicons.min.css as base64 code.

Due to performance purposes, the code should be changed to:

@font-face {
	font-family: dashicons;
		src: url(/wp-includes/fonts/dashicons.woff),
		url(/wp-includes/fonts/dashicons.ttf) format("truetype"),
		url(/wp-includes/fonts/dashicons.svg#dashicons) format("svg"),
		url(/wp-includes/fonts/dashicons.eot);
	font-weight: normal;
	font-style: normal;
}

[Matthias Reuter]

To keep the relative paths in the dashicons.css, here's a better version of the improvement

@font-face {
	font-family: dashicons;
    src: url(/wp-includes/fonts/dashicons.woff),
		url(../fonts/dashicons.ttf) format("truetype"),
		url(../fonts/dashicons.svg#dashicons) format("svg"),
		url(../fonts/dashicons.eot);
	font-weight: normal;
	font-style: normal;
}

[Shital Patel]

I have added Patch for dashicons css

[desrosj]

Hi @matthias-reuter,

Thanks for opening this!

Any changes to the Dashicons font need to be made on the ​Dashicons GitHub repository. Please open an issue or PR with details about this request.

Currently, there is only one font format included in the CSS with base64, WOFF. I was not involved directly with this decision, but I am almost positive it's because the build process used for Dashicons only supports creating a .woff2 file, not .woff. But, embedded WOFF is still supported.

Additionally, WOFF is an outdated format. It has been replaced by WOFF2. Only IE cannot use WOFF2, so this is maintained for backwards compatibility since IE11 is still supported in Core.