How to Use Custom Fonts from the Google Web Fonts Site in Dreamweaver - dummies

How to Use Custom Fonts from the Google Web Fonts Site in Dreamweaver

By Janine Warner

One of the easiest ways to use Dreamweaver to add custom fonts to your site is offered by Google. Google Web Fonts offers a limited collection of fonts but you can use all their fonts for free. Follow these steps to add any of the fonts from the Google Web Fonts site to your pages:

  1. Open a web browser and visit Google’s Web Fonts site.

  2. Search through the fonts available on the site by selecting the type and style of font you’re looking for.

    To narrow your search, use Filters (in the left column). You can change the text that is displayed in each font by editing the Preview Text field at the top of the screen.


  3. Find a font you like, and then click the blue Add to Collection button in the bottom-right, just below each font name.

  4. Click the check boxes next to each of the font styles that you want to use on your web page.

    Most fonts in the Google Font Directory have only one style. Although you may be tempted to choose all styles, it’s best to select only the ones you’ll use. As Google warns, the more font styles you choose, the longer it will take to download your web page.

  5. Scroll down the page and select the Latin option (for English).

    If you need the additional characters for another language, select the Latin Extended option instead.

  6. Scroll further down the page to the blue box with three tabs; click the first tab to link the font to your website.

    Google provides three options: Standard, @import, and JavaScript. You find detailed descriptions of all three on the Google site.


  7. 7. Copy the link from the Standard tab field on Google just as you would copy any other text or code from a web page.

  8. In Dreamweaver, paste the link into the head area of your web page between the open <head> and close </head> tags.

  9. Return to the Google web Fonts site and at the bottom of the page, copy the name of the font family.

    You can find the name of the font family in the Integrate the Fonts into Your CSS area.

    In your style definition, you must include the name of the font exactly as Google writes it. Copy-and-paste is the best way to make sure the font name matches.

  10. In Dreamweaver, paste the name of the font family into the CSS rule where you want to use the font.

  11. Apply the rule to text in your web page.

    If you use the font in a Tag selector style, such as the <h1> tag, when you apply the tag to text, the font will be automatically applied as part of the rule. If you use the font in a class or ID style, the style must then be applied to a tag that surrounds the text, such as a <p> tag or a <div> tag.

  12. Publish the page to a web server and then preview the page in a web browser to see the font.

    Note that when you use Google web Fonts you may not see the font displayed in Dreamweaver, even if you use the Live view option. To ensure that the font works on your page, you may need to transfer the page to a web server using FTP and preview the page after it’s published online.