Html – ttf files not rendering on Chrome and Firefox

cssfirefoxfont-facegoogle-chromehtml

I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.

I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

then it all works fine for Chrome and Firefox.

Any solutions to this problem as i have seen the ttf files being rendered onto the browser?

Best Answer

Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains @font-face definitions for the font(s) you want to use.

<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>

(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)

Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).

Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.

Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.

Related Topic