So you’ve got an amazing custom font for your new Showit website. It totally fits with your branding and you’re loving it. But how do you add a custom font to Showit? Well, it’s actually super easy.
Before you start, make sure that you have the proper license to use the font on your website. You should be able to find the license details from where you purchased it, like creativemarket.com. If not don’t be afraid to send the creator an email asking if you are able to use the font on your website. Once you have all this in order you’re ready to begin adding your custom font.
Create a webfont file
To use your custom font on your Showit website you’ll need a .WOFF font file. Here’s an easy step-by-step instruction for creating your .WOFF font file.
Go on over to the Fontsquirrel Webfont Generator. Click “upload fonts” and find the folder where your font files are located. Select either the .OTF or .TTF file to upload. Verify that you can legally convert the file by checking the confirmation. The program will then provide you with a zip folder that contains a .WOFF and .WOFF2 file type.
Upload the Webfont to Showit
Next step is to unzip that folder. Inside Showit click the Media Library in the top left. Then upload the .WOFF file into your media library just as you would upload an image.
Adding the Custom Font to Your Design Settings
Open your Design Settings at the top left and click the “font” tab. Under the “custom fonts” section you will see a dropdown menu – “Library WOFF”. Click the dropdown arrow and you will find your uploaded file there. Select the font, give it a name, and click “Add Custom Font”. It will then populate in your “Selected Fonts”. Make sure you click “save” at the bottom right and that font is now loaded into your font library.
Set the Custom Font as a “Type Style”
To use your custom font consistently throughout your website as a heading or title, you’ll want to set it as a Type Style. Within your Design Settings and under the “Site Style” tab, you’ll see “Type Style”. Click the 3 dots next to whichever item you want to set it as, like “Title” or “Heading”. Click the font dropdown menu and select the custom font. This will make your custom font standard across your site. You may need to adjust other settings as well such as sizing, spacing, etc. and then follow through on the mobile type styles to make sure it’s cohesive.
I hope this helps you with getting your custom fonts uploaded to your Showit website. It’s just one way of being consistent with your branding!
Ready to for your new Showit website?
Email me at firstname.lastname@example.org or visit my website at openbookdesignco.com to reserve a spot in my calendar for your new Semi-Custom Showit Website!