Why don't Google Web Fonts render properly with direct stylesheet @fontface usage?

Question

I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.

I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:

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

So I go to the URL and use the following code

@font-face {
   font-family: 'Titillium Web';
   font-style: normal;
   font-weight: 200;
   src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}

I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.

I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: https://i.sstatic.net/ydthy.png)

My question is, why does the <link /> version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?

Miltie

I use Font Squirrel and usually get nice results from that if you use OTF. You can even get the font you're after from there here. – Masquerade

@MartyWallace, thanks. Do you use FontSquirrel for Google Web Fonts? Moreso I am interested in why this occurs at all, seeing I am pulling in the same resource. – Miltie

I use font squirrel, was never a fan of Google fonts. And of course, was just providing a resource for you to take a look at to see if it solved your problem, I wasn't intending to answer the question. – Masquerade

I tried to reproduce the problem (by picking up the code that Google sends), but couldn’t: the result was OK. It may have been an intermittent error in Google. In any case, you should normally provide different font formats, as all browsers don’t understand WOFF. Using FontSquirrel, as suggested, is a good idea and avoids the problem. – Finespun

Answer 1

There are a few issues that may answer your question. The main one is that the linked URL actually displays different CSS for different browsers. So if you open it in Chrome and copy that CSS then it may not work in Internet Explorer (particularly pre version 9).

Also, you are using a font weight of 200, which is a "light" weight. The default of regular text is 400. So there is a small chance that certain browsers simply don't show the font unless you specify a font weight of 200. Something like this should help:

body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}

Lavenialaver

Answer 2

Add this to your CSS-file:

@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');    

Finsen

Thanks. I currently use this @ import method over <link>, but more specifically, I was asking why this makes a difference, considering I am grabbing the same code this @ import request returns anyway. – Miltie