Add custom web fonts

Add custom web fonts using the Theme page

In ThoughtFarmer there are many default fonts available out of the box but you may also want to apply custom web fonts to your intranet. This is a fairly simple process. The steps below use Google Web Fonts as an example.

There are 2 main areas in ThoughtFarmer where you need to make changes in order for your web fonts to appear. These two areas are:

• The Custom CSS area on the Admin panel > User interface section > Theme page.
• The theme.fontfamilies configuration setting in the Admin panel > Advanced options section > Configuration settings page.

Adding the font to the Theme Custom CSS area

For this example we apply the "Merriweather Sans" and "Gabriela" fonts to our ThoughtFarmer instance. Select the desired web fonts for your intranet.
 

1. Proceed to the Google Web Fonts website.
2. Click on a desired web font.
3. On the font page, click on +Select this style beside the styles you want.
4. Click on the View your selected families icon in the top right.
   
   
    
5. In the Use on the web section, select the Import radio button. Copy the code in the field below, excluding the <style> tags. (Keep this page open for the next set of instructions.)
6. Paste the code in the Custom CSS area found on the Admin panel > User interface section > Theme page > Custom HTML, CSS and JavaScript tab. Click Save at the top of the page.

Once this has been completed, follow the steps below to add the font family to the theme.fontfamilies configuration setting so that it will show up in the font dropdown.

Adding the font family

1. Proceed to the Admin panel > Advanced section > Configuration settings page.
2. In the Search config settings box, type theme.fontfamilies. The configuration setting will appear with all of the default fonts listed in the value field.
3. Back on the Google Web Fonts page, in the section below CSS rules to specify families, copy the text after font-family: for each font.
   
   
    
4. Paste the text into the Value field of the config setting found above.
   • For this example we copy "Merriweather Sans", sans-serif; and Gabriela, serif; into the area. Ensure that the fonts are separated by a semi-colon (;) in the configuration setting, and that font names consisting of more than one word are surrounded by double quotation marks.
5. Click Save on the Value field.
6. Go to the Admin panel > User interface section > Theme page > Typography tab.
7. Select from the dropdown in order to apply the new font to your ThoughtFarmer intranet.
8. Click Save at the top of the page.

For advanced users

You may only want to apply your custom font to certain areas of your ThoughtFarmer instance. For example, you may want all of the H1 headings in the site to use the custom font. To do this, add the following code to the Custom CSS section of the Theme page:

h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }

This allows you to apply some fonts using the dropdown and others through this custom code.