Vanilla's theming system does not support adding a custom font to your header or footer if the font is different than the custom font used in your theme.
If you try to add an @import statement to your custom CSS file, you'll notice it doesn't work; this is because we use a technology called the Shadow DOM to make sure that your CSS and Vanilla's CSS don't conflict with each other. This means that you can use whatever CSS framework you want without it breaking your theme.
The steps that follow provide a workaround solution for you to reference a custom font in your header or footer.
Step 1: Encapsulate all of your custom fonts into a CSS file
Make a single CSS file that imports all of your fonts (your site font and those used in your header and footer). Your file should resemble the following:
/* This is my main site's font */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* I want to use this font in my footer to add some icons. */
@font-face{
font-family: 'FontAwesome';
src: url('https://stackpath.bootstrapcdn.com/fonts/fontawesome-webfont.eot?v=4.7.0');
font-weight:normal;
font-style:normal
}
Step 2: Upload your CSS file to the web
Upload your CSS file to a CDN or other web server so that it's visible. When you do this, make sure it has the proper CORS headers so that we can request that file from our servers.
Step 3: Specify your custom font in Theme Editor
Set your custom font in Theme Editor using this procedure.
📝 NOTE: In the example in step 1, Roboto is set as the font for the site.
Step 4: Reference your custom font to your CSS file
Now that you have set your custom font, you can reference it in your custom CSS file for your header and/or footer. It would look something like this:
.icon {
font-family: FontAwesome;
}