website sketch


Summary:

Google Provides Free Web Fonts for your Pages

    ●   There are 155,000 available fonts in the world, but on average, only 5 get used on the web.

    ●   That's because viewers must have the particular font installed on their computers or it wont work.


Learn About:

Google Fonts Drop Shadow CSS Tags <h1> Tags

  •   This tutorial is part of the Fan-Tastic, Art Genre, Design Your Identity and What in the World Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.



Google Fonts are Great!



Find a font you like, then link to it.



  Read more about Web Fonts Here

Have fun!

h1 text example

Step #1: Open your index.html page in Dreamweaver ~

First open your index page in Dreamweaver:

index page


Step #2: Find a Font ~

Go to: http://www.google.com/webfonts#HomePlace:home to find a font that matches your theme. When you find one, click Quick Use at the bottom.

quick use

Then scroll down and copy the code.


Step #3: Split ~

Click Split to reveal the code …

… and look for the <head> </head> tags.

Paste your copied code just in front of last head tag.


Step #4: Add the CSS ~

Scroll a little further down on the Google page and copy the CSS code.

Then, open your styles.css sheet by double-clicking on it …

… and paste the code under the body tag.

paste the font code

By adding this code to the body tag, this will change the the font in your entire site.


But Be careful! This sentence is written in Comic Sans. You can change fonts using HTML but it’s confusing and maybe not worth the hassle all the time but keep trying :)


Step #5: h1 tags ~

Find your <h1> tag or create one now at the bottom of your styles.css sheet …


Step #6: More Google Fonts ~

Go back to: http://www.google.com/webfonts#HomePlace:home and find ANOTHER font, copy and paste the code in the head tag like before:

font code google

Then scroll down again, copy the CSS code like before …

google font code

… but this time, paste it in between the h1 tags.

h1-tag


Step #7: Drop Shadow ~

Also, add the Drop Shadow code too. Copy this code …

text-shadow: 2px 2px 2px #F00;

… and paste it under the font code.

paste the code

Change the color of your drop shadow to match your color scheme by removing the 3 letter code and hitting space …


Step #7: Find a place for an h1 tag ~

Open your pages and look for a place where some large h1 text would look good, like below your nav div.

 

Type something like Welcome! or title your pages - or somehow individualize the content of each page.


Step #8: Find a place for an h1 tag ~

Then apply your new h1 tag by highlighting the text …

… opening Properties by hitting the keyboard shortcut: Cmd(⌘)+F3 and selecting the formatting tag.


Step #9: Change Throughout your Site~

Remember, you must put these font codes in the headers of all your pages to make it work.

Complete the changes on throughout all your pages, including h1 tags and individualization.


Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working…


Other Resources: http://www.google.com/webfonts#HomePlace:home and http://www.puglypixel.com/2011/08/09/web-tip-text-shadows/ and Here.