Using Google Fonts


#1

Getting started with Google Fonts on Cloud9 is fast and painless.

From your preferred Cloud9 workspace, create a new HTML file and call it whatever you’d like to. In the file, paste the following text:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Cloud9 + Google Fonts!</div>
  </body>
</html>

Note: Using http before CDN links can sometimes cause issues because the preview is loaded over HTTPS by default. If you need to load your page by HTTP then pop out the preview window and change the URL. In this case, we’re just putting // before the link so it will automagically use whichever protocol is appropriate.

Of course, the key to this file is the third line, where we add Google Fonts. You’ll probably want to choose your own font that fits your site but Tangerine will work as a proof of concept.

Now click the Preview button and select Live Preview File and you’ll see the following:


From here, feel free to add different fonts and continue to build your site as you wish!


Tutorials - Table of Contents
#2

Looks and works great! How about Adobe Typekit?