Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@font-face is dropping letters in Firefox

I have Museo-300 mostly working with @font-face, but certain letter combinations like "ff" and "fi" are disappearing in Firefox (confirmed in v3.6 and v7.0.1). So "microfinance" becomes "micronance".

Note that I'm outputting these as individual letters, not as ligatures. When I view source on both the server and the browser, "coffee" for example is spelled with all six letters individually—not a unicode ligature character for "ff".

The output looks right in Opera, Chrome, Safari, and IE (even IE6).

I downloaded Museo-300 from MyFonts along with their web font example template.

 @font-face {
 font-family: 'Museo-300';
 src: url('webfonts/151B6C_0.eot');
 src: url('webfonts/151B6C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/151B6C_0.woff') format('woff'),url('webfonts/151B6C_0.ttf') format('truetype'),url('webfonts/151B6C_0.svg#wf') format('svg');
}

and all the referenced files are in place. I invoke it like this:

    font-family: 'Museo-300', sans-serif;

I tried a different font as a test (Code Pro Light Demo, also gotten from MyFonts) and Firefox dropps "fi" but not "ff" for that one.

An idea what's going wrong?

like image 902
Andy Giesler Avatar asked Oct 17 '11 19:10

Andy Giesler


1 Answers

For anyone reading this in the future, note that as of FF 15 (I think) the syntax has now changed, and you'll need to use this:

-moz-font-feature-settings: "liga=0";
-moz-font-feature-settings: "liga" 0;
like image 166
BigglesZX Avatar answered Sep 28 '22 07:09

BigglesZX