Is there a way to embed the src of @font-face?

Question

I don't want references to other files in my CSS.

I'm trying to find a way to embed the font file inside my CSS (TTF, EOT, WOFF). I know that there is a way to embed an image, for example:

background-image: url("data:image/png;base64, +IDx4OnhtcG1ldG…+kJggg==");

Is there a way to do the same with the src value of a @font-face?

Answer 1

You can use base64 for this:

@font-face {
    font-family: 'latoregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAHwwABMAAAAA4IwAAQAAAAAAAAAAA[...]) format('woff'),
    url('lato-reg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

You can generate base64 font in http://www.fontsquirrel.com/