Is it possible to embed font files into html just like css?

Issue

In a project I work on, I need to generate a one page HTML file which contains everything inside it (JavaScript code, CSS, Images, etc.). So, there should be no outside references.

I am also planning to use Bootstrap but I am not sure if it is possible to embed font files inside HTML just like CSS.

Any idea?

Solution

Yes, that's actually possible. You can embed the font as a base64 encoded font like this:

@font-face{
    font-family: FontName;
    src: url(data:font/ttf;base64,THESTRING… ) format('truetype');
}

But it's not advisable as the base64 string can get rather big and cause performance issues.

Answered By - damian