top | item 40953685

(no title)

inbx0 | 1 year 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.

discuss

order

chrismorgan|1 year ago

That 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.