To be able to use this feature with Umbraco two things are needed: 1. Usage of the Google fonts on the web frontend 2. Usage of the Google fonts in the Umbraco WYSIWYG editor
Part 1 is very simple: 1. Go to your Master template (Settings -> Templates -> <Your template>) and add the following in the <head> section: <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> (for other fonts see: http://code.google.com/webfonts) 2. Go to your Stylesheet (Settings -> Stylesheets -> <Your stylesheet>) and add the following to your body tag (or other element): font-family: 'Yanone Kaffeesatz', arial, serif;
I have not yet been successful with part 2 unfortunately. I have tried adding the html from Part 1.1 above in the <head> section of the following files without succes: - \umbraco\masterpages\umbracoPage.aspx - \umbraco\umbraco.aspx In my opinion that should suffice, but apparently it doesn't. Could it have something to to with using special fonts in a <textarea> element? Any suggestions/solutions to this would be appricieted by the entire community, I guess.
Using Google Font Directory with Umbraco
As you probably heard Google released an awesome feature yesterday - Google Font Directory, http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html.
To be able to use this feature with Umbraco two things are needed:
1. Usage of the Google fonts on the web frontend
2. Usage of the Google fonts in the Umbraco WYSIWYG editor
Part 1 is very simple:
1. Go to your Master template (Settings -> Templates -> <Your template>) and add the following in the <head> section: <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> (for other fonts see: http://code.google.com/webfonts)
2. Go to your Stylesheet (Settings -> Stylesheets -> <Your stylesheet>) and add the following to your body tag (or other element): font-family: 'Yanone Kaffeesatz', arial, serif;
I have not yet been successful with part 2 unfortunately. I have tried adding the html from Part 1.1 above in the <head> section of the following files without succes:
- \umbraco\masterpages\umbracoPage.aspx
- \umbraco\umbraco.aspx
In my opinion that should suffice, but apparently it doesn't. Could it have something to to with using special fonts in a <textarea> element? Any suggestions/solutions to this would be appricieted by the entire community, I guess.
You need to do quite a bit more than that though, like initialize some javascript. See: http://code.google.com/apis/webfonts/docs/webfont_loader.html
Sorry, ignore me, I'm wrong. :-)
FYI none of the fonts work for me in the Chrome dev build.
Did you every figure this out?
Cheers
Trevor
is working on a reply...