Converting and rendering web fonts to base64 - keep original look

Question

I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine.

Main part of this is converting fonts to base64 and preparing

Answer 1

Use this code snippet to base64 encode your font directly in the browser (OS independent, no need to install anything)

function base64convert (files) {
  console.clear()
  const reader = new FileReader()
  reader.onload = (e) => {
    console.log(e.target.result)
  }
  reader.readAsDataURL(files[0])
}

<input type="file" onchange="base64convert(this.files)">

Then copy the output and paste it into your CSS:

@font-face {
    font-family: 'myfont';
    src: url("<<copied base64 string>>");
}

Answer 2

In the Font Squirrel Expert options, make sure to set the 'TrueType Hinting' option to 'Keep Existing'. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font.

Alternatively, if you're happy with the rendering of the font directly from GWF, you can just take that file and do the base64 encoding yourself. In OS X or Linux, use the built-in base64 command in Terminal/shell:

$ base64 myfont.ttf > fontbase64.txt

For Windows, you'll need to download a program to encode in base64 (there are several free/Open Source tools available). Copy the contents of that file, then use in your CSS as:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

(Note that you may need to make some adjustments to the various @font-face info to match your particular font data; this is just an example template)