Back in old days, designers needed to think twice about which font to use. They could use different fonts but their choice was too limited. Only the web-safe fonts, assumed to be present on most computers, could be used. Some of these web-safe fonts are Arial, Verdana, Georgia, and Comic Sans.
Fast forward to 2011, way past beyond font replacement techniques like Cufon and @font-face, Google single handedly took the responsibility of bringing great typography to the web. With over 190 fonts in the Google Font Directory and counting, a designer now has a wide choice of fonts to choose from. In this tutorial, we will be learning how to use and install Google fonts for WordPress. Let’s start.
1) Visit the Google Fonts Directory
Head over to the Google Fonts Directory. You’ll be presented will all the 190 fonts. This font directory is ever expanding, therefore more and more fonts keep on being added. Browse to this directory and if you like any font, then click on “Add to collection” button. You can even compare two or more fonts by adding them to the collection. This is really a neat feature of Google fonts, so that you can pick the right combination of fonts for your site.
2) Solving the Fonts choosing dilemma
With so many fonts to choose from, there’s bound to be some dilemma choosing them. Therefore create a collection and then see them together how they look like. Take a look at below screenshot:
Some tips for selecting the right typography:
- Use the same font family through out the site.
- Don’t confuse the users by using many fonts in the site. In most cases, 2 or 3 fonts is enough.
- Use Serif fonts for heading, or other heading content, and sans serif for body content. Sans serif are easier to read on the screen and therefore in the body, you can use Sans serif fonts.
Serif font or Sans serif font ?
Currently, there are 44 serif fonts and 63 sams serif font. From the left side, you can select this filter and browse the fonts of your choice, removing out the extra clutter. This directory is so vast that sometimes you’ll get confused, which one to use. Just click on Add to Collection. You can add more fonts, and compare them all together. Move to the second step by clicking on Review.
You can compare both the fonts from here. Also check out those “styles”, “character set”, etc tabs, they will give you more idea about the font.
3) Get your code and add it in theme
So now that you have chosen a font, its time now to get the code for that font and integrate that font into our theme. Click on that Use button. A new page will open that will display the page load, style, choice of characters and finally the code. Here’s a short explanation of the code:
Standard : Insert this code in header.php (after opening of <head> ) It should be the first element in Head section.
@import : This code can be inserted at the top of style.css file. (But after the theme credits)
Javascript : This is the javascript.
Now from all these three methods, use any ONE method only. We would recommend the first method in which you need to add the code header.php. To add code, go to Appearance > Editor and click on header.php
After the opening of <head> section, paste this script. Take a look at below screenshot:
4) Using the font
Now that the Google font is added in the theme, use the font freely anywhere you wish to. Add the font name to the CSS style, as you normally do.
In the CSS, just use the code like this:
font-family: ‘Istok Web’, sans-serif;
In most cases, you will need to edit style.css and change your current fonts to this new fonts. So that’s how you can integrate Google fonts in your theme. Want more help ? Check out this getting started with Google fonts section.
The plus point of Google fonts is that you are presented with a vast choice of fonts, and are free to use in any website. Go ahead, and give your website that unique look.
