The CSS @font-face tag

This tag lets you use many more typefaces than the basic 6 listed in Dreamweaver across pcs, Macs and mobile devices such as iPhones and iPads. Previously designers used graphic images of type or resorted to Flash but now you can choose free Webfonts from Google or FontSquirrel. There are also many more typefaces available at a price from Monotype at fonts.com, Adobe fonts at Typekit, fontspring and typotheque.

Google Webfonts
These are hosted on Google's servers. You just need to cut and paste a line of code immediately after the <head> tag in your document to call the font. If you are using more than one Google Webfont in the page, add the additional font names with a pipe | symbol between them (pipes are often used to separate links - the key is just above the 'Windows' key on a pc and is just to the left of the 'Enter' key on a Mac).

Example: <link href='http://fonts.googleapis.com/css?family=Tangerine:bold|Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>

Google then suggests that you paste a second line which starts with h1.Their example would only make any text that you make into a Heading 1 change to the desired font... if you know enough CSS and plan to use the Google font for say, Heading 2s, then just change the h1 to h2 but for maximum flexibility add the Google font using the Dreamweaver font manager.

fontsquirrel Webfonts
FontSquirrel's approach needs more effort from us but their fonts work with slightly older browsers and offer more choice (as of May 2011, both Google and FontSquirrel are adding more fonts at quite a pace). If you cannot find what you want from the @fontface kits then you can also upload a truetype font (including any of the 1000s of available free fonts) and they will automatically generate an @fontface kit for you - but you should check that the copyright licence ('EULA') for the font allows it to be used as a Webfont. You download a zipped @fontface kit which contains 4 different formats of the font, each about 40k - you can choose to have a subset just for english, or a slightly larger version with accents. Unzip the file and drag the 4 individual font formats into your Website's root folder and upload them:

You need to upload all of these to your Website and put them in the same folder as the page using them (usually the site root folder - alternatively alter the path in the code to point to where ever you do put them or have several copies in different folders!) and paste a line of code (supplied with the @fontface kit) into the head of your document, and then also add the font using CSS tags or using the Dreamweaver font manager.

Drawbacks and Compatibility Issues
There can be a short delay loading the Webfont(s), during which the next alternative fallback font may be rendered briefly first, followed by a flash as the Webfont refreshes the text. Older browsers and some devices may be unable to render your chosen Webfont, and the fallback may be sufficiently wider/narrower/bigger/smaller to compromise your site design - you need to test more for the additional possibilities.

Fonts are about 40k each, so don't use too many at a time - 40k is tiny to a broadband user but significant to someone with a smartphone in a poor signal area. Many typefaces are suitable only for headings and may be off-putting and difficult to read in long articles. Too many fonts on a page look messy.

Google Webfonts FAQ states they are supported by these browser versions:

Microsoft Internet Explorer: 6+
Mozilla Firefox: 3.5+ (according to Google - needs 3.6 in my experience)
Google Chrome: 4.249.4+   Apple Safari: 3.1+   Opera: 10.5+
Android 2.2+ and Apple iOS 4.2+ for iPhone, iPad, iPod - limited support for earlier iOS versions

browser versions required for FontSquirrel Webfonts are listed above.

Blue Griffon  BlueGriffon
is a free alternative to Dreamweaver released on 10th May 2011 that supports Webfonts straight from a menu together with HTML5 and CSS3. Add-ons

Adding shadows and glows to text

       Additional information and background reading:

I have used free Webfonts from Google for this page and for myanimation & corben sites and fonts from FontSquirrel for imps.tv

CreativePro guide part 1 and part 2 to using the css tag '@font-face'

Excellent glossary covering all aspects of typefaces and Webfonts from code style

Adobe's pdf guides to typeface classification (serif, sans-serif etc) and to letterforms (x-height, counters etc)

Fontspring guide to @font-face. nicewebtype Alternatives include javascript embedding via Cufón or Typeface.js (discussion of merits of each), to use sIFR Flash, create the site in Flash itself or simply turn occasional uses of a font into a graphic (jpg, gif or png). Interviews about @font-face. Extensis to launch Webfont service

fontslive   how-to-use-css-font-face    W3c adopts WOFF