How to Add Gorgeous Free Fonts to Your Site with Google Web Fonts

How to Add Gorgeous Free Fonts to Your Site with Google Web Fonts

If you’re building your site thinking you’re stuck using ONLY typical “web safe” fonts such as Arial, Helvetica or Times New Roman, please know you do have choices! And some very sexy choices too!

Google is not only an amazing company (who wouldn’t want to work there?) but creates some fantastic free services for us besides Gmail. One service being Google Web Fonts. They offer a large selection of stylish fonts that you can easily embed into your site — 455 font sets. Then you can dress your content up without having to create images for those headers and titles. In the old days of web development, we had to create images for any titles, headers or banners that used a special, stylish font. The down-side of that is that images take longer to download and slow the whole site down. Embedding fonts makes your site super-fast and super-cool. Here’s how to do it:

  1. Go to Google Web Fonts: http://www.google.com/webfonts#HomePlace:home
  2. Click the “+” button next to the font(s) you’d like to use in your site.
  3. Next, click the black bar at the bottom of the window and copy the sample code (see screenshot):
    screen-shot-2016-09-22-at-3-35-46-pm

    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
  4. Paste this code into the <head> tag of your website.
  5. Last step, copy the CSS code they give you. Example css code:
    font-family: 'Ledger', serif;

    Use that code in your sites stylesheet css targeting the tag you want to use the special font. For instance:
    h1 { font-family: 'Baloo Bhaina', cursive; }
    Now your “h1” titles will use this special font.

That’s it! Seriously.

Now you can design your site typography with some real flexibility and style. Have fun!

MissCam

MissCam

Cam Pietralunga is a web and graphic designer with over 10 years professional experience designing and building website and iOS apps. Legit. Pushing herself creatively is her thing whether it's on a detailed pencil illustration, a watercolor painting or a client's new logo.
MissCam

Latest posts by MissCam (see all)