Use Custom Fonts in Legacy Themes - Vanilla Success
<main> <article class="userContent"> <p>In this article, you'll learn two methods to implement <strong>custom fonts</strong> in a <strong>legacy theme</strong>. </p><h2 data-id="method-a%3A-self-hosting-fonts"><strong>Method A: Self-hosting fonts </strong></h2><p>If you're self-hosting your fonts, you'll need to convert them to multiple formats. While two can suffice, adding all formats will ensure it can be used by a larger percentage of your users. </p><p>There are services out there that do this for you, like <em>Font Squirrel</em>, though they might block a font from being uploaded <em>if it's not a free font</em>. You should check the license of your font before using it in your community, or you may get a message like this: </p><div class="blockquote"><div class="blockquote-content"><p class="blockquote-line"><em> ITC has requested that their font ITC Lubalin Graph Std Bold be blacklisted by the</em></p><p class="blockquote-line"><em>Generator. You will not be able to convert this font.</em></p></div></div><p>For this example, we'll use Font Squirrel's generator. </p><p>1. Upload your font and download the "kit" (this may take a while). You may also need to do multiple batches for different font weights, since there's a limit to the amount you can upload at a time. </p><p>2. Merge the CSS files and fonts-generated folder. </p><p>3. Host the ".woff" and ".woff2" files somewhere. </p><p>4. You'll need the URL to modify the CSS file. Open the "stylesheet.css" file. Here's what I got from the generator: </p><p>@font-face { </p><pre class="code codeBlock" spellcheck="false" tabindex="0"> font-family: 'source_sans_problack'; src: url('sourcesanspro-black-webfont.woff2') format('woff2'), url('sourcesanspro-black-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } </pre><p>5. You can change the <code class="code codeInline" spellcheck="false" tabindex="0">font-family</code> to the name you want. </p><p>6. The URL for the sources will need to be changed to point to the server hosting your fonts.</p><p>7. The generator will not know what the <code class="code codeInline" spellcheck="false" tabindex="0">font-weight</code> and <code class="code codeInline" spellcheck="false" tabindex="0">font-style</code> of your font is, so you should set them. In our example, it's a "black" font, so we should set the weight to 800 or 900. It's a normal font-style, so you can leave it to normal. This is where you'd specify if it was italic. </p><p>8. You're now ready to add this bit of CSS to your theme. This will load the font in your site, but will not apply it. Refer to the <strong>Apply the fonts</strong> section below to learn how. </p><h2 data-id="method-b%3A-use-a-service"><strong>Method B: Use a service </strong></h2><p>There are many services that provide access to hundreds of fonts. For example:</p><ul><li>Typekit</li><li>Fonts.com</li><li>Google Fonts </li></ul><p>Each of these services will give you instructions on how to chose and load their fonts. </p><p><strong>⭐️ EXAMPLE</strong>: With Google Fonts, you'll pick your fonts and receive a code to include in your theme.</p><h2 data-id="apply-the-fonts"><strong>Apply the fonts </strong></h2><p>Next, you'll need to set the <code class="code codeInline" spellcheck="false" tabindex="0">font-family</code> in your theme. </p><p><strong>📝 NOTE</strong>: Each theme is different, so you should inspect it to figure out where the font styles are applied. You may have more than one style to overwrite. </p><ul><li>If you used <strong>Method A</strong>, you'll want to use the name you specified in the CSS for the <code class="code codeInline" spellcheck="false" tabindex="0">font-family</code>. You can just replace the name below. </li><li>If you used <strong>Method B</strong>, you'll be given a snippet of code like this: </li></ul><pre class="code codeBlock" spellcheck="false" tabindex="0"> font-family: 'Open Sans', sans-serif; </pre><p>If you don't know what/where fonts are specified in your theme, inspect the text you want to change, then switch over to the "computed" tab in your Chrome developer tools and look for "font-family." You can click the arrow to jump to the style declaration. That's the style you want to overwrite. For example, if we inspect the style of Deflector, you'll see the style is set on the tag: </p><p>body { </p><pre class="code codeBlock" spellcheck="false" tabindex="0"> font-family: Lato, Helvetica, Arial, sans-serif; ... </pre><p>} </p><p>In your theme, you'd write: </p><p>body { </p><pre class="code codeBlock" spellcheck="false" tabindex="0"> font-family: 'Open Sans', sans-serif; ... </pre><p>} </p> </article> </main>