8 ms·
You could embed your web font inline to the stylesheet, as base64 encoded data url. <style> @font-face { src: url(data:application/font-woff2
by inbx0 2y ago
You could embed your web font inline to the stylesheet, as base64 encoded data url.
<style>
@font-face {
src: url(data:application/font-woff2;charset=utf-8;base64,...) format('woff2');
}
Your page loading times will obviously take a hit, but that'll give you pretty close to 100% certainty that the font will be used, should you want that.
- chrismorgan 2y agoThat resolves one of the main causes of failure, and I generally speak very highly of inlining everything—it has very noticeable performance benefits up to surprisingly large sizes (generally well over 100KB). Aside, pairing application/font-woff2 with charset=utf-8 makes no sense. It’s a binary encoding. But I think you’d still be surprised how many browser configurations don’t load web fonts, though I’m sure it’s becoming less common.