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

Question

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?

Have you tried embedding the font in your CSS as a data: URI? — The Spooniest, Mar 30 '15 at 15:04
@TheSpooniest as said, there should be no outside reference. — tugberk, Mar 30 '15 at 15:05
Right, I was going to advice you to link your font files directly in the `CSS` of your `HTML` file but then, I remembered your `should be no outside references` requirement :). I guess embedding as a `base64` encoded is the only solution — D4V1D, Mar 30 '15 at 15:06

score 22 · Accepted Answer · answered Mar 30 '15 at 15:04

22

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 Mar 30 '15 at 15:04

damian

5,034
5
31
62

yes, this is what I want! thx! I wouldn't do this is if it was actually for a web page but a tool will generate an HTML report and everything needs to be in it. – tugberk Mar 30 '15 at 15:06
the problem was that I didn't know whether this is possible but now I kinow :) – tugberk Mar 30 '15 at 15:10

score 7 · Answer 2 · edited Sep 22 '21 at 20:45

7

Yes you can. You must convert your font to a BASE64 byte and embed with Data URI, like this:

@font-face {
    font-family: 'yourfontname';
    src: url(data:application/x-font-woff;charset=utf-8;base64,**your base64 here**) format('woff');
    font-weight: normal;
    font-style: normal;
}

You can use this site to convert your font to Base64: Base64 encoder

edited Sep 22 '21 at 20:45

cababunga

3,033
14
23

answered Mar 30 '15 at 15:18

Ricardo Pontual

3,699
3
27
41

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

2 Answers2

Linked