Using Google Fonts with Foundation.

It is very easy to use Google Fonts with Foundation. Follow the directions below to learn how.

Basic Usage of Google Fonts and the Foundation theme.

1. Start by finding the Google Font you want to use here - https://www.google.com/fonts

2. Highlight the name of the font and cooy it to your clipboard. Below is an example for the Font Roboto Condensed

   

3. Go to the Foundation Site Styles Settings and find the setting called Foundation - Text. Choose the Font you want to change. You can have different Fonts for H1, H2-H6, Text or decide to have Custom Font Selectors by checking that box (will go over more later). Once you have choosen which font size you want to use, click on the name of the font that is the default for that size (this will either be Open Sans or Helvetica Neue) and you will see a list of fonts that are installed with the theme. Since we wantto use a Google Font, you want to find the choice Custom Definition and click. When you do this, the settings will change and give you a check box entitled Use Google Font? and an empty container. You can use other fonts, but you will need to include the provided code in the Page Inspector, with Google Fonts, you can just paste in the name of the Google Font you want to use. As you can see below, I have change the fonts for H1, H2-H6 and Text to three different fonts. You will also notice that I changed the Font Weights on some of the settings, be sure the Google Font supports those weight settings before you change.

   

4. Once you paste the code, hit the return or enter key so the setting is changed. You will notice that the font does not change in edit mode, if you want to see what the font looks like, you need to preview the page. Below, you will see the previewed page for the settings above.

   

This is the basic usage of Google Fonts and the Foundation Theme. Read below if you want to learn a little more advanced usage of Google Fonts and the Foundation Theme.

Advanced Usage of Google Fonts with the Foundation theme.

1. You will notice that some of the fonts on Google have Italic and Bold versions. The bold versions are very easy to do, just adjust the Font Weight setting to match the Bold version of the Font. Below is a list of the different versions of the Roboto Condensed font. The Bold version has the number 700 behind it. This is the weight of the font. So if you want to use the Bold version of this font, just change the Font Weight setting to 700.

   

2. To make a font Italicized, you will need to get into the Stacks Text Style Bar. To do this, double click on your text, like you want to edit the text. Then select all of the text by holding down the Command key and pushing the A key (Cmd-A). Now, look above the stack settings, you should see the following Style Bar appear.

   

Click the letter I to make your text Italic, this will work in the Paragraph stack BUT will NOT the Header stack. If you want to make a Header stack Italic, you will need to add the following code to your Page Inspector in the CSS Tab:

h1{font-style:italic;}

and adjust h1 to what ever header size you want to make Italic. Remember though, if you do this, ALL of the headers for that size will be Italic.

The other advanced thing you can do is use the Custom Font Selectors. To do this, check the box next to that question. When you do this, you will see the settings change.

Now you can choose which font on your site will fit into which category.

We hope you enjoyed this FAQ aobut Foundation and Google Fonts!

Now go forth and make your websites great!