Woff causes missing letter

Question

I have received a set of html files which come with a set of woff files.

For some reason the character '%' is not visible in the text as shown in the first screen shot.

If I fiddle the css and remove the font-family attribute (which points to the embedded font), then the '%' character is visible again

Of course it is not the font face I expect.

I wonder what causes this problem? How can I solve the problem?

EDIT:

The underlying html is something like this:

<pre class="g3" style="left:9.3px;top:0.7000061px;">Up to 50% of water</pre>

And the corresponding css class

Answer 1

If the glyph isn't showing, then the font is either broken somehow, or the glyph isn't actually in the font. Let's check:

Run the WOFF through TTX, and see if there's a cmap entry, and glyph outline, for %. If there is: % should render, but doesn't. Regenerate the WOFF because something went wrong.

If there isn't even an entry for %, then you have three options:

1. Find a new font, or
2. regenerate the WOFF from a source that guaranteed has that %, or
3. keep things as is, but add a CSS fallback so that % gets rendered by a different font.

I'd go with creating a new WOFF first, though. Find the original otf or ttf source, use that as font-family to verify it works, and if it does, convert it to WOFF with compression disabled (which does not change the font's data, it just adds a metadata block) and see if that works. If it does, try WOFF with compression (which doesn't modify the font data, but gzips part of it so it's theoretically smaller) and see if that still works.

ALSO be aware that you don't need WOFF for webfonts, the original .ttf and .otf work just fine in modern browsers. The only hiccup is IE, which actually does the right thing by demanding the font's permissions indicate it is "installable" rather than "embeddable", so: see if the plain ttf/otf works as intended, and if so, check whether the font works in IE.

Does it? done, we don't need WOFF until you have proof you need to optimize your webfont payloads because its size is interfering with user adoption.