You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Retrieving a Google web font

Google publishes a catalog of open source designer web fonts which are relatively easy to download and use on your website.

In this example, we will use the font Dancing Script and apply it to our Heading 2 (H2) tag.

  1. To download a font, go to the Google catalog at http://www.google.com/webfonts
  2. Select a font.  When you hover your cursor over the name of a font, you can see selections for the type of content, such as paragraph, sentence, numbers, etc., which helps you to decide on the font.  You can also select the thickness of the letters, and whether the typeface is Roman or Italics, depending on the font.  You can use the slider to size the font.  

  3. Google will give you the code to use on your website, the one below is for the font Dancing Script.

    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
    

Adding the font code to your 

  1. Go to Website > HTML HEAD

  2. Then in the CSS, add the styles for the Google Font:

Example:

/* Applies formatting for Heading 2*/

h2 {
margin: 0 0 15px 10px;
font-family: 'Dancing Script', serif;
font-size: 41px;
font-style: normal;
font-weight: 400;
text-decoration: none;
text-transform: none;
letter-spacing: 0.061em;
word-spacing: 0.115em;
line-height: 1.11;
}



  • No labels