Chrome 10/Windows @Font-Face Encoding Trouble

Chrome 10/Windows @font-face encoding trouble

It is highly likely that the webfont is not assembled properly.

I have downloaded CaviarDreams font which is used on Sebastian's site and got the same bug.

Then I downloaded it from here: http://www.dafont.com/caviar-dreams.font, used fontsquirrel.com's typekit generator, and the result was perfectly fine.

@font-face not displayed in Chrome (Windows)

The problem was solved. Font Squirrel are broken my font, so I used fontface.codeandmore.com service, his @ font-face kit perfectly displayed on any browser including Chrome (Windows). Thank you all for your help!

Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?

Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with @font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.

@font-face special characters visible in Chrome, but not FF or IE

OK, so it turns out the missing special characters in the aforementioned fonts were due to the default FontSquirrel @font-face kits not being packed with all the special characters that the print version of the font comes with. You have to repack (some) Font Squirrel web fonts by uploading the print font, and then re-download your custom @font-face kit after modifying the expert settings to include certain entities.

TL;DR Missing special characters from FontSquirrel web fonts in certain browsers? Create your own custom-made font-face kits.

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

Failed to decode downloaded font

In the css rule you have to add the extension of the file.
This example with the deepest support possible:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

EDIT:

"Failed to decode downloaded font" means the font is corrupt, or is incomplete (missing metrics, necessary tables, naming records, a million possible things).

Sometimes this problem is caused by the font itself. Google font provides the correct font you need but if font face is necessary i use Transfonter to generate all font format.

Sometimes is the FTP client that corrupt the file (not in this case because is on local pc). Be sure to transfer file in binary and not in ASCII.

---

Related Topics