Typography is the key element in the design process. While designing a web page, business card, brochure or 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
It’s pretty easy to use Google Web Fonts on your website. You can do that in just three simple steps:
- Choose single or multiple Google Web Font(s) from Google fonts website: //www.google.com/fonts and add them in your collection.
- 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
- 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='//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 resolve 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 that can make our life easy and keep Google Web Fonts updated all the time.
Using Skyfonts to Download and Sync Google Fonts
Fonts.com has teamed up with Google to offer google web fonts for desktops 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, the Skyfonts application will automatically sync and replace the older one with the 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 most efficient to keep all the fonts updated.
