MK

Using Google Fonts in your CSS Stylesheet

using google fonts
AWWWAWARDS – 20 Best Web Fonts from Google Web Fonts and @font-face

Difference between Google and web safe fonts?

Historically it’s been a web development best practice to use only so-called ‘web safe’ fonts.  These are standard fonts that are found on just about every computer whether it’s running Mac OS, Windows, or Linux.  However, it’s possible to import a unique typeface to use on a website and still display the font properly on all operating systems.  For instance, the image on the right shows some non-standard typefaces that can be displayed by using Google fonts.

Using Google Fonts on your website

If you want to start using Google Fonts on your website, it’s important that you know a little something about CSS (here’s a good starter on CSS).  I’ll demonstrate the use of Google fonts by manipulating the typeface of the sentence, “Using Google fonts is the coolest thing ever”.  I’ll format the text using a traditionally web safe font first, and then I’ll explain how to change the typeface to a non-standard Google font.  Lets get started!


Here’s the CSS and HTML for using a web safe typeface:

CSS

<style>

.timesclass {
  font-family:"Times New Roman", Times, serif;
}

</style>

HTML

<h3 class="timesclass">Using Google fonts is the coolest thing ever</h3>

End Result

Using Google fonts is the coolest thing ever


Here’s my process, CSS, and HTML for using Google fonts

I’d like to make the wording a little fancier and stand out from other websites on the internet. So, to pick my font, I’ll go to https://www.google.com/fonts and find a typeface I really like.

I like ‘Lobster’, so:

First, I’ll click the blue ‘Add to Collection’ button to the right of the demo of the font.

Next, I’ll click the ‘use’ button in the bottom right of the screen.

Screenshot 2014-07-01 14.51.40


Next
, I’ll scroll down the page and copy the URL from the code under ‘Add this code to your website’.

Screenshot 2014-07-01 14.56.23

Finally, I’ll paste the URL into my browser, and copy the code that displays on the resulting webpage.

Screenshot 2014-07-01 14.59.27

Now I’ll put what I copied into the previous example (web safe example above) to change the type-face using Google fonts:

CSS

<style>

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), url(http://fonts.gstatic.com/s/lobster/v9/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');
}

.lobsterclass {
  font-family: 'Lobster', cursive;
}

</style>

HTML

<h3 class="lobsterclass">Using Google fonts is the coolest thing ever</h3>

End Result

Using Google fonts is the coolest thing ever


A couple things to note:

  1. This method of using Google Fonts requires your web server to have a connection to the internet (i.e. no non-internet-accessible intranets).
  2. In theory, you could download the font to your web server, and reference the file location.
  3. There are multiple ways to integrate Google Fonts, but I like this one the best because it doesn’t require the use of multiple stylesheets.

As always, if you have a comment, question, or a suggestion on a different way to do this, leave a comment or hit me @ifyouwillit.

More resources:
Web safe fonts, Google fonts
Google Font API for Designers and Developers

Leave a Reply

Your email address will not be published. Required fields are marked *