Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

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

  • 4 antwurd
  • 8 hawwe dit probleem
  • 1 werjefte
  • Lêste antwurd fan 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).

Bewurke troch wildclaw op

Alle antwurden (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.