Using Google Fonts with Dreamweaver

by James Cook on February 2, 2012

Google Fonts LogoSince the dawn of the web, designers have been frustrated by the lack of font choices. There were work-arounds, such as using images rather than html text or font replacement scripts such as sIFR or Cufón for display fonts. But they weren’t very satisfactory.

Today, a number of solutions exist including Google Fonts, Typekit (recently acquired by Adobe) and the CSS @font-face property.  In this article I’ll explain how you can use Google Fonts (which actually implements @font-face for you) in your Dreamweaver page.

 Adding Google Fonts to Your Site

Google Fonts Listings Figure 1: Google Fonts listings page

Visit the Google Font listings (fig. 1.) at http://www.google.com/webfonts#ChoosePlace:select and choose the font(s) you wish to use on your page.

For this example we will use the font Asap.

You can narrow you font search by using the search function or the various filters in the left sidebar.

Many of the fonts have multiple styles (bold, italic, etc) associated with them. You can show or hide the styles by toggling the See all styles/Hide all styles button to the right of the font listings.

When you find a font you want to use, select the Quick-use button. You will be taken to a new page verify your settings and copy the code needed to load the font into your page.

Google Fonts verify and copy codeFigure 2: Verify your setting and copy the code

  1. Choose the styles you want: If there is more than one style (Asap has four) associated with your font, make sure only the styles you wish to use are selected. For our font, Asap, we’ll choose Normal 400 and Bold 700.
    Note: As with any other resource (such as images), fonts take time to download so it’s best not to include any styles you won’t be using on the page and to use all downloadable fonts with discretion. Google’s Page Load Indicator will give you an indication of the impact your font choices will have on your page load time.
  2. Choose the character sets you want: In some cases additional character sets (foreign language or extended character sets) will be available. Again, choose only the character sets you will actually use. For Asap both Latin and Latin Extended are available. We’ll only use Latin.
  3. Add the code to your website(choose one of the two options below)
    1. To embed the font in a single HTML page
      Google offers three ways for you to add fonts to your website. The default choice is the Standard method, which we’ll use here.
      1. With the Standard tab selected, copy the code from the “Add this code to your website:” box to your clipboard.
 <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
      1.  In Dreamweaver open the HTML document where you wish to use the font.
      2. Paste the code from your clipboard into the <head> of the HTML document. The location within the <head> is not critical but for consistency, I prefer to paste the code directly below the <title> tag.
    1. To embed the font in a style sheet
      This will allow the font to be accessed by multiple pages.
      1. On the Google Fonts Quick-use page under “Add this code to your website:” select the @import tab.
      2. Copy the code from the “Add this code to your website:” box to your clipboardA
@import url(https://fonts.googleapis.com/css?family=Asap:400,700);
      1. In Dreamweaver open the CSS document where you wish to add the font.
      2. Paste the code from your clipboard into the top of the page directly below the “@charset "UTF-8";” declaration.

Using the fonts in your CSS:

You can now use the font in your CSS style rules as you would any other font.  The simplest method is to copy and paste the code provided directly into your CSS.

font-family: Asap, sans-serif;

Notes:

  • Google fonts will not display in Dreamweaver’s Design View but will display in Live View or when previewed in the Browser.
  • Some font names (those with spaces or special characters in the name – such as ‘Times New Roman’) must be surrounded by single or double quotes.
  • It is important to provide a fall-back font option (we used sans-serif above) in case the Google font fails to load.
  • Dreamweaver does not automatically add your Google Fonts to its font selection menus (although they can be added using the Edit Font List option in the font selection menu). So, wherever you specify Google Fonts, you’ll need to type in the name.
  • If you do not specify a font-weight, the default (regular) weight will be used. You can specify the font weight using words or numbers as below.
font-family: Asap, sans-serif; font-weight: regular;
font-family: Asap, sans-serif; font-weight: 400;
font-family: Asap, sans-serif; font-weight: bold;
font-family: Asap, sans-serif; font-weight: 700;

Google Fonts tip

  • You can save a collection of fonts for future review by clicking the Add to Collection button to the right of the font display.
  • To review your collection, click the Review button at the bottom right of the page.
  • To save you collection for future reference click the Bookmark your Collection link at the upper-right of the font-listing page. Then copy the link and save it so that you can use it to access your collection in the future.

testing…

James July 11, 2012 at 11:13 am

This is a very useful tool. For years I have wanted to use special fonts but was leary to embed the actual font file because I do not have the legal right to distribute it. This makes things so much easier.

Lamont March 22, 2012 at 11:52 am

I cant figure out why in dreamweaver cs 5.5 my google fonts only show up half of the time in design view, and i’m online, any suggestions?

dwcourse March 22, 2012 at 11:55 am

Google fonts don’t display in Design view they should display in Live View but only if you are connected to the Internet. That’s because the fonts are hosted on Google’s servers and aren’t available from your local machine.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact