Last night Google announced the launch of their Font Directory .
This is a great news, as you an easily add some great looking fonts to your Headway powered web site, free of charge yes even for commercial sites, without the use of additional plugins like Cufon, Typekit or adding additional custom @font-face fonts.
There are 19 fonts currently available to choose from and we are going to use two of these in pimping enhancing our Headway powered site as part of this tutorial ;)
Afraid of custom CSS? Don’t panic ! The steps I have outlined below are very straight-forward and you will be up and running with some great looking fonts in a matter of seconds, yes seconds!
1. log into wordpress
2. Select Appearance and then Editor
3 . Now select the custom.css file for the Theme
Add in the code below
/*Load Custom Fonts */
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Cardo);
/*Target Site Title and all H1 tags*/
h1,a.header-link-text-inside{font-family:Lobster,"Lucida Grande",Lucida,Verdana,sans-serif;letter-spacing:2px;}
/*Modify Post and page titles */
.entry-title,.page-title,h2.entry-title,h1.entry-title{font-family:Cardo,"Lucida Grande",Lucida,Verdana,sans-serif;letter-spacing:2px;}
Don’t trust me :) then watch this short video where we do this .
The steps above can be fine tuned to any web page development application or web theme as long as you know the CSS selectors that you want to target.
Learn more about the fonts currently available at the Google Font Directory and if you want to dive in deeper check out the Google Fonts API .
Thanks for the tutorial. I was going to try to figure this out myself but I’ll just copy and paste your code instead :)
Should be enough to get you started :)
Hey there
Great tips, thanks, plus I really like your site colors and overall look :)
I was wondering on the subject of this, how to change H2 tags rather than H1?
Thanks!
Steve.
Hi Steve
You just include or replace the H2 selector and add the font-family of your choice .. the example below includes some additional letter spacing
/*Target Site Title and all H1 tags*/h2{font-family:Lobster,"Lucida Grande",Lucida,Verdana,sans-serif;letter-spacing:2px;}
The next release of Headway will make customising your site a whole lot easier ;)
Thanks for this info. I’ve tried it on a test site, and although it works in the Visual Editor, and I get the Google fonts, when viewing the site normally, the Google font isn’t displayed, and the next fallback one is used. I’ve checked the computed style, and it says
font-family: ‘Josefin Sans Std Light’, ‘Lucida Grande’, serif;
The browser is falling back to ‘Lucida Grande’.
Any ideas?
Drop us a line via our contact form with a link to your page and any additional information :)
Did this work out for you ?
Awesome! Am going to build this into future Skins.
Cheers Chris
They really do give a bit of life to sites :)
What font set is used to get the incredible look of ‘The Erudite’ theme?
If you check the code you ca see
font-family: 'gill sans', 'gill sans mt', 'gill sans mt pro', 'century gothic', corbel, sans-serif;Otherwise if you want a more firm answer you can always use the WhatTheFont web site :)