How to Embed Google Fonts Inline in Your CSS
If you want to avoid a flash of unstyled content (FOUC), the simplest way is to have your CSS arrive in the same file as your layout. Along with your CSS, you can also embed a complete custom font directly in your CSS.
It will load on every pageload, and most times people load them separately so that the font files will be cached and loaded just once. But done right, and limited to A-Z and numbers and some punctuation, we're generally talking on the order of 10kB. That's a small payload when a lot of home pages are north of 1MB.
First, decide on the characters you need, and the fewer the better. If you're just using the custom font for headings, you can consider using all caps, or all lowercase letters to cut size. Include 0-9 as well, and then some common punctuation. These will all be added to the end of the Google Font request URL, and Google will include only those forms in the file you receive.
Punctuation marks, specifically anything but a dash, underscore, or period, will need to be urlencoded to retrieve the font with them intact. You can do that at konvert.me. So a question mark becomes %3F in your URL, etc.
Once you find your font on Google Fonts, and you choose your weight, click to 'Select this style'. When you select the 'Embed' tab, you will see a URL for the embedded font. At the end of the URL, you can add you custom set of characters like this (your character list will likely be much longer):
https://fonts.googleapis.com/css2?family=Vampiro+One&text=abc123%2F
Now you'll need to decide whether you will use WOFF or WOFF2. WOFF has almost universal support, but is about 30% larger filesize. WOFF2 is smaller and easier to retrieve, but has slightly less support with some browsers. I still use WOFF for the moment.
To retrieve the WOFF file, you will need to enter the URL into Internet Explorer. Because most browsers support WOFF2, Google will serve the URL for a WOFF2 file unless you use a browser that doesn't support it. Which IE currently does not. When you enter it, you will see some CSS returned, with a URL something like this:
https://fonts.gstatic.com/l/font?kit=gokqH6DoDl5yXvJytFsdLkqkqvtvkpf4d4pA&skey=90d3bdbbbf47723f&v=v11
You can enter that in whatever browser, and the WOFF file will download.
Retrieving the WOFF2 file is easier, you can use almost any browser and be served the WOFF2 URL. It will look much the same as above, and will download in the same way.
In order to use the file inline in your CSS, you will need to convert the file to base-64 encoding, to represent binary data as text (the 64 characters of a-z, A-Z, 0-9, + and /). There are numerous sites to do that, but I have used base64.guru. The text output then goes directly into the CSS font-family declaration, like so:@font-face{font-family:
The base-64 section will be considerably longer, but it is just closed with a right parens and brace, and you are all set. Any element you style with the name in the declaration will use those font forms. You can rename the font anything you like, incidentally. And if you download the WOFF2 version, you can use 'application/x-font-woff2' instead of the above.
Another thing to remember is that base-64 encoding adds more weight to the font file's size. Not a lot, but base-64 is not as efficient as binary obviously. It used 6 bytes instead of 8 bytes to encode data, plus some file declaration overhead. So expect roughly 30% more than the font file size.
There are a lot of reasons you might want to embed your fonts like this, and a lot of legitimate applications. Not all sites are multi-page. Not all headings use full character sets. And not all pages are large to begin with, so you can afford the overhead of some binary data embedded in the CSS. I like minimizing network requests and responses, and these embeds for me, have weighed in under 10kB, so it's not a major size issue.
And it can make the load look much more professional -- it all loads and immediately looks finished, no flashes, no shifts. Enjoy!