• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

Phone:
(406) 662-1123

Dreamweaver Tutorial: Add Google Web Fonts using Dreamweaver


Written by Gabriel on April 10, 2012

Learn How to use Google Web Fonts in Adobe Dreamweaver CS5.5 Websites

In this tutorial, you will learn how to add Google’s Web Fonts to a Dreamweaver webpage without using Code View.

When creating websites and webpages to publish online, developers are forced to work with a very limited number of fonts that are common on all computer operating systems. Google has created another excellent free service they call Web Fonts to alleviate this limiting factor for top website developers like the web design UK who not just stop providing their service after creating the website but also help their clients by marketing their business to see increased traffic on the site. This software allows your Dreamweaver website to link with their CSS file to display a given Web Font.

For demonstration purposes, we will show you how to implement the Web Font ” Great Vibes  “. The steps described in this Dreamweaver tutorial can be used for any of Google’s 500-plus Web Fonts.

Step 1: Select a Google Web Font to use on your Dreamweaver webpage

To begin, we must open an existing webpage or create a new one in Adobe Dreamweaver CS5.5. Once the page has been created and saved, click over to Google’s Web Fonts. Click the button at center “Start choosing fonts,” and select on that you would like to use! For this tutorial, the example used will be the first font displayed, “Great Vibes.”

google-web-fonts-tutorial

After identifying the Google Web Font to use, click the “Quick-use” link. In this new page, you can select a few styling options listed with checkboxes. Scroll down to the blue box titled “3. Add this code to your website:” and select the “Standard” tab. You will see a URL written out inside one line of code. Highlight and copy the URL only; *any extra characters or missing ones will cause failure.

web-font-dreamweaver-link-url

Step 2: Linking Google Web Fonts with Adobe Dreamweaver CS5.5 Webpages

dreamweaver-css-styles-panel

Return to your Dreamweaver webpage and open the CSS Styles Panel. At the bottom of this panel are icon buttons, the one to select is a link icon with the hover text “Attach Style Sheet.” This button will open a window titled “Attach External Style Sheet.”

Place your cursor in the top text field named “File/URL” and paste the URL from Google Web Fonts.

dreamweaver-attach-external-style-sheet

dreamweaver-head-content-link

There is one coding error that Dreamweaver automatically adds to the URL that you paste, it adds “.css” to the end of the URL which causes failure. To correct this, open the menu View and check Head Content; this will display the Head Content Panel above Dreamweaver’s Design View.

Here you will see a series of icon buttons, the last of which it a link-over-sheet icon, select this and look to the bottom Properties Panel to view its content.

Now we can remove the last four characters “.css” from the URL. Click out of the Properties Panel and save.

Step 3: Activate a Google Web Font in your Dreamweaver Website

google-web-font-css-name

To make use of this newly linked Web Font, make a CSS rule that adds this font to the content of your Dreamweaver website. On the individual Google Web Fonts pages, there are examples of each specific Web Font’s name for use in CSS rules.

Create or edit a CSS rule in your website’s appropriate CSS file and set font-family to the name listed at the bottom of that Google Web Font page.

dreamweaver-css-rule-definition-panel

Step 4: Test your Dreamweaver webpage using a Web Font

Save the webpage that you have edited and open it in a web browser. Confirm that your content that has been selected with a CSS rule to make use of the Web Font chosen.

Notes about using Google Web Fonts in Adobe Dreamweaver CS5.5:

Dreamweaver will only display the content with a Web Font in Live View and only if your is online at that time.

Advantages of using Web Fonts:

In many cases, web designers will use an image of text on their website to get the look just right. Visually, this is no problem, but there are some drawbacks; load-time for images is a major factor as well as SEO. Search Engine Optimization is an effort to impact how search engines, like Google, rank websites. The use of headings, a title, a meta description, links, and many other factors effect search engine results page ranking. Using text instead of images of text is better in the eyes of SEO.

Testing ensures that your Google Web Font works and is ready to upload to a live Dreamweaver website!

Posted in Adobe Dreamweaver CSS

2 Comments to Dreamweaver Tutorial: Add Google Web Fonts using Dreamweaver

  1. Daniel's Gravatar Daniel
    June 2, 2016 at 9:03 am | Permalink

    Unhelpful because at one point you say with extreme vagueness, “open the Menu View” and give no indication how to to that.

    Not everyone knows everything you know, which should be well understood, especially considering you are someone who is providing instructions on how to do something that another person does not know how to do.

    Thumbs down.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients


Dashing

Downwind

Take the first step


Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!


Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802


Phone:
(406) 662-1123

5
523 N Higgins Ave, Missoula
5
5
Avigail Bass a month ago
We redesigned a very very old website with Gecko and began the process during coronavirus. Despite those challenges, the team at Gecko was very helpful and flexible. They built us a beautiful website, taking into account all our needs. The project manager Grace, was a pleasure to work with, always available to answer questions, great with communication, and very organized. They went above and beyond to make sure the end product was perfect, even if it meant putting in extra hours, or extending the project longer than anticipated. We really appreciated all they did for us and could not be happier with the results!
5
Avi Kolko in the last week
Gecko built us a new Unity Hospice website from the ground up, as well as designing new brochures and other collateral material. Working with them has been a pleasure - they are professional, organized, responsive, aim to please, and are easy to work with. Their design work is beautiful, and they really took pains to understand the look we were going for. Highly recommended!
5
Craig McKay 2 months ago
Gecko Design staff was super easy to work with. They were able to help us create an incredible web site that is getting noticed. I would highly recommend Gecko to anyone looking for web design.
5
Courtney Firak 5 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
5
PHC Missoula 6 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Spring 2021! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123