Google Chrome: Some fonts not being displyed or displayed incorrectly

[hk2011]

Hi there,
I'm quite sure this is a problem with Chrome, but I couldn't find any solutions on the web.
For some reason, Chrome is unable to display embedded fonts on webpages, so it looks a bit messy.
It works fine on firefox, safari, explorer and opera. Any ideas how to fix this?

[sande145]

I solved this issue by using cufon. It works in all current browsers. Hope this helps.

[a53mp]

You can embed fonts, but most browsers won't support it. The best solution as you found would be to use a cufon or sifr to embed fonts. There are drawbacks though to using it.

[deepsand]

You can embed fonts, but most browsers won't support it. The best solution as you found would be to use a cufon or sifr to embed fonts. There are drawbacks though to using it.
For the benefit of the OP & other readers, please elaborate.

[a53mp]

I haven't used sifr in awhile, but if I remember correctly that is javascript and flash dependent. Cufon is javascript depending. So users who do browse with javascript disabled by default (I do with no-script) or with devices or browsers that do not support flash/javascript they will never see the font you want them to see. The main disadvantage is the file size... at least with cufon. When you create your cufon font, it converts the font into a javascript file which you must load. The javascript file can be fairly large, especially if you have multiple fonts. There may also be delays in rendering on the actual page especially if you are using it to change large amounts of text. The file size wouldn't be too big of an issue if you can minify it and combine it with other javascript files using minify, however I've never been able to get that to work so I always end up having to call cufon separately. From what I remember cufon is easier and faster to use than sifr.. using javascript for font replacement can work and make your site look nicer, especially if used as an accent and not to replace the entire site content. Another alternative is http://www.google.com/webfonts I've played with that before, it is nice and easy to use, but (at least from my last use) you are limited in what fonts you can use and you can not upload your own fonts.

[renthemighty]

id use cufon as well.. but using cufon will mess up in ie .. you need to exclude the funcion in ie which will cause validation errors .. using one of the main 5 should work unless your using a different font smoothing.. which you should be able to disable by taking out the javascript call.. if its external .. what the link?

[a53mp]

I read there is a new cufon version that validates/works in IE. If you !IF IE the function, just make sure you do it for the javascript call as well (where you define what gets cufon'd)

[holmpage]

Has anyone used Google Web Fonts? http://www.google.com/webfonts

[a53mp]

I have, but like I mentioned the limitation on fonts (unable to upload fonts) led me to use other services. I think they have more fonts now than the last time I used it, but if you need something they don't offer then you will want to look at another solution.

[dgswilson]

Chrome is unable to display embedded fonts on webpages

By embedded fonts are you talking about css/font-family? Is it a regional incompatibility (Hong Kong)? I like to experiment with no font style and see what browsers return.


http://www.w3.org/TR/css3-fonts/ (http://www.w3.org/TR/css3-fonts/#basic-font-props)

[dgswilson]

Someone may remember this about chrome and css [ font-size:14 ]. Been a long time but chrome uses what's in this type bracket, may need an "if" in there somewhere.

[weegillis]

An embedded font is any that is loaded using a CSS AT-RULE, as in @font-face.

w3.org: Embedded font (http://www.google.ca/search?q=Embedded+font+site%3Aw3.org).

Generally speaking, they have been supported for as long as CSS 2.1 has been around, but with several provisos. One condition that must be met for each browser is the correct font format.

In the case of Chrome, any would be correct EXCEPT EOT. But the OP states that other browsers are loading the font, so EOT is not the problem (only IE can render EOT). Chrome can render all the others.

Another condition may be that Chrome thinks the font is being loaded from another domain? What file information is displaying in Web Inspector?

[Abustal]

i have this problem in 19 version of Canary Chrome...

[deepsand]

Canary is a pre-Alpha version; I believe that Chrome 19 is now in formal Alpha phase, what Google calls "Dev."

As Chrome v19 is not yet a final release candidate, you should report any problems directly to Google.

[a53mp]

I have since found http://www.fontsquirrel.com/fontface/generator
This works GREAT and even better than cufon or any other solution that I have used.. I highly suggest you check it out if you need to use embedded fonts