How to Encode Binary Files (Audio, WOFF2 Fonts, PDFs) to Base64 in JavaScript

Inlining Binary Assets in Web Apps

In modern web development, inlining binary files can solve specific performance and portability challenges: - Eliminating the **Flash of Invisible Text (FOIT)** by embedding critical font subsets directly in `@font-face` rules. - Guaranteeing instant sound playback in interactive games without network fetch latency. - Generating offline single-file HTML reports containing embedded PDF certificates or charts.

In-Browser File to Base64 Conversion The cleanest native browser method to read a user file or `Blob` into a Base64 Data URI is `FileReader`:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

Embedding a WOFF2 Font in CSS Once encoded, you can embed your font directly in CSS:

@font-face {
  font-family: 'InterSubset';
  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAA...') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Warning on Asset Size Avoid inlining fonts or audio clips larger than 50 KB. Because Base64 adds a 33% size penalty and increases memory consumption during parsing, reserve this technique for targeted micro-assets.

Need to quickly convert binary files or inspect existing Data URIs? Use Mickytool's **Base64 Encoder / Decoder** for client-side encoding with zero file uploads.