CSS

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.

googlesass_001

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

googlesass_002

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

Josh Medeski is a freelance web designer, front-end developer, and writer. You can follow him on twitter and check out his website where he guides entrepreneurs in understanding technology and design. More articles by Josh Medeski
  • Jan

    Doesn’t many people say, never use CSS import?

  • If your output CSS file still does an @import call for Google Fonts that is still a request being made the same as if you linked to it in your head. I might be missing some Sass magic, but I don’t think it will save a request.

  • thefairystamp

    Save the Name of the Font as string in a variable – thats not really “using google fonts with sass”. Thanks for taking the time to write this, but if people know how to use the very basics of sass, they know how to do that.

  • p@
  • “If your output CSS file still does an @import call for Google Fonts that is still a request being made the same as if you linked to it in your head.”

  • It’s actually considered worse to link the fonts in the stylesheet since it blocks the rest of the stylesheet from downloading.

  • Tim Hettler

    You should take this idea to the next logical step: Store the fonts you want to use in a list, then loop through that list to create a dynamic Google Font URL to import.

  • var = DivisiveCotton

    Using CSS @import?! Big performance no no

    • powerbuoy

      No bigger than a element?

      • Afaik most browsers today paralellize link elements, while @import will cause blocking on that stylesheet(and should google be blocked (eg. china) that stylesheet will be blocked until timeout)

  • Akash Soti

    Thanks Man!!

  • Ls Mfft

    Correct me if I’m wrong….

    When you compile @import url(google-font-url-here), it compiles to the css that google fonts serves up from the specific url given. Google Fonts is set up to serve the right font format dependent on the browser, eg ttf for safari, woff / woff2 for ffox. So when you compile the sass -> css, google fonts only serves one css rule dependent on configuration (that of the sass compiler / command-line / node.js?), which is subsequently compiled to a single option in an @font-face rule, no fallbacks, no alternatives. So through compilation you’re actually reducing cross-broswer-ness…

    @import url(‘https://fonts.googleapis.com/css?family=Patua+One|Quicksand:400,700′)

    compiles to…

    @font-face{
    font-family:’Patua One’;
    font-style:normal;
    font-weight:400;
    src:local(‘Patua One’),
    local(‘PatuaOne-Regular’),
    url(https://fonts.gstatic.com/s/patuaone/v6/yAXhog6uK3bd3OwBILv_SKCWcynf_cDxXwCLxiixG1c.ttf) format(‘truetype’)
    }

    Just one font format there. So if your users don’t support that format…

    (Admittedly a brief glimpse at caniuse suggests most can in some way)

    Better off just including another stylesheet in the document or just include @font-face in an inline style? that way you get the right font format.

    Yes it’s more requests, but it won’t block rendering and you know you’ll get the appropriate file-type. No?

    Try going to “https://fonts.googleapis.com/css?family=Patua+One” in different browsers and you’ll see what i mean, google fonts does some feature detection I bet and subsequently gives you the right font that you need.

    yes / no?

    • powerbuoy

      This seems correct to me. When I do an @import it stops working in IE9. Had to move to external elements. Wish one could tell SASS to perform a “normal” @import some way. Might switch to the JS version but feels like you’ll get some font flickering with that.

  • benjamin saravia

    It worked for me, thanks!

  • numediaweb

    Will web fonts slow down my page?
    Web fonts are likely to enhance the performance, maintainability, and accessibility of your page.
    https://developers.google.com/fonts/faq#will_web_fonts_slow_down_my_page

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress