CODEWITHSUNDEEP
firefoxcssfont-face
Andy Giesler
Andy Giesler

Reputation: 361

@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?

Upvotes: 7

Views: 2605

Answers (4)

BigglesZX
BigglesZX

Reputation: 1001

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;

Upvotes: 8

Frank Wag
Frank Wag

Reputation: 66

You can tell Firefox to skip looking for ligatures and treat them as regular characters by adding -moz-font-feature-settings: "liga=0" in your font-face declaration.

Upvotes: 5

red
red

Reputation: 11

Myfonts.com recently changed some display settings. Their support wrote back very quickly with the following info:

If you click on the Font image (the image that shows the sample), which is located right above Kit Options, you will see the Complete Character set and Keep OpenType Layout options.

This view is not currently available through Firefox though, but I was able to download the complete character sets using IE9.

Upvotes: 1

Andy Giesler
Andy Giesler

Reputation: 361

In case others hit this problem, I resolved it with help from MyFonts technical support. I'm not sure whether this issues is specific to MyFonts, but I suspect it affects other web font sources.

Direct (Solvable) Cause

When a standard True Type font (TTF) gets processed into the multiple versions that are useful for a web font (EOT, SVG, WOFF), the processing tool or vendor can decide whether or not to include the font's full character set. Some will default to a reduced character set to reduce file sizes.

In my case, one or more of the generated web font files excluded ligatures, presumably considering them to be non-essential typographic tweaks. To fix the problem I used a custom web font builder at MyFonts to generate font files with the full character set.

(For MyFonts specifically this was at Order History > select relevant font > Webfont Kit Builder tab > Advanced, then check both "Complete Character Set" and "Keep OpenType Layout".)

Underlying Cause

My belief, which is only an educated guess:

I think Firefox is going out of its way to do nice typography, more so than other browsers. So when it sees something that it could render as a ligature ("fi", "fl", "ff", etc.) it tries to render the letters as a single ligature glyph rather than as two distinct characters. If your web font doesn't include the ligature glyphs, your letters will disappear. (If my guess is right, I'm surprised I haven't read about this problem before.)

Upvotes: 1

Related Questions