3

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?

Bhumi Singhal
  • 8,063
  • 10
  • 50
  • 76
  • 1
    ...why can't you just add `` to your document? – josh3736 Jan 18 '13 at 06:07
  • As I do need the ttf files on my system/server and so its more feasable to read from there. – Bhumi Singhal Jan 18 '13 at 06:11
  • *Need?* The point of 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. – josh3736 Jan 18 '13 at 06:13
  • See the point is that while using the google link above , if u inspect the URL ull see that the rendering is via .woff again ....So the question remians ....no TTF only WOFF? – Bhumi Singhal Jan 18 '13 at 06:17
  • 1
    When you use the Google Font API, it **generates** a [stylesheet](http://fonts.googleapis.com/css?family=Philosopher) that's most appropriate and efficient for your specific browser. Going to that URL gets you a different stylesheet in IE9 (that includes EOT format) than you'd see in Chrome. It doesn't matter what format they actually send; the browser will still render it just fine. – josh3736 Jan 18 '13 at 06:22
  • I want my application to be usable in an offline environment. My application is hosted locally but an internet connection is not required. – mjaggard Apr 21 '16 at 13:39

3 Answers3

5

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.

josh3736
  • 139,160
  • 33
  • 216
  • 263
  • Thank you for the answer but I did require the ttf file with me as I need the same while generating an image of the text using Imagick PHP . In the corporate you need to do as is told to you .. :) So as i found the issue was the renaming of the ttf file. – Bhumi Singhal Jan 18 '13 at 06:50
  • If your *real* problem was using the font in ImageMagick, you should have said that in your question, since that's an entirely different problem than embedding fonts in a HTML document. – josh3736 Jan 18 '13 at 07:24
  • 2
    No the problem was why not a ttf was being rendered onto the web page while the woff was. And you were trying to tell me to use google links only while i clearly stated i need to use it from the server. The issue was clearly stated – Bhumi Singhal Jan 18 '13 at 07:41
  • There are situations (also discussed in SO) where a font does not work when used with `link` from Google site but work OK when downloaded, processed with FontSquirrel, and uploaded to one’s own server. Besides, using Google fonts as hosted by Google makes things depend on connections from the user’s device to the Google site. Quite often, it is *better* to use them from your own site (and Google offers a download). – Jukka K. Korpela Jan 18 '13 at 08:52
  • It won't necessarily be rendered correctly in Chrome for Windows. There appears to be an issue where you need an SVG instead of WOFF otherwise Chrome isn't happy. Google Fonts don't appear to have an SVG version :( – Jedidja May 14 '13 at 22:09
  • @Jedidja: Chrome on Windows doesn't have any issues with WOFF fonts (from a technical standpoint). Some people [don't like](http://www.fontspring.com/blog/smoother-web-font-rendering-chrome) how the fonts are [rendered](http://www.fontspring.com/demos/svg-vs-woff/) on Windows (with ClearType instead of simple antialiasing), but this is completely subjective -- I think they're fine. From a technical standpoint, using SVG is a hack, and comes with drawbacks. – josh3736 May 14 '13 at 23:40
  • I want my application to be usable in an offline environment. My application is hosted locally but an internet connection is not required. – mjaggard Apr 21 '16 at 13:39
0

I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF

snoob dogg
  • 2,491
  • 3
  • 31
  • 54
-1

Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.

The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :

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

}

it worked just fine.

Bhumi Singhal
  • 8,063
  • 10
  • 50
  • 76
  • I downloaded Philosopher, changed the name of the .ttf file, and tested. Works OK on both Chrome and Firefox. So the problem is not in the rename. Perhaps the name of your renamed .ttf file just did not match the name you used in `@font-face`. – Jukka K. Korpela Jan 18 '13 at 09:03
  • Well could you provide a fiddle for the same? As it just didnt work my side. – Bhumi Singhal Jan 18 '13 at 09:56
  • I don’t know how to upload a font file onto jsfiddle, but here’s a demo on a normal server: http://www.cs.tut.fi/~jkorpela/js/philosopher.html – Jukka K. Korpela Jan 18 '13 at 10:02
  • You can use whatever valid name you want for a .ttf file, as long as you are doing the name matching correctly. – David Da Silva Contín Mar 01 '14 at 18:52