Google fonts

Create a new html document and then visit https://www.google.com/fonts to get started. As of January 28, 2016 there are 779 font families available here. 

Please note. Google sometimes changes their interface so the instructions below may not be a precise match for what you see when you visit the google fonts site.. Your main job is to find a link to the parisienne style and to integrate it into your webpage and its CSS.  Be prepared to explore a bit and to read between the lines so to speak.

  1. Use the search box to find the font called parisienne. A new screen will appear (as of September 2016) that looks like this one. Click the plus sign.
  2. At the bottom of the screen you should see a black box with a minus sign that says 1 Family Selected. 
  3. Now you should see something like this:

  4. Click Copy the code that begins with <link href and paste it into your html document just below the <head> tag

  5. Now it’s time to integrate the font into our css. In this case let’s take the easy way out and create a new class named .gfont inside of our html document as shown below.
    <style type="text/css">  .gfont {   }</style>
  6. Copy
    and paste it between the brackets {    } that define the .gfont class.
  7. Apply the .gfont style to some text as in <span class=”gfont”>  some text </span> ,<p class=”gfont”> some text </p>  , or <div class=”gfont”> some text </div> .
  8. Save your page as googlefont.html and test it in a browser.  Did your new font appear? If so, it’s time to add more fonts and Google has made that process ridiculously easy.
  9. Remove Parisienne from the search box and, if needed, click the directory tab to return to the starting page. Add another font the same as you added Parisienne. This time the black box at the bottom of the page should say something like ‘2 Families Selected.’  Add as many as you want (they’re free) and integrate them into your google fonts page.
  10. Now experiment with Google Font’s import tab.
    Screen Shot 2017-01-30 at 2.11.04 PMCreate a separate stylesheet named googlefonts.css and link it to your html page. Delete the links to the google fonts from your html page and figure out how to put the same links into your css file using the import tab (shown above).