Exploring CSS3 typeface options
Video: Exploring CSS3 typeface optionsThe 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.
- Next steps
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Exploring CSS3 typeface options
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.
There are currently no FAQs about Typography with CSS in Dreamweaver.