Spice Up Web Design with Google Fonts

  • follow us in feedly
Published June 30, 2013 by Brad Knutson
Google Web Fonts

I come across a lot of really well designed sites. Most of these sites are on the cutting edge of web design, using the latest in CSS and HTML5 to produce beautiful websites. One thing that sets sites apart is the font they use.

The problem is when you find a really great looking font that you want to use, a lot of times the license associated with it requires that you purchase it. A lot of bloggers, small businesses and start-ups might not want this extra expense given the money they’ve already put into their online presence.

When faced with this situation, a lot of web designers will use the font in Photoshop to create an image, most often for the title of the webpage, or for quotes, logos, and so forth. This way they can get the style they want from the font, without actually having to import a web font or pay for a web version of the font. Sure, they could use alt and title tags on the image, but it’s still not as desirable as text.

There will always be fonts out there that are designed by talented people that are available for a fee, but for web designers that want to kick their sites up a notch, meet Google Web Fonts.

Google Web Fonts are a variety of fonts that are web safe, cross-browser compatible, and best of all – free! Google even serves them up for you, so you only have to link to them!

Using a Google Web Font

  1. Head over to the Google Web Fonts page.
  2. Browse their popular listings, or search for a font style you are looking for. You can font thickness, slant, or width.
  3. When you’ve found a font you like, click the Quick Use button.
  4. If your font comes with different styles associated with it (italic, bold, etc), you can select or deselect the instances that you need. Pay attention to the burden this file will have on your page load time, which is shown on the right.

    Google Web Fonts Page Load

  5. Farther down the page, you’ll see your embed options: Standard, @import, and Javascript.

    Google Web Fonts Usage

    To be as SEO friendly as possible, I would choose either the standard, or the @import option, although the Javascript may provide a more user-friendly experience.

Quick Tip: Rather than linking to the Google provided stylesheet, you can open the URL and copy the contents to the top of your stylesheet. This will reduce at least one HTTP request.

For example, if I’m interested in the Gravitas One font, open up the URL provided (http://fonts.googleapis.com/css?family=Gravitas+One) and copy the contents.

  1. The final step is to style whatever text you want with your new font name. If you chose ‘Gravitas One,’ you’ll use this CSS:
    font-family: 'Gravitas One', cursive;

And that’s pretty much it. Search engine friendly, web safe, cross-browser compatible fonts.

WordPress Quick Tip

Rather than adding the CSS link in the header.php file, it’s a better practice to write a function in your functions.php file. If you use child themes, you may not want the extra HTTP requests if you are not using the font, so using the functions.php method prevents an unnecessary HTTP request.

Enter this code in your themes functions.php file:

    function load_fonts() {
    wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Gravitas+One');
    wp_enqueue_style( 'googleFonts');
add_action('wp_print_styles', 'load_fonts');
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">