Converting and rendering web fonts to base64 – keep original look

Picture of Amitpal Singh
Amitpal Singh
July 13, 2023

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>>");
}

See the Pen Converting and rendering web fonts to base64 – keep original look by Amitpal Singh (@amitpal-singh) on CodePen.

Share this post:

How to Attribute?

Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
for Example: Website, Social Media, Blogs, ebooks , newsletter, etc.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
Copied!

Got a Question? Check out our FAQ Section.

Your action, our appreciation

It encourage us to give you more valuable content on website.