How to Use Eye Catching Fonts in Your Websites from Google’s Library


Once upon a time designers were limited to using system fonts in web design, which spawned a trend of creating text-based images and graphics. This technique may have made websites look better, but it introduced other problems. Webpages loaded slower and there was zero SEO value in using graphical headings. Along came changes to browsing that allowed font embedding, but this too was a cumbersome and inconsistent method of getting around Arial and Comic Sans.

Today, support for cloud fonts is almost a standard, to the joy of designers everywhere. While premium services such as Typotheque and Typekit let you take advantage of a huge selection of fonts, they are costly and not always practical. Google’s solution with Version 2 of their free online font library has been to provide a high quality and dependable service for embedding fonts. Here are a few ways you can get the most out of using this fantastic resource.

Google Web Fonts

Free tool for web developers

Find the perfect font

Allow your website content to drive your choice of font and choose appropriate styles, which suggest the qualities you want your design to communicate. Enter preview text into the font finder interface, and then proceed to fine-tune your search by selecting filters and setting attributes using the handy sliders in the left sidebar. If you have a hard time getting results, reduce the specifications by collapsing one of the attributes such as the “width” option.

Choose the Right Style

Each font in the Google library has several different styles associated with it. If you plan to use the font as a heading, a heavier weight may grant a more powerful effect. Many fonts also include a bold or italic version that should be used in favor of the default typeface. These various styles are hidden in the default preview list, so you will need to click the “show all styles” link in the bottom right corner of the font’s preview box to see what it has to offer. Clicking “hide all styles” will collapse the preview.

font face embed tutorial

Choose Harmonic Combinations

Limit yourself to a small number of typefaces when building your font combinations – three or less should do. Choose fonts that share similar attributes or consider using different weights or styles of the same font.However, go for a bit of contrast; if your fonts are too similar with only a small variation, it can make your typography look confused. The goal is to highlight a distinct style.

Some Excellent combinations put together by designer Josh Johnson are:

  • Lobster & Cabin
  • Allerta & Crimson
  • Arvo & PT Sans
  • Corbin & Nobile
  • Ubuntu & Vollkorn

Test Drive

Once you have found the perfect font combination, selected your styles, and added them to your collection, clicking the “Review” button will bring you into the Test Drive interface where you can view your font selections in action and make any necessary adjustments.

Google Font embed tool

Use one Header Link for Multiple Fonts and Styles

When you add fonts to your collection, a blue bar will appear at the bottom of the screen with a big “Use” button. Select the styles you wish to include and note the page load meter on the right side. The more styles and fonts you select, the heavier the page load will be, and including individual fonts and font styles will make the load even worse. With version 2 of Google Fonts, the code snippet generated for you will combine multiple fonts and selected styles into one stylesheet for you, which is preferable to linking each one-by-one.

Web Development Tutorial

To understand how this method works, each font is separated by a pipe. Specific styles are appended to the font name by a colon and separated using commas. Spaces in the font names must be replaced with a plus.


Always place your link code before any “<script>” tags in your head to allow Internet Explorer to detect them properly. As an alternative, you can opt to use @import in your CSS document instead:

/* Google Fonts Import
-------------------------- */
@import url(,bold|Droid+Sarif:regular,italic,bold,bolditalic&subset=latin);

Add a Transparent Shadow for Text Smoothing

A common complaint with embedded fonts viewed in Windows is the jagged edges that plague some font styles. This is a serious problem for designs that use extremely light or thin fonts, where jagged edges completely ruin the font’s elegance or readability. Thankfully, there is a solution in the CSS text:shadow property. By setting a 1pixel transparency, browsers that support this rule will display the text with a light anti-aliasing effect. Add the property to any class where one of your Google fonts is specified, or use it in your universal declarations to apply it to the whole site.

text-shadow: 0 0 1px transparent;

Google Fonts for WordPress

web development font embedding

If you are like thousands of designers, you probably use WordPress for your own portfolio or as a platform for client sites. The “WP Google Fonts” plugin uses the Google fonts API to provide a slick interface for selecting up to 6 fonts and associating them with specific elements. There is a custom CSS box for assigning fonts to special classes as well. This is an excellent worry-freealternative to embedding fonts or font options directly into the theme; frequent updates to the plugin ensure changes to the Google API will not affect your website.

create free website wix below post

Further Related Readings

  1. Geoff McMahen September 15, 2011 at 10:21 am

    Great resource! Thanks for sharing!

  2. Shekhar Pundir September 17, 2011 at 12:20 am

    Very useful for us .Thanks for sharing .

  3. Jim Divers September 20, 2011 at 5:56 am

    Great info, a million thanks.

  4. Explainafide December 1, 2011 at 5:01 am

    Having different fonts really makes your design stand out. Just play it safe when it comes to the body text!

    1. Tayyab December 1, 2011 at 5:17 am

      brilliant observation you have…

  5. pratap123 March 25, 2012 at 10:27 am

    Awesome stuff and fantastic font collection

    thank you

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved