By default, your Higher Logic Vanilla community uses the Open Sans font due to its legibility across multiple displays and devices. You can change your community's default font in Theme Editor, where you can either:
- Choose one of the other preloaded fonts or
- Set a custom font.
Notes on custom fonts
One scenario in which you might want to use a custom font is to make the text in your community align more with your "brand."
Before you can use a custom font in your Vanilla community, some work on your part is required, as described in this article.
Select a preloaded font
- Navigate to and edit your community theme to access Theme Editor.
- In the right panel, select GLOBAL STYLES.
- Click the Font dropdown and select one of the preloaded fonts.
- Save your theme.
Set a custom font
If you want to use something other than a preloaded font, you can add custom font definitions using a web-font service, such as Google Fonts or Adobe Fonts.
- These services offer web-optimized fonts and robust server architecture that deliver fonts to your community with only slight impact to performance.
✔️ TIP: Be sure to include at least Normal, Light, and Bold options when selecting your font styles.
Custom fonts don't work if you use a URL for a font file directly; they only work with a font definition file, such as those provided by web-font services.
Setting this up is a two-step process, outlined below.
Step 1 - Add web-font service domain to Trusted Domains
Before adding the custom font to your community, you have to add the domain of the web-font service to the Trusted Domains section of the Dashboard.
- In the Dashboard, navigate to Settings > Technical > Security.
- Add the domain of the web-font service in the Trusted Domains field (e.g., if you're using Google Fonts, add ).
Step 2 - Add custom font in Theme Editor
- Navigate to and edit your community theme to access Theme Editor.
- In the right panel, select GLOBAL STYLES.
- Click the Font dropdown and select Custom Font.
- In the Font URL field, specify the font definition URL provided by the web-font service.
- Enter the desired font into the Font Name field.
🛑 IMPORTANT: The spelling and wording must be exact in order for the font to work.
Example
Your theme preview immediately updates and is now using your custom font.
- If everything looks correct, save your theme.
Host your own fonts
In this section, you'll learn how to set up a font to serve as a web font for your Vanilla community.
1. The font must be a web font. There are online convertors to convert a standard font file to a web font. You can learn about this process at this Mozilla developer article.
2. You must create a font definition file (FDF). This is a CSS file that declares the font name and file location.
3. You must have a place to host the font file and the FDF. It's best to host them on a content delivery network (CDN); regardless of the location, you'll want the font to load quickly.
4. On the Dashboard > Appearance tab, access and edit your Style Guide (i.e., theme).
- On the Global Styles tab, click the Font dropdown and select Custom Font.
- Paste your FDF URL into the Font URL field.
- Type the name of your font, exactly as it appears in the definition file, into the Font Name field.
5. Save your Style Guide to apply the change.
https://fonts.google.com
