Join Ray Villalobos for an in-depth discussion in this video Adding custom fonts and icons, part of Responsive CSS with Sass and Compass.
…Now there's a time when web developers had just a few fonts to choose…from, now with tools Typicade and Google…Fonts, hardly anyone uses those default fonts.…Now adding them to your project is pretty…easy, but I use a slightly different notation.…So let's take a look, now to add fonts, you usually go to a fonts web site…like Google Fonts and then you find the font…by typing it in this search box right here.…I like to use a font…called Bree, so, I'm going to to search for that and then…click on this add to collection button and another one called Meriwether.…
And I'm just going to use this right here and add it to my collection.…Now whenever you want to use them, you click on this use button.…And then you find the code for the font and copy and paste that into your HTML.…Now, I like to call my fonts from within Sass, so I'm going to copy this…part of the URL right here and go over to my project, find the…base.scss partial, and then type in @import url.…And then in quotes, I'm going to paste that right there and save it.…
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- What are Sass and Compass?
- Adding version control
- Setting up a workflow with Grunt.js
- Modularizing your Sass with partials
- Creating a color palette with variables
- Using Compass mixins
- Creating a mobile-first layout
- Creating media-query breakpoints with Susy
- Designing a responsive grid with Susy
Skill Level Intermediate
Q: I am having trouble with the "Modularing your Sass with partials" video. Does Susy still support the @include at-breakpoint() mixin?
<div>A: The new version of Susy (2.1.3) doesn't support the @include at-breakpoint() mixin. This course is written for version 1.0 of Susy; however, you can still use the Susy 1.0 syntax as long as you modify the include command. In the styles.scss file, change the line that says: </div><div> </div><div><span style="font-family: Courier;">@import "susy" </span></div><div> </div><div>to </div><div> </div><div><span style="font-family: Courier;">@import "susyone" </span></div><div> </div><div>And you should be able to use the older syntax. There's more information at <a target="_blank" href="http://susy.readthedocs.org/en/latest/susyone">http://susy.readthedocs.org/en/latest/susyone/</a>.</div><div> </div>