Mr. O'Connell's Technology Home Page
home web design business and personal finance biography links2

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

Google Fonts logo

  1. Open Google Chrome
  2. Go to https://fonts.google.com/
  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 Cart” 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. Click on the Cart icon in the upper right corner
  6. Click <> Get embed code
  7. On the Web tab, make sure <Link>. is selected.
  8. In the Embed code in the <head> of your html section, Click the copy icon in the lower right hand corner.
  9. Return to Dreamweaver, and open your index.html document.
  10. Switch to Code view
  11. At the top of your page, click to the left of your closing head tag </head>
  12. Hit Enter once.
  13. Hit your up arrow once.
  14. Ctrl+V to Paste your new Google Font's HTML code.
  15. Return to the Google Fonts page in Google Chrome.
  16. Using the same method, Copy the first font's CSS Class code
  17. Return to Dreamweaver, and open your CSS document.
  18. Scroll down to your paragraph section, and click to the left of the letter p.
    1. CSS screenshot for paragraph
  19. Hit enter twice.
  20. Hit your up arrow twice.
  21. Ctrl+V to Paste in your first Google Font's CSS code.
  22. 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
  23. Use the same method to add the CSS Class code and replace your existing Heading 1, Heading 2, and Heading 3 fonts with the Google Fonts you chose for Headings.
  24. Replace your existing a:link, a:hover, a:active and a:visited fonts with the Google Font you chose for body text.
  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 default text formatting.

This is my paragraph formatting.

This is my default vertical and horizontal alignment. This is my default vertical and horizontal alignment. This is my default vertical and horizontal alignment. This is my default vertical and horizontal alignment.

This is my hyperlink formatting.

My Color Scheme
tag #hexadecimal Color
body    
bg    
p    
h1    

h2

    
h3    
a:link    
a:visited    
a:hover    
a:active