Google Web Fonts - How to Use, Download and Sync

Typography is the key element in the design process. While designing a web page, business card, brochure or a news paper advertisement fonts and text style plays an important role to get user attention..
May 28, 2013 Tips & Tricks, google fonts

Typography is the key element in the design process. While designing a web page, business card, brochure or a newspaper advertisement fonts and text style plays an important role to get user attention. To design stunning elements we need fonts and fortunately the big daddy provides a lot of them for free. We can use Google Web Fonts in our designs and they are pretty awesome and very easy to use.

How to use Google Web Fonts on a web page

Its pretty easy to use Google Web Fonts on your website. You can do that in just three simple steps:

  1. Choose single or multiple Google Web Font(s) from Google fonts website: https://www.google.com/fonts and add them in your collection.
  2. Hit the use link above the list of your selected fonts and Google will show you different methods to include these fonts on your website. Standard, @import or Javascript
  3. I always use Standard method with a small trick to load the fonts before displaying the web page.

Here’s the code you would need to use Google Web Fonts on your website.

I’ve added Open Sans and Lobster fonts to my collection for this example.

<head>
<link href='https://fonts.googleapis.com/css?family=Lobster|Open+Sans' rel='stylesheet' type='text/css'>
<!-- This will prefetch content from google web fonts website -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
</head>

The above code goes within the [htmltag tag=”code”]<head>…</head>[/htmltag] tags and the dns-prefetch link tag will fetch the contents from Google Web Fonts website. This will help resolving issues like font changes after the page load.

body{
    font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Lobster', cursive;
}

In the above CSS code, I’ve defined the body font as open sans and headings font as lobster. Similarly, you can use different fonts for different elements.

How to Use Google Web Fonts while Designing?

As a designer, we all need to design the mockups of the creative work before we can publish the same. If we need to use Google Web Fonts while designing layouts in Photoshop or Illustrator we will have to download the font and install the same in our Operating System.

Using Google Web Font Download Link

We can always click the Download link to save the fonts on our hard drive and then install the font on our operating system. However, what will happen if that font is updated and new characters are added or there’s a new and improved version available for that font. We need to keep a check and if the new version is available, we need to uninstall the previous version and then install the new version.

What is there’s some tool which can automatically do this task and save us a lot of time and effort?

Fortunately, there are tools available which can make our life easy and keep Google Web Fonts updated all the time.

Using Skyfonts to Download and Sync Google Fonts

Fonts.com have teamed up with Google to offer google web fonts for desktop via Skyfonts software.

We are proud to have teamed up with Google to offer desktop versions of their popular Google Fonts free of charge. Offered for use in print, these fonts are delivered using SkyFont’s patent-pending font delivery technology and can be used anywhere.

Each time a font is updated — such as when new characters are added — SkyFonts will automatically update the font on your device. Syncing Google Fonts with SkyFonts will also improve your web browsing experience, by cutting the time spent downloading fonts. ~ Fonts.com

Skyfonts software is available for both Mac and Windows. You can choose the fonts you want to use while designing and Skyfonts sync these fonts with your operating system fonts and make them available in all applications as normally installed fonts. If a new version of the installed font is available, Skyfonts application will automatically sync and replace the older one with new version.

Download Skyfonts Software

There are other methods available to download all Google Web Fonts on your computer, however, I found Skyfonts the easiest and efficient to keep all the fonts updated.

  • Tahnesha

    ok i downloaded sky fonts however how do i stall the fonts into photoshop?

    • I believe you need to re-start photoshop if you aren’t able to see the font in the list. This could happen if you are on Windows. On mac I get it right away as soon as its loaded by sky font software.

  • Linda Wild

    I have used Sky fonts and also downloaded and installed with suitcase. However just today some of the fonts I installed are not being seen by illustrator. All my other software can see the fonts – but whatever I try illustrator just will not load them – help please?

    • Try restart Illustrator, sometimes, Illustrator and other Adobe software does not load new fonts when they are already open.

    • Kevin T

      I am having the same issue! Would love to have a solution!