This article pertains to Higher Logic Vanilla (Vanilla) sunset themes.
📝 NOTE: Vanilla recommends switching to our new Foundation theme. Learn how to migrate your sunset theme to Foundation.
Vanilla’s older base theme HTML can be modified and CSS can be overridden. In order to modify a Vanilla theme, you must possess good knowledge of HTML and CSS.
🛑 IMPORTANT: Consult the Vanilla Forums Theme Guide for detailed instructions.
Using web fonts
The easiest way to change the font in the base theme is to use a web font. You will have to add a link to the font in the theme HTML.
📝 NOTE: Knowledge of CSS is required to use the CSS customization features of Vanilla.
⭐️ EXAMPLE: To change the default font to the Google font Lato:
- Get the link snippet from fonts.google.com:
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> - Get the CSS rule:
font-family: 'Lato', sans-serif; - On the Edit HTML tab of the Customize Theme page in the Dashboard, add the font link snippet (from step 1) in between the tags
- On the Edit CSS tab of the Customize Theme page in the Dashboard, add:
body {font-family: 'Lato', sans-serif;}
Notes
- If you want to install a font that is not available as a web font, see:
- For safe implementation, use smarty's escape variable modifier. Be careful when using the $Path variable.
- Unsafe implementation:
{$Path} - Safe implementation:
{$Path|escape:‘url’}
