Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Getting Modular with Mixins and Functions The Project Config File

CJ Williams
CJ Williams
34,372 Points
Posted by CJ Williams
CJ Williams
34,372 Points

Font Questions

When importing multiple fonts from google web fonts using this method, should all fonts be included in the same font-url--google variable, separated with the bar?

$font-url--google : 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,300italic,600italic,700italic,900italic|Noto+Serif:400,700,400italic';
$font-weight--thin       : 100, 200;

Also, can multiple values be applied to a font weight? i.e.:

or would that involve a function that would look for a 100-weight font first, and if nothing is there use a 200-weight font...

And, for naming stacks, Wouldn't a logical naming convention for the fonts make more sense? Something like $font-family--display, $font-family--sans, $font-famiy--serif?

1 Answer

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

Hi CJ,

Yes, all fonts should be included in the same line of code in your CSS file. For example, on a site I'm making right now, I wanted to use two separate fonts, and only include one font-weight for the second font. Here's the code:

@charset 'UTF-8';
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,200italic,300,400,600|Raleway:400');

This is the line of code in my main CSS document. To actually apply these styles, here's an example of using the Raleway font in my code:

    h1 {
        font-family: Raleway, sans-serif; /* sans-serif as a fallback */
    }

Because I've only imported one font weight (400), that's what this font-weight will show in the browser. I recommend only using two fonts per website, as more than that decreases page load times (as I'm sure you're aware), and typographically is distracting to the end-user.

I hope this helps, and gives you a chance to play around with different imports.

CJ Williams
CJ Williams
34,372 Points
CJ Williams
CJ Williams
34,372 Points

Hey Tyler,

I am working with a Sass function that imports the fonts trough use of a variable named $font-url--google, so it works slightly different than the import method used in standard CSS. I figured it out tho. Using this variable/function combo works slightly different than other variables in Sass. I imported 3 fonts, which had to be added separately, then created font-stack variables for $font-stack--sans, $font-stack--serif, $font-stack--display.

Here is what the final code looks like:

@if variable-exists(font-url--google) { @import url($font-url--google); }

// Font Imports $font-url--google : 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,900,400italic,700italic'; $font-url--google : 'http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700italic'; $font-url--google : 'http://fonts.googleapis.com/css?family=Raleway:200,300,400,700';

// Font Stacks $font-stack--sans : 'Source Sans', Helvetica, Arial, sans-serif; $font-stack--serif : 'Droid Serif', Lucida, Georgia, serif; $font-stack--display : 'Raleway', Arial, sans-serif;

// Font Weights $font-weight--thin : 200; $font-weight--light : 300; $font-weight--normal : 400; $font-weight--bold : 700; $font-weight--ultra-bold : 900;

(It isn't letting me markdown as code for some reason)

As far as the font-weight is concerned, only one value can be passed without having to write a function. Source Sans just doesn't play well with this formula because of the thin, 200-weight (which is more like a traditional thin) and the super thin, 100-weight.

Hope this is helpful. Thanks for the reply, Tyler.

Cheers, CJ

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

Thanks for getting back to me on this, CJ. I'm not quite semantically awesome, so this is beyond my knowledge, but Sass is a module on my current track. I may have to reference this post when I get to that portion.

I've heard nothing but good things about Sass, and strangely I'm hesitant to give it a whack. Ordinarily I'm pretty curious, but I'm comfortable with managing my CSS at the moment and see no real need. I'm sure I'll come around after I see how semantically awesome it is.

Have a good one,

Tyler