How is this font face in CSS3 embedded into a css file?

StackOverflow https://stackoverflow.com/questions/10086876

  •  30-05-2021
  •  | 
  •  

Question

I was looking at how to speed up page load times and I have to custom CSS3 @font-face fonts loading into the page.

I was looking at the source code of some other sites and noticed that they have the font, somehow, embedded inside the css file (as far as I can tell).

Below is a sample from basecamp.com, if you take a look at the css file there is the font embed into the css:

    @font-face {
  font-family: 'ProximaNova';
  src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAA0ABIAAA...[redacted]..xBeTUFYWAA==) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQAABAAgRkZUTWAFSKIAAAE...[redacted]...EsBYgRbIVHgIrsQNGditEWbAUKw==) format("truetype"), url("/assets/fonts/ProximaNova-Reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

How would you go about turning the font into this format? How does this work?

Could shaved a couple of hundred milliseconds of the load time and reduced the requests to the server, so seems like a good idea overall.

Thanks.

Was it helpful?

Solution

The data URLs allow embedding actual resource data into a URL itself. It's very handy for small resources, but less so for big ones, since they are encoded as base64 and result into the embedding textual resource bloat.

What you need to do is encode the respective font file using the base64 encoding (there are a number of online converters, like this one), and then specify the correct content type in the data URL.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top