CODEWITHSUNDEEP
css
Anatol
Anatol

Reputation: 2043

Font-face as base64 with fallbacks

Following this threat I´d like to include a fontface as follows:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); 
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
       url('webfont.woff2') format('woff2'), 
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg'); 
}

But instead of loading files from the filesystem the filecontent is coming from a database as base64 string. My Question is do I have to add the base64 string for each format (woff,woff2,svg,eot,ttf)? like:

url(data:application/font-woff;charset=utf-8;base64,d09GMgABA… 
url(data:application/font-woff2;charset=utf-8;base64,d09GMgABA… 
url(data:application/x-font-truetype;charset=utf-8;base64,,d09GMgABA… 
url(data:image/svg+xml;charset=utf-8;base648;base64,,d09GMgABA… 
url(data:application/vnd.ms-fontobject;charset=utf-8;base64,d09GMgABA…

I´m asking because when looking at fontsquirrels generated base64 generated stylesheets they only provide one as base64 others as local files.

Upvotes: 1

Views: 3411

Answers (1)

user3051730
user3051730

Reputation: 71

Base64 works with ttf-format.

Example:

    @font-face {
        font-family: "CustomFont";
        src:        url(data:font/truetype;charset=utf8;base64,AAEAAAAQAQAABAAAT...) format("truetype");
    }

Upvotes: 2

Related Questions