By default, your Higher Logic Vanilla community uses the Open Sans font due to its legibility across multiple displays and devices. When editing a theme, however, you can change its 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.
⚠️ IMPORTANT: Any time you're working with website design, it's important to keep accessibility principles in mind. See Accessibility in your Vanilla Community to learn more.
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 a theme, 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
https://fonts.google.com).
Step 2 - Add the 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.
- 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 in this Mozilla developer article.
- You must create a font definition file (FDF). This is a CSS file that declares the font name and file location.
- 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.
- On the Dashboard > Appearance tab, access and edit your Style Guide (i.e., theme).
- In the GLOBAL STYLES section, 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.
- Save your theme to apply the change.
https://fonts.google.com
