Base64 encoded OpenType font-face using data URI

Question

I want to add a base64 encoded OpenType font as a data URI in font-face.

I have this so far:

@font-face {
    font-family: 'test';
    src: url(data:font/otf;base64,
        // Base64 string here ...
    ) format('opentype');
}

But I believe it does not include the font correctly to my style.

Any help with this would be really appreciated.

Answer 1

Although not asked, I'm sure that someone will come here looking for the woff2 solution and will have the same issues I had. Upload the file using this site: https://base64.guru/converter/encode/file Ensure you use the option "Data URI". Replace the url() value with the code from the site.

For the CSS I had to use the following code:

@font-face {
    font-family: 'MYFONT'; /*This is what your font will be named*/
    src: local('MYFONT'), /* It will check the machine for a font matching this name, if it exists it will use this. Not needed when your are writing the woff2 file since you already sending all the data. */
         url('data:@file/octet-stream;base64,d09GMgABAAAAAK6kABIAAAABgQgAAK47AAA=') /*This is the base64 code copy pasted from the site*/
         format('woff2'); /*This ensures the browser treats it as a WOFF2 file. Notice there is no comma after the url() */
}

To get your custom font to work you need to specify it:

<div style="font-family: MYFONT">
    My new font
</div>

The actual base64 code I have posted does not work. The woff2 file i was using is 50kb and didn't want page after page of base64 code.