How to inline font-faces inside a CSS file
Hello, today I will show you how to quickly inline your font-face files inside a CSS file. The following example only explains the process for a woff file but the process is the same for all font-face formats:
- The first step is to get your woff file converted into a base64 string and afterwards make sure you trim those newline characters
- Create a new font-face @rule and insert the base64 string inside the font-face src but first make sure you've included
data:application/x-font-woff; base64,which will tell the CSS parser that the string that follows is an inline base64-encoded .woff file.
Here is a simple example:
CSS
@font-face{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(data:application/x-font-woff;base64,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);
}
p{
font-family: 'Open Sans';
}
HTML
<p>Hello</p>
Credits go to the Twitter team and Sime Vidas for letting me know via this tweet