Google Fonts API

How to use the Google Fonts API to add fonts to your web pages. You don’t need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

A quick example

Here’s an example. Copy and paste the following HTML into a file:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:Making the Web Beautiful!

Making the Web Beautiful!

That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

You should now see a drop shadow under the text:Making the Web Beautiful!

Leave a comment

Your email address will not be published. Required fields are marked *