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 https://fonts.google.com).
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. First, the font must be a web font. There are online convertors you can use to convert a standard font file into a web font. You can learn more about this process across the web (here's one such resource).
2. Second, you must create a font definition file (FDF) (this is essentially a CSS file declaring the font name and file location).
3. Once you've completed the steps above, you need a place to host both the font file and the FDF. It's typically best to host these on a content delivery network (CDN); regardless of the location, you'll want the font to load quickly.
✔️ TIP: If you don't have a CDN to host the file, you should be able to upload both files to your Vanilla CDN using the /media API endpoint. You can even do this via the API v2 page on your Dashboard > Settings page. (It's possible we'll need to add the extension to your allowed uploads in order to do this. You can also host the FDF on your main site). Make sure to do two things if you go this route: (1) Once you've uploaded the FDF, copy the URL for both the next step and for future use. (2) Upload the font file first, and then copy the URL of the font for use in the FDF.
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.
