Adding Google Fonts to Your Personal Website 2023
(revised, April 2023)

1. Open Google Chrome
2. Go to google.com/fonts
3. Choose three fonts. You will need fonts that can be used for Body Text and Links as well as Heading 1, Heading 2, and Heading 3. Note that you can change both the sample text and it's size as you are searching.
4. Click “Add to Collection” for three different fonts.
   1. Click on the font
   2. Select a style
   3. Add more styles if you wish
   4. Click your back button
   5. Lather, rinse, repeat until you have chosen three fonts.
5. In the lower right hand corner, under the heading Use on the Web, make sure <Link>. is selected.
   1. 
6. Click the copy icon in the lower right hand corner of the dialog box
7. Return to Dreamweaver, and open your index.html document.
8. Switch to Code view
9. At the top of your page, click to the left of your closing head tag </head>
10. Hit Enter once.
11. Hit your up arrow once.
12. Ctrl+V to Paste your new Google Font's HTML code.
13. Return to the Google Fonts page in Google Chrome.
14. Scroll down to the heading CSS rules to specify families
15. Click the copy icon in the lower right hand corner of the dialog box
    1. 
16. Return to Dreamweaver, and open your CSS document.
17. Scroll down to your paragraph section, and click to the left of the letter p.
    1. 
18. Hit enter twice.
19. Hit your up arrow twice.
20. Ctrl+V to Paste in your Google Font CSS code.
21. Replace your existing p (paragraph) font with the Google Font you chose for body text.
    1. select the new font, and copy it Ctrl+C
    2. Select the existing font, and paste Ctrl+V
22. Replace your existing Heading 1, Heading 2, and Heading 3 fonts with the Google Fonts you chose for Headings.
23. Replace your existing a:link, a:hover, a:active and a:visited fonts with the Google Font you chose for body text.
24. Delete the three lines of Google Font-related code located above the p (paragraph) section of your CSS. If you leave this code in, problems will occur!
25. Save your CSS and your index.html
26. Preview your work.
27. Adjust the sizes of your new Google Fonts in your CSS as needed. You will probably find they are either too large or too small for your design.
28. Repeat steps 5 through 12 to add your new font's HTML code to your remaining pages:
    1. academics.html
    2. interests.html
    3. gallery.html
    4. tutorials.html
    5. links.html
29. Preview your work
30. Troubleshoot and revise as needed.
31. Enjoy your new Google Fonts!

Advanced:

• Select the text and table below this section starting with the words "Heading One" and ending with the "My Color Scheme" table.
• Ctrl+C to Copy
• Open your index.html page in Dreamweaver in Code View.
• Click below the #main DIV
• Hit enter 20 times to add LOTS of space after your #main DIV.
• Ctrl+V to Paste
• You will use this preformatted text to test your new Google Fonts.
• You can use the table to record your color scheme at a later date.

Heading One

Heading Two

Heading Three

This is my paragraph formatting.

This is my hyperlink formatting.