| 13 | Building a Font Family Library |
In regular CSS, we specify fonts like this:
| | font-family: "helvetica neue", arial, helvetica, freesans, |
| | "liberation sans", "numbus sans l", sans-serif; |
We have to list all our preferred fonts in the order we want them. Then, inevitably, we have to include the most basic serif or sans serif at the end—just in case none of our fonts are available. But if we want to switch between fonts on a page, then we have to copy and paste this list over and over in different places or use ugly, nonsemantic font classes. So much repeated code. We’ve got a simpler way.
We can use variables in Sass! Instead of typing out the list of fonts over and over, define a variable at the top of the page. Then, when you want to add that long string of font names to a selector, just use the variable the way you normally would.
So much easier, don’t you agree? But we can make it even easier. In almost every one of our projects, we have a set of font-variables that we always include, which we’ve shown on the opposite page.
You can put this at the beginning of your style sheets. Or, to keep your style sheets cleaner, you could use the importing technique we’ve just seen. Make a separate style sheet with all the fonts in it called, for example, _fonts.sass. Then import the file (using @import) at the top of your main style sheet.
| What To Do... |
- Define a variable with your fonts.
$helvetica: "helvetica neue", arial, helvetica, freesans, "liberation sans", "numbus sans l", sans-serif;
- Use the font variable as usual.
body { font-family: $helvetica; }
- Try this simple font library.
basics/font_family.scss $helvetica: "helvetica neue", arial, helvetica, freesans, "liberation sans", "numbus sans l", sans-serif; $geneva: geneva, tahoma, "dejavu sans condensed", sans-serif; $lucida: "lucida grande", "lucida sans unicode", "lucida sans", lucida, sans-serif; $verdana: verdana, "bitstream vera sans", "dejavu sans", "liberation sans", geneva, sans-serif; $cambria: cambria, georgia, "bitstream charter", "century schoolbook l", "liberation serif", times, serif; $palatino: "palatino linotype", palatino, palladio, "urw palladio l", "book antiqua", "liberation serif", times, serif; $times: times, "times new roman", "nimbus roman no9 l", freeserif, "liberation serif", serif; $courier: "courier new", courier, freemono, "nimbus mono l", "liberation mono", monospace; $monaco: monaco, "lucida console", "dejavu sans mono", "bitstream vera sans mono", "liberation mono", monospace;
Related Tasks
-
Task 9, Defining Variables
-
Task 12, Importing