In this article, you'll learn two methods to implement custom fonts in a s theme.
Method A: Self-hosting fonts
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.
There are services out there that do this for you, like Font Squirrel, though they might block a font from being uploaded if it's not a free font. You should check the license of your font before using it in your community, or you may get a message like this:
ITC has requested that their font ITC Lubalin Graph Std Bold be blacklisted by the
Generator. You will not be able to convert this font.
For this example, we'll use Font Squirrel's generator.
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.
2. Merge the CSS files and fonts-generated folder.
3. Host the ".woff" and ".woff2" files somewhere.
4. You'll need the URL to modify the CSS file. Open the "stylesheet.css" file. Here's what I got from the generator:
@font-face {
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; }
5. You can change the font-family to the name you want.
6. The URL for the sources will need to be changed to point to the server hosting your fonts.
7. The generator will not know what the font-weight and font-style 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.
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 Apply the fonts section below to learn how.
Method B: Use a service
There are many services that provide access to hundreds of fonts. For example:
- Typekit
- Fonts.com
- Google Fonts
Each of these services will give you instructions on how to chose and load their fonts.
⭐️ EXAMPLE: With Google Fonts, you'll pick your fonts and receive a code to include in your theme.
Apply the fonts
Next, you'll need to set the font-family in your theme.
📝 NOTE: 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.
- If you used Method A, you'll want to use the name you specified in the CSS for the
font-family. You can just replace the name below. - If you used Method B, you'll be given a snippet of code like this:
font-family: 'Open Sans', sans-serif;
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:
body {
font-family: Lato, Helvetica, Arial, sans-serif; ...
}
In your theme, you'd write:
body {
font-family: 'Open Sans', sans-serif; ...
}