Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

.

Note: You must put your page into Live View or Preview in Browser to test the fonts

Adding Google Fonts to a CSS Document

Tutorial created by N. Manos (Grade 9), 
edited by A. Partridge (Grade 12) and Mr. O’Connell

  1. Go to google.com/fonts

  2. Choose all of the fonts you would like for your website

  3. Click “Add to Collection” for three different fonts.

  4. Click “Use” in the lower right hand corner.

  5. Under “Add this code to your website” Click the @import tab

  6. Select the line of code

  7. Press Ctrl+C

  8. Return to Dreamweaver.

  9. Open your CSS document

  10. Go to the beginning of line 1 and press enter

  11. Go to line 1 and press Ctrl+V

  12. Return to Chrome.

  13. Under “Integrate the fonts into your CSS” select the line of code you would like to use for ‘body’ format

  14. Press Ctrl+C to Copy

  15. Return to Dreamweaver

  16. Go to your CSS and select the current line of 'font-family..........' code for the body tag.

  17. Replace the existing font family code by pasting (ctrl+V) the Google font code

  18. Continue directions 13-17 for each format (p, h1,h2,h3, etc.) until all fonts are used, and until all of your old fonts have been replaced.


 

 

Here's an example of what the first few lines of your CSS might look like when you're done:

Google Font CSS example