Documentation

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 <HEAD> tag content 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 <HEAD> tag content area

  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. Click on the Embed tab.
  6. Copy the code in the section below To embed a font, copy the code into the <head> of your html. (Keep this page open for the next set of instructions.)
  7. Paste the code in the <HEAD> tag content 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.
    • For this example we are going to apply the "Merriweather Sans" and "Gabriela" fonts to our ThoughtFarmer instance.
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 options 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 Embed tab, copy the text in the section below CSS rules to specify families.
  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.
  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.