Tuesday, September 27, 2011

Adding Google Web Fonts to a Sproutcore app

Yesterday I was playing with the Hubbub Sproutcore app that is just plain beautiful (and useful, if anyone used it over here in stodgy Italy).
Anyway I noticed that the beautiful texts on the home page are not images, but actual text with fonts. I did not know I had such great fonts on my computer and in fact I don't.

Those fonts come from Google Web Fonts and you can use them too, right away in any of your web apps or sites. Since I am working on a Sproutcore app that could use some beauty I decided to style the app name with this font.

Now, if only I knew how to add the css link to the html generated by abbot...

[/me is gtfw & source browsing for a good 30 mins...]

The solution turns out to be pretty simple and elegant (as everything in SC world, wink wink).
Open the Buildfile in your favourite editor and add a stylesheet_libs option to the project config as follows:


config :all do |c|
    c[:javascript_libs] = ['http://maps.google.com/maps/api/js?v=3.2&sensor=false']
    c[:stylesheet_libs] = ['http://fonts.googleapis.com/css?family=Delius|Leckerli+One|Pacifico']
end