FF5 error parsing CSS font-face with url inline base64 data
Firefox 5 refuses to parse CSS @font-face with url inline base64 data.
I use the declaration:
<style type="text/css"> @font-face {
font-family: 'MyFont'; src: url(data:font/truetype;charset=utf-8;base64,[base64data]);
} </style>
then used this way:
<div style="font-family:'MyFont'; font-size:12.0pt">Test text</div>
But Firefox is not using the font and in the error console, there is always the message:
Error parsing the "src" value. Skipped to next declaration.
(more or less, I actually have this message in Czech)
Tried with different mime types (font/ttf,font/otf,font/opentype,application/x-font-ttf etc.), with or without charset specification, with or without quoting the font family name, with different specifications:
<style type="text/css"> @font-face {
font-family: 'MyFont'; src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype);
} </style>
(tried also with opentype format, etc.)
<style type="text/css"> @font-face {
font-family: 'MyFont';
src: url('myfont-webfont.eot?');
src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]);
} </style>
If I provide the font path:
<style type="text/css"> @font-face {
font-family: 'MyFont';
src: url('Arial.ttf');
} </style>
(the font actually is Arial, for testing), it works (but I need to embed the font in the HTML for specific reason, so having the font externally is not the option).
wildclaw trɔe
All Replies (4)
Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
http://forums.mozillazine.org/viewforum.php?f=25
You'll need to register and login to be able to post in that forum.
Thanks, I will try.
It is possible that the base64 data is corrupted.
Can you download and save the file if you paste the data URI in the location bar?
Finally I got it work! Thanks, cor-el, you pointed me the right way to solve this problem.
There was problem with the encoding too (there was part of the font missing at the end, because of the bug in the program - I forgot to flush the buffered output stream), after then I was able to download the same copy of the TTF. - I didn't know about the possibility to put the entire url data to the location bar and try to download it, thanks cor-el.
But it still didn't solve the problem ... the problem was, that the base64 stream was divided to multiple lines, like
data:font/truetype;charset=utf-8;base64, AAEAAAAYAQAABACARFNJRwMaCRYAC8m8AAAXfEdERUaJ+Y1JAAr/JAAAAsJHUE9T e1arnwALAegAAKwaR1NVQt5CYFEAC64EAAAbmEpTVEZtKmkGAAvJnAAAAB5MVFNI RExjrAAAN8wAAA1dT1MvMhAyXXMAAAIIAAAAYFBDTFT9ez5DAAr+7AAAADZWRE1Y ...
After I removed the line breaks, it works now! (the line is quite long then, because the base64 string is about 1MB, but it works)
Strange that I do the same for images (jpeg, png) and there is no problem with base64 string divided to multiple lines.
But anyway, I'm fine with that.