Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The earlier videos in this chapter covered the, until recently, standard approach of using Web- Safe fonts that are common to the various computer platforms. That's all changed with the introduction and rapid proliferation of web fonts led by full-throated Browser support for a CSS3 feature. The latest browsers now make it possible for web pages to incorporate fonts that are not on the site visitor's machine, but rather linked and quickly downloaded. These web fonts depend on a CSS3 declaration known as @font-face.
You can see some example @font-face code here. The @font-face declaration is now supported in Firefox 3.5 and higher, Safari 3.2 and higher, Opera 10.1 and higher, Google Chrome 5 and up, and Internet Explorer 9 and on. The other factor driving adoption of this technology is the recent turnaround of the leading font foundries to license their fonts. Some of the leading resources for web fonts include Typekit, Fonts.com, and FontShop.
You'll find that there are two basic approaches to using web fonts: self-hosting and remote hosting. While the former does give you more control, it's generally a little costlier and a bit more coding. Using a remote host for your fonts is less expensive and easy to implement, but you do have to be aware of a slight increase in your page load. I found that with a limited number of fonts, the load time is negligible. But you'll need to do your own testing to find the right balance for you. To give you a full picture of what's available with web fonts, I also wanted to mention another option, even though it doesn't use the @font-face declaration.
Google has their own font initiative. Google web fonts are available at no charge under an open source license and are all hosted by Google. Implementation is a simple link to a stylesheet URL and a CSS font-family property. Although Dreamweaver doesn't offer point and click support for Google web fonts, once you've written the proper code, the fonts are displayed in Live View. So here in Dreamweaver, you can see my two code chunks. First there is the link to the googleapis. com asking for the font-family of Tangerine.
And then I set up font-families with Tangerine as the first option and serif as my second choice for three different tags: h1, h2, and h3. Here's what it looks like in Design View. Now let's go ahead and take a look at it previewed in the Browser in Firefox. I'll go ahead and save my file, and there you can see the new font, definitely not a web-safe font, this is Tangerine, and it's applied to all of the h1, h2, and h3 tags.
With this basic understanding of web fonts, you're now ready to learn how to implement them in Dreamweaver.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.