Characters from Embedded Google Fonts Not Showing Up in Firefox 4 and Ie9

Characters from embedded Google fonts not showing up in Firefox 4 and IE9

I have downloaded the same font from Font Squirrel, uploaded it to my own server and included all types like in the demo page and now it shows the Z both in Firefox 4 and IE9.

And all other characters as far as I can tell :-)

Very weird, the problem seems to be related to Google web fonts only.

Error With Google Webfont Not Loading Characters

I am unsure why this is happening and would still love an answer but I found a solution that I am using in the mean time.

It appears to have have happened with content that was copied into my text. For spaces or other symbols were this appears (such as - or / I am just retyping the character. For the § symbol I replaced it with the HTML character § (or you can use §) and this has solved the issue.

the letters ff in staff are not displayed in Firefox

Yahoooo!
Currently solved by using:
-moz-font-feature-settings: "liga=0";

So this confirms that Firefox was in fact trying to treat that as a ligature.

Thank you all for helping me look in the right direction. Wouldn't have been possible with you guys. I <3 stackoverflow and the community :).

WebFont loaded from Google Font API looks awful in Firefox 3.6 on Windows only

The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.

As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.

embedded font on website won't display in IE or Chrome

Internet Explorer 9 and less has some issues displaying .TTF files. It does not support embedded fonts via the CSS3 scheme without first converting into supported formats (.svg, .ttf, .eot, etc.). However, you can tweak your @Font-Face Syntax to support this.

With Chrome not displaying the correct font, this is due to different browsers having different needs. You can find more information in the second link in the more information below.

A side note as well: if your font is hosted on Google Fonts, embed a link into your website instead of hosting it yourself.

TLDR; need a comprehensive list of @font-face types

More information:

SO Question - IE problems with True Type Font files

SO Question - Font-Face problem in Chrome

Further Hardening of the Bulletproof Syntax - Fontspring.

Bulletproof @font-face syntax - Paul Irish

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

IE9 blocks download of cross-origin web font

IE9 supports .WOFF; IE8 does not, and supports only .EOT fonts.

Open the IE9 F12 Developer Tools and you see the following messages:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

Examining your HTTP headers, it's clear that your cross-domain access is not configured properly, as there is no Access-Control-Allow-Origin response header on your WOFF files. They're also delivered with the wrong MIME type (text/plain) although that's not causing your problem. However, failure to map woff to the correct MIME type can cause problems as some servers will not serve files with "undefined" extensions and will instead return a HTTP/404 error.

Why does internet explorer 9 show weird characters on UTF8 and whitespace content?

What is the character encoding being used by the file that stores the HTML? Determine the encoding, then set that encoding to be used by whatever parses the document. For example, if your document is stored with the UTF-8 encoding:

<head>
    <meta charset="UTF-8">
</head>

I would also try changing the font, just to make sure it's not a glyph issue, but I suspect encoding as well.

---

Related Topics