How to easily use Google Fonts with Sass

In this post, we are going to explore open source fonts and CSS pre-processing.

I am going to give you an easy way to add web fonts to any website in just a few lines of code.

What are Google Fonts?

Google Fonts makes it quick and easy for everyone to use web fonts.

Google Fonts is a collection of open source fonts that are hosted on Google’s servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it’s free. (To learn more and explore the hundreds of fonts available, check out the Google Fonts website.)

What is SASS?

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass is a pre-processing language with features extending regular CSS, like variables, nesting, imports, mixing and more. Many frameworks are built with Sass, including Foundation, Susy, Compass, and many more.

To learn more about using Sass in your projects, check out WebdesignerDepot’s Beginner’s guide to Sass.

Using them together

Now that you have a basic understanding of Google Fonts and Sass, it’s time to learn how to use the two together.

Pick your font(s)

The first step is to choose your font. Explore the Google Fonts website and when you decide on a font, click the “Add to Collection” button.

Once you have all of your desired fonts for your website, click the “Use” button on the bottom right of the page.

Next, pick out your desired font weights and character sets. Only select the items you need, as too many weights and sets can slow down your website. Keep this page open, because in the next step you are going to use the code in items 3 and 4 (Adding code, and integrating the fonts).

Sass variables

A variable in Sass is created with a $ symbol and can be reused in your styling.

// Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #2ba6cb;

// Styles
.button {
  font-family: $font-stack;
  background-color: $primary-color;
}

When the Sass file is processed, it replaces the defined variables with the appropriate CSS. This is a simple example, but with bigger projects it becomes really helpful to keep everything consistent.

.button {
  font-family: Helvetica, sans-serif;
  background-color: #2ba6cb;
}

Now that we have a basic understanding of variables, we are going import the Google Font stylesheet, create a variable for each font, and use the fonts in our styling:

// Google Fonts
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

// Font Variables
$roboto-slab: 'Roboto Slab', serif;   
$open-sans: 'Open Sans', sans-serif;

// Styles
body {
  font-family: $body-font;
  font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
  font-family: $header-font;
  font-weight: normal;
}

.button {
  font-family: $roboto-slab;
  font-weight: bold;
}

Conclusion

Here are a few things to remember:

• Only import the weights and character sets you need.
• Make sure your font weights are defined in the import function and in your Sass.
• Use the @import function not the Standard. Linking the stylesheet in your HTML will cause your website to make more requests and you will be missing out on the power of pre-processing.
• Create a system that makes sense to you. If you need to change the font family or weight, you need to create a simple structure that is easy to make your way back to.
• Always compress your outputted CSS. You should never have to reference the CSS files while coding, because all of your work should be done in Sass. Compressed CSS will give you the smallest file size and a faster website.

I hope you found this helpful for using these two tools together. Remember, this is just an example of how to implement these two systems together.

To download free fonts, check out our friends at UrbanFonts.com