The CSS @font-face tag

This tag lets you use many more typefaces than the basic 14 in Dreamweaver CS5.5 (or just 6 listed in CS3 and earlier) across pcs, Macs and mobile devices such as iPhones and iPads. Previously designers used graphic images of type for headings or resorted to Flash but now you can choose free Webfonts from Adobe Edge, Google or FontSquirrel. There are also many more typefaces available at a price from Monotype at fonts.comAdobe fonts at Typekit (included with Creative Cloud), fontspring and typotheque. There is a good guide to how fonts are classified into groups such as sans serif and script at creativepro.com/typetalk-type-classifications

Adobe Edge Webfonts free Adobe Edge Webfonts

Adobe has partnered with Google (and using Typekit technology) to make choosing and using free Webfonts a little easier. Integrated already with some Adobe Web design applications.

Here's how they introduced the service in May 2013

Google Webfonts
676 fonts are hosted on Google's servers (as of March 2015). 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. We can't install fonts at college though.

fontsquirrel Webfonts
FontSquirrel's approach needs more effort from us but their fonts work with slightly older browsers, don't upset Firefox* (and similar college security measures) and ultimately offer more choice.

Simply choose the typeface you like by clicking on it and then choose WebFont Kit from the purple menu and then download @fontface to receive a zipped file with 4 font formats and a read me file of instructions.

If you cannot find what you want from the featured fonts with prepared @fontface kits then you can upload a TrueType or OpenType font (including any of the 1000s of available free fonts) and they will automatically generate an @fontface kit for you. You should check that the copyright licence ('EULA' End User Licensing Agreement) 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 larger version with accents. Unzip the file and drag the 4 individual font formats into your site'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 - or alter the path in the code to point to where you have put them) and paste a line of code (supplied with the @fontface kit) into the head of your document under the title tag, and 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 only for headings and may be hard 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 and Firefox is often unhappy when fonts are served from a different Website to the page itself. This is a security feature to reduce the risk of viruses being spread by ads or fonts hosted on a hacker's computer, but it is frustrating that it appears to object to Google-hosted Webfonts too. When it was important that Firefox read my fonts correctly I ended up hosting my own fonts, obtained via FontSquirrel.)
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

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 my-animation & 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