Add a Custom Font to a Foundation-based Header/Footer - HL Vanilla Community
<main> <article class="userContent"> <p>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.</p><p>If you try to add an <code class="code codeInline" spellcheck="false" tabindex="0">@import</code> statement to your custom CSS file, you'll notice it doesn't work; this is because we use a technology called the <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" rel="nofollow noreferrer ugc">Shadow DOM</a> 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.</p><p>The steps that follow provide a workaround solution for you to reference a custom font in your header or footer.</p><h2 data-id="step-1%3A-encapsulate-all-of-your-custom-fonts-into-a-css-file">Step 1: Encapsulate all of your custom fonts into a CSS file</h2><p>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:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">/* 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 } </pre><h2 data-id="step-2%3A-upload-your-css-file-to-the-web">Step 2: Upload your CSS file to the web</h2><p>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 <a href="https://success.vanillaforums.com/kb/articles/42" rel="nofollow noreferrer ugc">CORS</a> headers so that we can request that file from our servers.</p><h2 data-id="step-3%3A-specify-your-custom-font-in-theme-editor">Step 3: Specify your custom font in Theme Editor</h2><p>Set your custom font in Theme Editor using <a href="https://success.vanillaforums.com/kb/articles/285" rel="nofollow noreferrer ugc">this procedure</a>.</p><p>📝 <strong>NOTE</strong>: In the example in step 1, <strong>Roboto</strong> is set as the font for the site.</p><h2 data-id="step-4%3A-reference-your-custom-font-to-your-css-file">Step 4: Reference your custom font to your CSS file</h2><p>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:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">.icon { font-family: FontAwesome; } </pre> </article> </main>