This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

FF5 error parsing CSS font-face with url inline base64 data

  • 4 replies
  • 8 have this problem
  • 1 view
  • Last reply by wildclaw

more options

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).

Firefox 5 refuses to parse CSS @font-face with url inline base64 data. I use the declaration: &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url(data:font/truetype;charset=utf-8;base64,[base64data]); } &lt;/style&gt; then used this way: &lt;div style="font-family:'MyFont'; font-size:12.0pt"&gt;Test text&lt;/div&gt; 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: &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype); } &lt;/style&gt; (tried also with opentype format, etc.) &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url('myfont-webfont.eot?'); src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]); } &lt;/style&gt; If I provide the font path: &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url('Arial.ttf'); } &lt;/style&gt; (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).

Modified by wildclaw

All Replies (4)

more options

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.

more options

Thanks, I will try.

more options

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?

more options

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.