Defining new font families
Video: Defining new font familiesWhile Dreamweaver gives you a nice jumpstart in the available Websafe Font-families, technology is always quickly evolving and it would be nice to be able to create your own. Luckily, there's a built-in function in Dreamweaver for that very reason. So here I have the web-safe.htm file open from Chapter 03 > 03_03 folder, and let's go right into Live View, so that you can see this in its best representation. Let's demonstrate the new font-family capabilities by creating a custom one for the sidebar text that we see over here.
- 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
Defining new font families
While Dreamweaver gives you a nice jumpstart in the available Websafe Font-families, technology is always quickly evolving and it would be nice to be able to create your own. Luckily, there's a built-in function in Dreamweaver for that very reason. So here I have the web-safe.htm file open from Chapter 03 > 03_03 folder, and let's go right into Live View, so that you can see this in its best representation. Let's demonstrate the new font-family capabilities by creating a custom one for the sidebar text that we see over here.
So I'll go ahead and select that rule and now we'll go to the CSS Styles panel and choose New CSS Rule and it will come up as a Compound type with a specific selector. I'm going to go ahead and just make it a little less specific so that it can be in any sidebar and we'll keep our definition stored in this document. Click OK. Now I'll expand the Font-family list, but instead of choosing any of the ones that are offered, I'll go down to Edit Font List and create a new one.
So the process basically is you choose one of your available Fonts, and then select the Left Arrow button to move it over into the Chosen Font category, and then choose another option for the second entry into the Font-family, and so on. Let me scroll down to the Garamond font. Go up just a little bit more. There is Garamond. So I'll select that and once that selected I will move it over to the list of Chosen Fonts and I can also use Georgia, so that's easy.
So I'll bring that in, and now if I should choose an incorrect font. Let's say I click on Giddyup Standard (Std ) by mistake and move that into the list. If I want to remove it, I just select it and then the right facing arrows are activated and I can move it away from the Chosen Fonts with one click. Now notice that my Font-Family is being dynamically built up here in the Font list. Now let's say I want to add in Times New Roman, but this is a very small area for scrolling and it can be pretty difficult to find from time to time.
So one of the features that you can use with Dreamweaver, is just entering it in. Now this also allows you to enter in a font that you may not have on your system, but you want to include into the Font-Family. So once that's typed in I click the Left Arrow and there it is. Let's close this out by putting in the generic category name of Serif. Alright. There is my complete list. Now it does appear initially at the bottom of the list. I can move that up if I want just by clicking the Up Arrow or reposition it by moving it down.
I'll keep it second from the bottom there. Now when I click OK and I go to my Font -Family list, you'll see it displayed right where we had placed it. So I'll go ahead and select that and then click OK and now my sidebar text is rendered in Garamond. In addition to creating new Font- Families you can also use that function to alter existing ones, removing fonts from a Font-Family or rearranging them however you choose, Dreamweaver will remember any changes to the font list from site to site.
There are currently no FAQs about Typography with CSS in Dreamweaver.