DWcourse: Adobe Dreamweaver Blog » fonts http://www.dwcourse.com Tutorials, Tips & Help Adobe Creative Suite CS3 through CS6 Thu, 02 Feb 2012 21:34:05 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Using Google Fonts with Dreamweaver http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php#comments Thu, 02 Feb 2012 18:53:42 +0000 dwcourse http://www.dwcourse.com/?p=2533

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(http://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.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/using-google-fonts-with-dreamweaver.php/feed 0 Using the font tag in Dreamweaver CS4 http://www.dwcourse.com/dreamweaver/font-tag-dreamweaver-cs4.php http://www.dwcourse.com/dreamweaver/font-tag-dreamweaver-cs4.php#comments Mon, 03 Aug 2009 23:26:48 +0000 dwcourse http://dwcourse.com/?p=390

A lot of folks are whining and moaning because Dreamweaver CS4 now enforces the use of CSS styles rather than HTML attributes for formatting. One of the things this means is no more font tag (and its related attributes).

That's a good thing in my book. No more code like this:

<p><font color="#003399" size="5" face="Tahoma, Geneva, sans-serif">paragraph 1…</font></p>

<p><font color="#003399" size="5" face="Tahoma, Geneva, sans-serif">paragraph 2…</font></p>

<p><font color="#003399" size="5" face="Tahoma, Geneva, sans-serif">paragraph 3…</font></p>

Well you get the idea!

But CS4 has a dirty little secret and , against my better judgement, I'm going to reveal it:

IT'S STILL POSSIBLE TO USE THE DREADED FONT TAG!

The secret is CS4's Wrap Tag… and Edit Tag… commands, both of which are accessed from a pop-up menu that appears when you right+click on a selection in the Design window. Here's how it works:

  1. In the Design window select some text.
  2. Right+click on your selection and select Wrap Tag… from the pop-up menu.
  3. In the Tag Editor dialog type in <font> (or choose it from the tag list) and press the Enter key twice (once to "set" th tag and once to dismiss the dialog). The text will remain  selected.
  4. Right+click once again on your selection and select Edit Tag <font>… from the pop-up menu
  5. In the Tag Editor - font dialog, make your selections for Face, Size and Color and click OK.

If you look at your code you'll see something like this (shudder):

<font color="#FF0000" size="+2" face="Tahoma, Geneva, sans-serif">content</font>

That's all there is to it.

To edit an existing font (or some other HTML) tag:

  1. Select the entire tag by clicking within the tag in the Design window AND then selecting the tag from the tag listing in the status bar at the bottom of the Document window..
  2. Right+click on your selection and select Edit Tag <selected tag>… from the pop-up menu.
  3. Edit the tag attributes in the Tag Editor dialog and click OK.

Just don't tell anyone I told you how to do it.

As always, feel free to comment here or email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/font-tag-dreamweaver-cs4.php/feed 14 FireFox and the Webdings font http://www.dwcourse.com/dreamweaver/firefox-webdings.php http://www.dwcourse.com/dreamweaver/firefox-webdings.php#comments Mon, 13 Jul 2009 14:50:53 +0000 dwcourse http://dwcourse.com/?p=339

I recently receved this question from John via email:

You stated that Webdings were part of the Microsoft Core set of fonts that are pretty safe to use for web design….Pat had been saying for awhile that her hearts were not working on her website … and I would go and check and they were fine. When you mentioned the other day about viewing sites in different browsers,  I opened in FireFox and there was the problem. It turns her webding hearts into Y’s…

I am going to have to remove them … would you agree?

John, thanks for pointing this issue out. Since I don't normally use Webdings, I hadn't been aware of it.

Beginning with version 3, FireFox has made changes to the way it displays font characters that essentially break the Webdings font. There are valid reasons for doing this but so far, those reasons haven't convinced any of the other major browser makers (where Webdings continues to work).

The bottom line is this. Webdings is a dozen years old and encoded in a way that doesn't play well with emerging web standards. Given that fact it's unlikely that FireFox will change its ways and return to supporting WebDings. It's also likely that other browsers will also eventually "break" Webdings. So, if you've been using the font in your web pages, it's probably time to come up with another solution.

Since Webdings is essentially a graphic font the simplest solution is - as John suggests - to instances where you've used the font with images (and don't forget to include a descriptive alt tag).

It's just another case of evolving web technologies and standards rendering our "old" ways of doing things obsolete (think replacing HTML attributes with CSS styles and tables with divs) and it won't be the last!

Post to Twitter

]]> http://www.dwcourse.com/dreamweaver/firefox-webdings.php/feed 0