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])
}

Then copy the output and paste it into your CSS:

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