So, have you noticed the rather fine font I’m using for reallysimplesites.co.uk? It’s called “Gruppo” and it’s a little different, chances are it’s not in your font file.
For those of you who didn’t realise, any fonts you see on the web are really already on your computer, the site tells your browser what fonts to show where and the browser uses the information in your font file to render the page, there you go… The web is as limited as your collection of fonts – until the Google font api that is.
With Drupal, a little practice, plus the Getting Started page, you’ll be able to add a multitude of new fonts to your site.
Just for the sake of simplicity, here’s my Google Webfonts for Drupal quick start guide:
For this example I am assuming that you have a Drupal site up and running and that you are confident in making changes to theme files.
- Okay – lets start with a biggy – choose your web font. Go to http://www.google.com/webfonts and take your pick - as you know I like Gruppo, click on that font’s listing and you’ll get to the really usefull page
- Have a look at the top of the page and you’ll see Use this font highlighted in blue, click it
- Right at the top of this page, under the heading ‘To embed Gruppo into your web page', copy the following code as the first element in the of your html document.’. You’ll see <link href='http://fonts.googleapis.com/css?family=Gruppo&v1' rel='stylesheet' type='text/css'> Copy it!
- In the folder where your theme lives, have a look for page.tpl.php and open it up with your favourite text editor, now paste the code you copied just in front of the <head> tag. Save the file and close it again.
- While you’re in the theme folder open up style.css and add ‘gruppo’ to the front of your font-family tag of choice...
h2 {
font-family: 'Gruppo', arial, serif;
font-size: 20px;
margin: 0 0 6px 0;
position: relative;
color:#0063DC;
}
- Save and close the file, then go try the new look site...
