Currently, Vanilla's theming system does not have a specific way to add a custom font to your header or footer if it is different from 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. That's 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 allows you to use whatever CSS framework you want without having to worry about it breaking your theme.
If you need to reference a custom font in your header/footer there is a workaround.
Step One: Encapsulate all of your custom fonts into a CSS file
You need to make a single CSS file that imports all of your fonts. This will be the site font and the fonts used in your header/footer. Your file should look something like this:
/* 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 Two: Upload your CSS file to the Web
You will need to upload your CSS file to a CDN or some other web server so that it's visible. When you do this you will have to make sure it has the proper CORS headers so that we can request that file from our servers.
Step Three: Specify your custom font in the theme editor
You can set your custom font in the theme editor using this method. In the example above you would specify "Roboto" as your font for the site.
Step Four: Use your custom font in your header/footer
Now that you have your custom font you can reference it in your custom CSS file for your header/footer. It would look something like this:
.icon {
font-family: FontAwesome;
}