Why are my Google Web Fonts pixelated?

Question

I am trying to use google fonts in a simple website. The tag that I am using is

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

The css is

body {

  padding: 0;
  text-align: center;

  line-height: 180%;

  background: #1a2426;
  color: #f7f7f7;

  font-family: 'Lobster', serif;

}

The problem is that the font looks pixelated when I pull it up in Chrome. I was wondering if anyone could explain why?

Example

Answer 1

It appears that the Chrome Development team is aware of this issue. It is regarded by them as a bug that they are working on.

The best solution I've found is not to do any of the recommended CSS hacks (having a slight drop shadow, etc) but to rearrange your font stack so that the .svg version loads first since Chrome doesn't fully support TrueType fonts yet.

For example:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘webfont.svg#svgFontName’) format(‘svg’),
    url(‘webfont.woff’) format(‘woff’),
    url(‘webfont.ttf’)  format(‘truetype’);
}

Check out this article for further info.

You can organize the load font order. you just have to understand that by calling http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' > you're bringing in an external stylesheet that says:

/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

so by just including that call directly in your stylesheets, you have control over the order load.