is there any way to save/load fonts without async/promises?

[tsdexter]

For example, instead of loading the .ttf directly, can I "precompile" them, save the Font object as JSON to load directly? I know there are non-serializable functions on Font such as Font.getPath() so I know just serializing it directly isn't going to work but is there any other way?

[Connum]

You could store the buffer and use opentype.parse()

[tsdexter]

Thanks @Connum 🙌, I got it working with a node script to create FontName.js files like:

import fs from 'fs';
const inputPath = process.argv[2];
const outputPath = process.argv[3];

if (!inputPath || !outputPath) {
  console.log('Usage: node ttf-to-js.js path/to/input/font-name.ttf path/to/output/font-name.js');
  process.exit(1);
}

const buffer = fs.promises.readFile(inputPath);
const bf = await buffer;
fs.writeFileSync(`${outputPath}`, `const font = \`${bf.toString('base64')}\`; export default font;`);

Then in my browser scripts I can import like:

import fontString from "../../../fonts/FontdinerSwanky.js";

function base64ToArrayBuffer(base64: string) {
    const binary_string = atob(base64);
    const len = binary_string.length;
    const bytes = new Uint8Array( len );
    for (let i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

function getTextPath() {
  const buffer = base64ToArrayBuffer(fontString);
  const font = opentype.parse(buffer);
  const path = font.getPath(text, 0, 0, size);

  return path;
}

Am I over-complicating it with the base64 conversion and de-conversion? Might be missing something obvious but couldn't figure out how to write the buffer directly and be able to import it back into a browser script.

[axkibe]

But Why?

You are gaining absolutely nothing but using a way less optimal formating.

There might be an argument for loading fonts already preparsed and reduced to stuff you only use in an application, but that isn't easily possible with opentype.js

I dont see what your base64 encoding does better than loading the ttf file from the client.

And what is wrong with await on browserside to load the ttf file?

[tsdexter]

I'm using it in a react component and don't want to have a useEffect to handle the async/await or promises. As well, I want library users to be able to consume synchronously without adding extra work to handle async/promises.

const textPath = getPath({ text: 'hello', font: 'Roboto' })

The base64 encoding is saved as a string in a javascript file that exports it, this means I can import the string into other files and it gets bundled up as part of the JS instead of a separate file needing to be fetched at runtime.

Please let me know if there is a better way.