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

Data URIs are always of this format:

data:[<mediatype>][;base64],<data>

The very first part of every data URI is the media-type, which in the case of an Open Type font is:

font/opentype

So, you may use it like this:

@font-face{
    font-family: test;
    src: url(data:font/opentype; base64, [base64 string here]);
}

Replacing

[base64 string here]

with the exact copy-pasted version of your base-64 encoded string.

Notes

Please note that:

• you should use font/opentype for the data, not otf.
• you should copy-paste the exact base-64 encode string, without any changes like added spaces, etc (I believe there are some spaces in it)

Online Encoding Tool

You may use this tool, to convert your font file to the encoded string.