Source

Source v2 brought with it a whole new way of managing your fonts in Source projects. Now, if you want to use anything other than the system fonts, there is a separate stack that is used for this. We made this change for a few reasons:

1. Using a non-system font (Raleway) as the default font in a lightweight CSS framework was always a bit of an odd move (though I do still love Raleway!)
2. The amount of font combinations that you could use was limited. You could set a font for regular text and another for headings. There was also the option of using a different font again for h1 headings. This was ok but there was no possibility of using any other font combinations.
3. Without adding yet more settings into the Source Base stack there was no way to add more control over fonts (and some font-related things like line-spacing, word spacing and letter spacing).

Source v2 (and the new Custom Fonts stack) addresses each of these areas. The new stack allows you to add your own custom self-hosted font (either warehoused or in RW resources), add a Google font, use Raleway font (the previous default) or any other system font.

I know a lot of people liked the old Raleway font and so let's look at how to set up the previous defaults using the new stack.

Adding Raleway as a custom font

After dragging the Custom Fonts stack to the page (somewhere near the top is best) we can select 'Raleway' from the available options.

Now that we have selected Raleway, we need to tell Source which weights of font to make available. The default values will be generally be fine here but feel free to experiment. For reference the 'normal' font weight for most text is 400 and headings will generally be 700 weight.

Both of these values are being made available for our 'body' text (see below) so that when we use bold fonts (and bold italics) we have the right fonts available to do this.

When we add a Custom Fonts child stack (like we have just done with Raleway). The default 'Assign to' value is for body and this is exactly what we want in this case as this will apply Raleway as our 'base' font meaning that all text on the page will pick up this font unless it is specifically using a different font.

Lets now set up Raleway again but this time for our headings...

Add another Raleway child stack but this time deselect the 400 weight fonts and change the 'Default weight' to 700. Note that even though we are using the 700 weight here and for the base font it will only get loaded by the browser once.

Instead of assigning this font to the body we want to apply it to all headings so select the 'All headings h1-h6)' option from the available options:

Note: Check out all of the other text elements that we can now target with the Custom Fonts stack! There is even a 'Custom' option available in case you want to add your own selector(s) for something that isn't listed.

And that's it!

We have now set up our project file to use Raleway 400 weight for body text and 700 weight for headings. Exactly as it was in Source v1. If you want to keep things neat and tidy you could select 'Custom' as the font options in the Source Base stack (as this tells that stack that the font loading / assignations are being set up elsewhere).

---

These new options will let you do much more with fonts within Source. Experiment with using different fonts for Buttons or for Quotes text etc. Try using the different spacing options.

A tip though: Don't go crazy with adding custom fonts! Fonts can be heavy in weight and therefore affect page speed so do think carefully about when and where you are using them. Where at all possible you are best using web-safe fonts such as those available via the included System fonts lists.

You can read more about using fonts in Source on our Knowledge Base page for the Custom Fonts stack