Applying a Custom Font - HL Vanilla Community
<main> <article class="userContent"> <p><em>Having trouble with your custom font? Check the </em><a href="https://success.vanillaforums.com/kb/articles/260-custom-font#troubleshooting" rel="nofollow noreferrer ugc"><em>troubleshooting section</em></a><em>.</em></p><h2 data-id="configuring-the-font">Configuring the font</h2><h3 data-id="set-body-font-family">Set Body font family</h3><p><code class="code codeInline" spellcheck="false" tabindex="0">global.fonts.families.body</code></p><p>This will apply globally, however it might still be possible to apply different font to some sections if we want to. E. g. <code class="code codeInline" spellcheck="false" tabindex="0">banner.title.font.family</code></p><p>Note that this is an array.</p><h3 data-id="set-font-sizes">Set Font Sizes</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">global.fonts.size.large global.fonts.size.medium global.fonts.size.small </pre><h3 data-id="set-font-weights">Set Font Weights</h3><p>If you load a custom font, you must make sure to load the desired font weights and set these variables accordingly if they do not match your font.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">global.fonts.weights.normal global.fonts.weights.semiBold global.fonts.weights.bold </pre><h2 data-id="custom-font-through-ui-vars%3A">Custom Font Through UI vars:</h2><p>The custom fonts through the UI are loaded differently. This is what happens under the hood. Note, however, the above configurations still apply, but it's loading the data a different way.</p><h3 data-id="force-google-font-(if-using-build-in-google-fonts)">Force Google Font (if using build in Google fonts)</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">global.fonts.googleFontFamily </pre><h3 data-id="font-family-name-(must-match-css-font-family-name)">Font Family Name (Must match CSS font family name)</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">global.fonts.customFont.name </pre><h3 data-id="font-url">Font Url</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">global.fonts.customFont.url </pre><p>Either its external url or your local <code class="code codeInline" spellcheck="false" tabindex="0">fonts.css</code> (with different fonts in it).</p><h3 data-id="white-listing-the-font's-hosted-domain">White listing the font's hosted domain</h3><p>For security reasons, the browser may block the custom font you set, because it comes from a third party. To ensure this doesn't happen, you should add the domain of your font URL to the trusted domains.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">ContentSecurityPolicy.ScriptSrc.AllowedDomains = ["www.example.com/myFont.css"] </pre><h3 data-id="fall-back-fonts-(options)">Fall back fonts (options)</h3><p>We already have good standard font family fallbacks set, but you can optionally set others.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">global.fonts.customFont.fallbacks </pre><h2 data-id="advanced-options">Advanced Options</h2><p>Often times, the line height of a font is much bigger than the font ascenders/descenders. This can make the top of texts seem off and not aligned with adjacent elements. The heading alignment is the most common problem, so we have some variables for that.</p><p><code class="code codeInline" spellcheck="false" tabindex="0">global.fonts.alignment.headings.capitalLetterRadio // What percentage of the line height does the font take (test with highest ascenders/decenders. Example text: "TgylyH" <- (has both ascenders and decenders)</code></p><p><code class="code codeInline" spellcheck="false" tabindex="0">global.fonts.alignment.headings.verticalOffset // If the font is not centered, use to adjust text vertically</code></p><p><code class="code codeInline" spellcheck="false" tabindex="0">global.fonts.alignment.headings.horizontalOffset // If the font is not aligned with the left edge of the container, use to adjust it</code></p><h2 data-id="troubleshooting">Troubleshooting</h2><h3 data-id="my-custom-font-isn't-loading">My Custom Font Isn't Loading</h3><p>There are a few things that could prevent your font from loading.</p><ol><li>Make sure the custom font name you are using matches the one in the <code class="code codeInline" spellcheck="false" tabindex="0">css</code> file you added.</li><li>You may be having an issue with CORs headers on the font you are loading. The server you load the font from <strong><em>must</em></strong><em> </em>set headers to allow access to your site's domain.</li></ol><p>You'll know you have a CORs error if you see something like this in your javascript console.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">Access to font at 'https://some-domain.com/path/to/font.ttf' from origin 'https://forum.mysite.com'has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. </pre><div class="js-embed embedResponsive" data-embedjson="{"body":"Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.","photoUrl":"https:\/\/developer.mozilla.org\/static\/img\/opengraph-logo.72382e605ce3.png","url":"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CORS","embedType":"link","name":"Cross-Origin Resource Sharing (CORS)"}"> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" rel="nofollow noreferrer ugc"> https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS </a> </div><p>Google Fonts allows any domains in their CORs policy so you should generally never see this message.</p><p>Services like Adobe TypeKit and Fontsquirrel generally have some user interface where you are required to whitelist a domain (or domains) for your font.</p><p>If you are hosting custom fonts yourself, see <a href="https://enable-cors.org/server.html" rel="nofollow noreferrer ugc">this guide for enabling CORs on your server</a>.</p><h2 data-id="legacy">Legacy </h2><p>In our first iteration of custom fonts, we used <code class="code codeInline" spellcheck="false" tabindex="0">customFontUrl</code>, which will be removed in a future iteration, so <strong>do not use</strong>. It's still here for compatibility until we refactor it out in a future update.</p> </article> </main>