Setting your Font in the Theme Editor - Vanilla Success
<main> <article class="userContent"> <p>By default your forum is loaded with an "Open Sans" font, however you can easily update to the font you'd like to use in your community. </p><p>With our Theme Editor you're able to select a different font family from our presets, or you have the option to configure a custom font.</p><p>To set your default font, navigate to the theme editor and open the Global Styles option on the right hand side:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/TVWSR3TLWHBO/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TVWSR3TLWHBO/image.png" alt="image.png" height="1190" width="2536" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="how-do-i-set-a-custom-font">How do I set a Custom Font? </h2><p>If you do not wish to use any of the default fonts in the style guide editor, we support adding custom font definitions using a web-font service such as Google Fonts or Adobe Fonts. These services offer web-optimized fonts and robust server architecture from which to deliver fonts to your site without an enormous impact on performance. Be sure to include at least Normal, Light, and Bold options when selecting your font styles.</p><p>Custom fonts do not work if you use an URL for a font file directly. It only works with a font definition file, such as those provided by web-font services.</p><p>Before adding the custom font to your site, you’ll want to add the domain of the web-font service to the Trusted Domains section on the Dashboard > Settings > Security page on your site. For example, if you are using Google Fonts, you would add <a href="https://fonts.google.com" rel="nofollow noreferrer ugc">https://fonts.google.com</a>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/QTEB8BZ2UMA4/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QTEB8BZ2UMA4/image.png" alt="image.png" height="180" width="869" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Next, you’ll add the custom font in the Style Guide Editor.</p><p>Navigate to the "Global Styles" section of the Theme UI. In the Font selector, select "Custom Font." </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/E1EZ4W5NZLOC/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/E1EZ4W5NZLOC/image.png" alt="image.png" height="690" width="2540" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Once you have selected Custom Font, two inputs will appear - <strong>Font URL</strong> & <strong>Font Name</strong>.</p><p>Copy the font definition URL provided by the web-font service into the Font URL text field. </p><p>Then, carefully input the desired font into the Font Name field. The spelling and wording must be exact for the font to work.</p><p>Your theme preview should update right away, showing you your custom font.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/ANSA7G8WKUIY/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ANSA7G8WKUIY/image.png" alt="image.png" height="1300" width="2836" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>