Part 3.2: How to change fonts in Dreamweaver

All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

1: Open your webpage
Double click on the “index.html” page you have been working on previously from the Files pane on the right

2: Select text
Drag your cursor over the text you want to change (exactly as you would in a word processor)

3: Choose your font

From the menu select Format>Font and choose the font you want to use.

A box called “New CSS rule” will appear – don’t panic!

4: Assign and create a class

What appears in the “New CSS rule” as standard will depend on the sort of text you’ve selected.

Don’t worry about this for now – and use the following settings:

For “Selector Type” choose “Class (can apply to any HTML element)”

The “Selector Name” field will now be blank (if it wasn’t already)

The “Selector Name” box is where you will give your new class a name – this can be anything you like, as long as it starts with a character from the alphabet and has no spaces.

For this example, type “maintext” (without the quote marks) in to the “Selector Name” box.

Finally – you need to tell Dreamweaver which style-sheet you want your new class to be added to

In the Rule Definition box select “twoColLiqLtHdr.css” from the drop-down menu – this is the default style-sheet for your site.

Click OK

Congratulations – you’ve created a class!

5: Change the font for multiple pieces text

OK – let’s say you now wanted to change the appearance of whole paragraphs of text – for instance all of the course descriptions for a range of training courses.

The first time you did this, you would select that paragraph and create a new class called “coursedescription” using the method described in step 4 above.

Now – let’s say you wanted to add a new training course to your training company website and wanted the description paragraph to appear in the same font as the others.

Select all of the text in your new paragraph and look at the Properties pane at the bottom of the screen (see picture)

There should be something displayed in the “Class” field – if there isn’t – click the “HTML” button on the left of the pane. Now from the drop down within the “Class” field, choose the new “coursedescription” class that you just made.

Your new course description paragraph will now display in the same font as the others.

6: Changing the font for a whole class

Now – to illustrate the power of using CSS to apply changes to your text – lets assume that we didn’t like the look of the course description paragraphs in our site, and wanted them all to appear in a different font.

Place your cursor anywhere within one of your course description paragraphs – don’t select the whole thing – just put the cursor within that area.
In the panel on the right, double-click on the “CSS Styles” tab (see picture)

Find the “font-family” line (which should be displaying the font-family you selected earlier) and double-click anywhere over it – a new box will appear called “CSS Rule Definition for coursedescription in twoColLiqHdr.css”

Select a new font from the “font-family” list in box and click on OK

All of the paragraphs with the “coursedescription” class assigned to them will now appear in the new font you’ve selected.

Related posts:

1. Working with Text in Dreamweaver CS4
2. Changing the font size
3. Different Coloured Text
4. Change the Background Dreamweaver CS4
5. Making Links in Dreamweaver:

Similar resources you may like

Related posts:

1. Working with Text in Dreamweaver CS4
2. Changing the font size
3. Different Coloured Text
4. Change the Background Dreamweaver CS4
5. Making Links in Dreamweaver:

Tags

cascading style sheets, css, Dreamweaver, Dreamweaver Training, dreamweaver training sussex, dreamweaver tutorial, font, font type, sussex

Share This Resource