Google Fonts for Dreamweaver CS6

12
Here you will learn the steps to add Google font to one tag on your Dreamweaver CS6 page

Transcript of Google Fonts for Dreamweaver CS6

Page 1: Google Fonts for Dreamweaver CS6

Here you will learn the steps to add Google font to one tag on your Dreamweaver CS6 page

Page 2: Google Fonts for Dreamweaver CS6

Create a new Dreamweaver page using 2 column fixed, left sidebar, header and footer

Page 3: Google Fonts for Dreamweaver CS6

Select the heading on the page. h1

Page 4: Google Fonts for Dreamweaver CS6

Go to www.google.com/webfonts

Page 5: Google Fonts for Dreamweaver CS6

Find a font you like and select Quick-use. Here you will see how long it takes to load and the code to be added to your web page.

Page 6: Google Fonts for Dreamweaver CS6

Open Dreamweaver html page to code view. Insert font code after <head>

Page 7: Google Fonts for Dreamweaver CS6

Select the heading on the page. <h1>

Page 8: Google Fonts for Dreamweaver CS6

Go to Properties panel choose Edit Rule> New Rule>

<New CSS Rule>

Page 9: Google Fonts for Dreamweaver CS6

New Selector Type> Choose Tag for all <h1> tags. Then click OK.

Page 10: Google Fonts for Dreamweaver CS6

Select font name and add to Font-family in Type panel with out any ‘’.

Page 11: Google Fonts for Dreamweaver CS6

Check to see if the h1 tag is your font. The new font fill not be seen until on viewed Live.

Page 12: Google Fonts for Dreamweaver CS6

Live view will show the font for <h1>. Also you can use a Class tag and add font family.