<< .. Go to : : Home : : Exercise 5 : : Demo 5A : : Demo 5B : : Demo 5C : : Demo 5D : : All Class Demos .. >>

Exercise 5 Demo: Part D5 : Adding Google Fonts

Using Google Fonts

Adding the Google Font to my Page

After you find a font you like, click on the small red circle that has a plus sign in it to Select This Font. A popup window comes up that has some options listed. Scroll down to STANDARD. Copy the link code in the box. Be sure to get the whole thing from opening to closing carrot -- it should end with rel="stylesheet">

Paste this ABOVE or BELOW the styles in the head of your document. IMPORTANT: DO NOT put this in your document styles! I usually place mine after the closing title tag and before the opening style tag

Here is an example of what it could look like:

<title>Page title here </title>

<link href="https://fonts.googleapis.com/css?family=Life+Savers" rel="stylesheet">

<style>
    /* Write your CSS styles in here. I am adding the Google font info to my h1 and h2 tag styles */

    h1 {text-align:center; font-family: 'Life Savers', cursive;}

    h2 {font-family: 'Life Savers', cursive;}


</style>

</head>

Back on the Google page, scroll down to Speciify in CSS. Google has generated the code to add the font to your CSS. Copy this and paste it in your Document Styles with the tag you want to style. I am added mine to my H tags. (see above in the example)

I can also choose a font to use for my paragraph text. Use a plain font for this to make sure it is easy to read. Go through the same steps, but under the Filters, select Sans Serif.