There’s something really satisfying about finding out how to solve a problem and then sharing the solution with the world. Today – how to add Google fonts to a site built using Zurb’s Foundation framework.
For those who don’t know, Foundation is a really cool responsive front-end framework. it allows us to create great looking websites by providing a base to build on. Styles, scripts, responsiveness, accessibility; it’s all there. My only fault with it is the documentation. Like most ‘community-driven’ products these days, you find yourself having to scour the interwebs to solve the smallest and most irritating of problems. Such as the best way to integrate Google Fonts into it.
Turns out it was quite easy.
Find your font. This is super-simple. Head to Google Fonts and pick the one you want.
Main Google Fonts Screen
Fonts Customisation Box
You’ll want to select it with the little white cross in the red circle. A box will pop up at the bottom – you can now customise your selection as you see fit, and are supplied with a corresponding ‘import’ snippet. That’s the bit we need next.
In your Foundation install directory, navigate to /src/assets/scss. Open up the file called ‘app.scss’ using your favourite text editor (oh the choices; I see another blog post coming on). We need to add the import snippet, without the <style> tags, that we got from Google earlier. Now, when Foundation works its magic, and assuming you have the Sass version (which you should because its AMAZING), it will include the app.scss file into your websites main stylesheet, and you are good to go.
The app.scss file, with imported font
The settings.scss file, with a custom font-family variable
You’ve now enabled your new font on the site; it’s time to use it. If you are already familiar with CSS, this will be obvious, I’m sure. You simply use the ‘font-family’ CSS property on a suitable selector, such as a paragraph or ‘H1’ to instruct it to display in a particular font. In the case of Foundation, you get a special Sass file called ‘settings’ which makes it even easier. You only have to add the font name to the variable that corresponds with the text you want to change. The picture above shows the Crimson Text font as the main one for the whole site. Otherwise, you could of course use it on a custom selector inside your main.scss file. Head to the Foundation docs to learn what each of these files do. And that’s it! If it doesn’t work, then either I’ve given you duff advice, or your code is wrong. So let me know in the comments and I’ll help you out.