Integrating googlefonts in Ruby on Rails 3.2 application

Question

I have to use fonts form Google in one Rails application . The ordinary HTML code defines googlefonts usage like this :

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>

I tried to add the same line in my alpplication.html.erb , but it didn't work . Then I extracted the @font-face definitions (from the location pointed by link-href) into a separate css.scss file and included the file in my manifest css file :

#googlefonts.css.scss
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/xxxx.woff) format('woff');

}

#application.css

   *= require googlefonts
   *= require_tree .

It did not happen again.

Please, help me solve the puzzle. What is the best practice of using fonts, hosted in Google in Rails 3 application ?

EDIT : Here is my css, referring to @font-face definition :

#styles.css.scss
body{
font-family: "PT Sans", Arial, Helvetica, sans-serif;
font-size:13px;
line-height:25px;
text-shadow:none !important;
color:#444;
}

Answer 1

I think I've found the problem :

Refinery has partial for head section , located in refinery/ dir. The format of this partial is .erb (default) . My application.html is .haml format . When I converted the _head.thml.erb to _head.html.haml , it worked nicely . Setting google fonts is simple , just like Stephenmurdoch described in his answer .

Answer 2

Using your example code, the following works just fine for me:

# stick this inside the head section of application.html.erb 
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>

# stick this in your css file:
body{
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
}

That's all you need, it works just fine. I'd suggest ditching the googlefonts.css.scss file unless you've got local copies of your font that you want to serve. The link google provide you with actually handle that code for you anyway, see for yourself