Integrating Google Web Fonts into Your Site

Google Web Fonts is a free, Open Source library of hundreds of different fonts that are optimized for use on the Web.  It's a useful resource in designing your website and, fortunately, it's easy to integrate a font into your site's theme.  As an example, let's say you wanted to use a more expressive font in the site header below using Google Web Fonts:

OriginalFont.png


Here's how you would do this:

  1. Visit Google Web Fonts and browse the font options until you find one that you want to use.  When you select a font, you can either click Add to Collection or, if you don't want to bother building a font collection, click Quick-use. (Note: adding fonts to your collection will allow you to import multiple fonts at once, but it does not save those fonts in your account. In other words, it's for one-time use.)

    GWF1.png

  2. In Step 3 on the following page, click the @import tab and copy the code provided.

    GWF2.png

  3. In the Site Editor, open the Theme Editor by mousing over the Theme Settings tab and clicking Edit Theme.  Using the drop-down menu at the top of the Theme Editor, select Advanced CSS.

    ThemeEditor1.png

  4. Paste the code you copied from Google Web Fonts toward the top of the stylesheet.  Depending on the theme, there may already be similar codes for other fonts there; simply paste yours above or below them.

    CSS1.png

  5. Scroll down the stylesheet and find the selector for the header.  In most cases, this would be .module h1, .module.header, or .module.header h1.  In the picture below, the selector is .module h1.  If a font is already specified (e.g., "font-family: Georgia;"), change it to the name of the new font you are using.  (You can find the font name in the code that you copied, or back in Google Web Fonts.)  If no font name is specified, add a line and type font-family: [name of font]; and follow it with a hard return, as shown below.

    CSS2.png

  6. Click the Apply Changes button above the sylesheet to preview the new header font.  If the font doesn't change, open the drop-down menu again and select Site Header & Footer and make sure that the Font Face drop-down menu under Company/Site Title is set to Use Default.

    ThemeEditor2.png

    If the header font still doesn't change at this point, there's probably something in the stylesheet that needs to be changed.  Contact support@vflyer.com for assistance.
  7. Click the save button at the top of the Theme Editor (the disk icon), then close the Theme Editor by clicking the X button.  You've now imported a font from Google Web Fonts into your site header.

    GWF3.png

Other Resources:

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk