CS 601 – Using Google Fonts

I started building my actual page template after building most of my pages as pages in Powerpoint for quick drafting. I currently have the main sections laid out and now need to start doing more of the design. (Actually, first I have to figure what I want the restaurant to be, but I have some ideas.) While working on this, I started exploring the use of Google’s open source web fonts. This is pretty straightforward as is done as follows:

  1. Go to the Google web font site.
  2. Click “Quick Use”
  3. Under 3., choose the @import tab. Copy this text and paste it into your CSS file. (the text should look like:
    @import url(http://fonts.googleapis.com/css?family=Federant);
  4. Use the font in your declarations, remembering to include a fall back.
    .content h1 {
        font-family: 'Federant', cursive;
        color: #330099;
    }

What it looks like:

(P.S. — No comments on the actual font please. I’m just using this as an example and trial.)

Leave a Reply

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