0

I have created a simple web app/form using google app engine. the site is here; madhurdrishti.appspot.com

I was using some fonts from google web fonts.

the ref is;

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

the css is;

h3 {font-family: 'Lobster Two', cursive;
    text-shadow: -1px 1px 0px #fff;
    font-size:1.4rem;
    line-height: 2;}

The fonts show correctly in IE and FF but not in chrome. You can open the same in FF and in chrome, if you have both and see the difference.

Anyone has any clues as to what is wrong?

Adam Crossland
  • 14,198
  • 3
  • 44
  • 54
Rishav Sharan
  • 2,763
  • 8
  • 39
  • 55

1 Answers1

3

You need to change your H3 heading like so:

h3 {
    font-family: 'Lobster Two', cursive;
    text-shadow: -1px 1px 0px #fff;
    font-size:1.4rem;
    line-height: 2;
    font-style: italic;

}

I just added font-style: italic; since you're importing italisized version of the font

kernelpanic
  • 2,876
  • 3
  • 34
  • 58
  • Thanks. while it works, it looks horrible on Chrome. Its all jagged and aliased. any ideas as to the problem? – Rishav Sharan Apr 11 '12 at 09:15
  • Yeah, it's not very pretty. I'm not sure what you can do with google font library.. Try smoothing? `-webkit-font-smoothing: antialiased;` – kernelpanic Apr 11 '12 at 13:46