Adding Google fonts

Using theme overrides, you can add fonts from Google to the content editor. The Google fonts are web-open font format (WOFF) fonts. The additional fonts will not be available when editing an email or from the Colors and styles screen.

Getting the font code

Before you can apply the theme override, you need to get the font code from the Google Fonts website. To get the code for the fonts you want to add, follow these steps:

1. Open the Google Fonts site using the Microsoft Edge browser in Windows or the Safari browser on a Mac. This will force Google to provide you with the more universal WOFF font format rather than the WOFF2 format.  If your users use only Chrome or Firefox browsers, you can open the site using a Chrome and Firefox browser, which will provide you with WOFF2 format, which is less universal but faster to load. You cannot access the Google Fonts site using Internet Explorer.
2. Choose or search for the font family you want to use. In the examples that follow, we will be using Ubuntu.
3. Click the preview of the font family you want to use.
   
4. Click the plus sign beside each of the individual font styles you want to use.
   
5. In the upper right corner, click the View your selected families option.
   
6. Within the Use on the web section, copy just the URL that appears after the href attribute up to but not including the &display attribute, as shown below.
   
7. Open a new tab in your browser and paste the URL you just copied into the browser's address tab and press Enter. You'll see a page that begins like this:
   This page displays font codes for each font style you chose, in 3 different character sets: Latin (for English characters), Greek, and Cyrillic.  
8. Copy the font codes for the character set(s) you want to use and paste them in a text editor. In this case, we are copying only the Latin codes – the ones that begin with  /* latin */.
9. Using the text editor, replace all instances of http:// in the copied font code with //. This ensures that the code will function in both encrypted (https) and non-encrypted (http) modes.
10. Remove any lines that begin with unicode-range and include + signs, such as U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;.

You now have the font code that you will use in the theme override described below.

In our Ubuntu example, we end up with the following code:

/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(//fonts.gstatic.com/s/ubuntu/v7/WtcvfJHWXKxx4x0kuS1koRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(//fonts.gstatic.com/s/ubuntu/v7/_aijTyevf54tkVDLy-dlnFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(//fonts.gstatic.com/s/ubuntu/v7/Wu5Iuha-XnKDBvqRwQzAG_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(//fonts.gstatic.com/s/ubuntu/v7/sDGTilo5QRsfWu6Yc11AXg.woff2) format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(//fonts.gstatic.com/s/ubuntu/v7/nsLtvfQoT-rVwGTHHnkeJhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(//fonts.gstatic.com/s/ubuntu/v7/0ihfXUL2emPh0ROJezvraFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url(//fonts.gstatic.com/s/ubuntu/v7/IZYv9ktJI5s8uIr0hWnbSBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url(//fonts.gstatic.com/s/ubuntu/v7/WB6rgjTg_oRfj6mlXZJbb_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Applying the theme overrides

To apply the theme override using the copied font code, follow these steps:

1. Within the Website module, click the Theme overrides option.
2. From the Theme overrides screen, click the Activate theme overrides button.
   
3. Click the link to download the theme files. You can download the theme files (stored in a zip file) to any location you choose.
4. Take note of the theme version number included in the zip file name (e.g. business_casual_rainy_day.v2.0.zip = Version 2.0).
5. Unzip the theme files to a location of your choice on your computer or network.
6. Within the root folder of your unzipped theme files, open the FontStyles.cfg file using any text editor.
7. Add a <Style> entry for the new font, using the font family you specified within the font code you assembled using the instructions in the Getting the font code section (above). In our Ubuntu example, we would add the following line:
   <Style Name="Ubuntu" Font="Ubuntu" />
8. Open the following file within a text editor, depending on which theme version you are using:
   Version 1.0 – /Styles/theme.css
   Version 2.0 – /Styles/include/globals. less
   Version 3.0 – /Gadgets/shared.typography.less
9. Copy the font code you assembled using the instructions in the Getting the font code section (above).
10. Paste the code at the bottom of the file and save your changes.
11. From the File management screen in Wild Apricot, or using WebDAV, upload the modified files to the corresponding theme folders on your site.
12. Go to the Theme overrides screen and click the Rebuild theme button.

The font family you added should now appear within the font menu on the content editor toolbar.

You may need to log off and back on again to view the new option.