Adding more font options
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:
- O pen 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.
- Choose or search for the typeface you want to use. In the examples that follow, we will be using Ubuntu.
- Click the Quick-use icon for that typeface.
- On the screen that appears, click the checkbox for each font weight and font style you want to add. In the example below, we have chosen Light, Normal, Normal Italic, and Bold.
- Scroll down to the section labelled 3. Add this code to your website, and copy just the URL that appears within the href attribute, as shown below.
- 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 choose, in 3 different character sets: Latin (for English characters), Greek, and Cyrillic.
- 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 */.
- 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.
- 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:
Applying the theme overrides
To apply the theme override using the copied font code, follow these steps:
- Under the Website menu, click the Theme overrides option.
- From the Theme overrides screen, click the Activate theme overrides button.
- Click the link to download the theme files.
You can download the theme files (stored in a zip file) to any location you choose.
- 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).
- Unzip the theme files to a location of your choice on your computer or network.
- Within the root folder of your unzipped theme files, open the FontStyles.cfg file using any text editor.
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:
Open the following file within a text editor, depending on which theme version you are using:
Version # Open... 1.0 /Styles/theme.css 2.0 /Styles/include/globals. less 3.0 /Gadgets/shared.typography.less
Copy the font code you assembled using the instructions in the Getting the font code section (above).
Paste the code at the bottom of the file and save your changes.
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.