This article pertains to Higher Logic Vanilla (Vanilla) sunset themes.
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.
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’}