After reading this article, I am interested in incorporating a font face in the following way:
@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');
}
Instead of loading files from the filesystem, I am getting the file content from a database as a base64 string. My question is, do I need to add the base64 string for each format (woff, woff2, svg, eot, ttf)? For example:
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 am curious because when examining fontsquirrel's generated base64 stylesheets, they only provide one as a base64 and the others as local files.