Foundation 6: Force Remote Font Loading For Google Fonts

Loving how my latest Foundation 6 website was proceeding in development, I realized the website was loading a system font (in my case Roboto) when viewing the site on my local computer.

I’m using Foundation 6 (Sass) with WordPress 4.5 using the JointsWP theme developed locally in Wamp.

Around line 63 in the file _global.scss (located in: themes/JointsWP/assets/scss) I could see the font stack that was loading:

As I didn’t have the Helvetica fonts loaded in my system the site was rendering with Roboto. Perfect! Until I realized that it wouldn’t be loading this way for others unless they had the Roboto font installed locally on their computer—which wasn’t likely.

When diagnosing the what and where of what I was seeing in my browser tools, I could tell the site was rendering using a system font because when inspecting the text in the font tab it showed “system” and not “remote”. I then disabled my local font Roboto (using Suitcase Fusion 2) and the site looked completely different. Ugh. But, to be expected when it loads the font stack left to right until it finds a font available to your system.

I really liked how the site was looking locally using Roboto so I wanted to force Foundation to load Roboto from Google fonts so everyone gets to view it the way I intended. And if there was an issue with Roboto for one reason or another there would be a fallback. Here’s what I did to accomplish just that.

Make it happen!

I firstly updated the font stack global in Foundation (from the line mentioned above) to read:

This would tell browsers to use the Roboto font first if available. So the next step was therefore to “make it available”, or load it. Keep in mind you’re going to want to load the font before any code/css makes use of it. Note also that if Roboto wasn’t found it would try to load the two Helvetica variations and then default to Arial.

I went to Google fonts, found the Roboto font, chose the two style variations I wanted (normal 400 and bold 700). I then added them in my style.scss sass stylesheet (located in: themes/JointsWP/assets/scss) before any mixins or anything was called. Around line 11  I added the Google font @import rule:

Done! Now the site goes and gets the font and is used globally for my body font. Awesomeness.

Bonus tip for Sass users:
I always like to comment my edits/additions. If you didn’t know it, with Sass you can comment out code normally like you might expect /* comment this out */ and it renders in your final css stylesheet. BUT… if you comment out a single line of code in Sass using a double-slash // the comment won’t get rendered!

Example, in your scss file:

 

 

Tags: , , , , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (16)  (1)  (1)  (7)  (1)  (4)  (15)  (5)  (2)  (27)  (9)  (1)  (11)  (4)  (4)  (4)  (8)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (2)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (9)  (11)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (26)  (4)  (4)  (9)