Hi, this is Laura, and this week I’m going to show you how to use Google Webfonts on your website.
Have you ever felt kind of bored with the standard fonts you’re using to make sure your website can be displayed correctly in all browsers? Arial, Helvetica, sans-serif – sounds familiar? Well, I’ve got the solution for you in this easy tutorial.
What am I talking about?
I’m talking about Google Webfonts. When you are using Google Webfonts, you have a huge selection of beautiful fonts to choose from, plus you don’t have to worry whether the browser of your website visitor supports this particular font or not. That’s because they are linked into your code from where Google has stored them on the web so your site can load them from there and display them, which will work in most browsers.
I will show you how to include Google Webfonts into your website using a simple portfolio website we use when teaching our Web Design Beginner class.
Let’s get started!
1. Taking a look at our original website
This is what our website looks like with standard fonts, in this case I chose Lucida as font family. Let’s take a closer look at what the header fonts look like, together with the relevant HTML and CSS code:
As you can see, the header looks quite boring with these fonts. What we really don’t want to do is make boring websites, so we’re now going to change the tagline (that says ONLINE PORTFOLIO) and the title (which is my name) into some really awesome-looking fonts.
2. Choosing Fonts
We will now take a look at the font selection that Google Webfonts offers us. To do so, just go to http://www.google.com/webfonts and you will see a big list of fonts that you are free to use on your website.
The most difficult thing to do now – and actually in the whole tutorial – is to choose the font you would like to use. Take your time and look around, there are really loads of goodies to choose from. As I have a tagline and a title, I’m going for two different ones to make things look more interesting. For my name I choose a font called Special Elite and the words ONLINE PORTFOLIO will be in Miltonian.
3. Using Fonts
We’re now going to include these fonts into our website. For this, you need to paste some code into your HTML as well as in your CSS document, but don’t worry, Google will give you the code snippets you need. Make sure you follow the instructions step by step, and you’ll see, it will work in no time at all.
If you click the font you chose from the list (which is Special Elite in my case), it will take you to another page where you can see a preview of the font in different sizes. You will also find the option “Use this font” on the right side of the menu in a blue box.
Click there and you will see a site that gives you the code you have to use to include the font in your website.
The first piece of code needs to go to the <head> of your HTML document, just copy and paste.
Remark: If you value writing valid code, you might want to insert the final slash / just before the closing >, as the Google guys obviously forgot to put it there.
The second piece of code goes to your CSS stylesheet, and you use it to replace the old font-family instructions.
If we look at our website in our browser now, it will show up like this:
Great, we successfully changed one line into our chosen Google Webfont! This already looks much better than before.
To finish our task, we will do exactly the same now for the tagline by clicking on the font we chose from the list, copying and pasting the code snippets to our HTML and CSS documents and saving them. I’m using the Miltonian font for my tagline.
This is what it looks like after I included the second webfont, and I think you agree with me that it looks much much better than it did with the standard fonts I was using before.
Let’s take a look at the whole page again, and hurray, our new font selection makes the whole site way more appealing.
Summary
As I hopefully showed you, using Google Webfonts is as easy as pie, so go ahead, play around with them and use them to add some pizzazz to your website!
If you liked this tutorial, I’d be happy to receive some comments, and please don’t forget to share 🙂
