Deciding to add custom fonts to your website is a fantastic way to add personality and branding to your site. In this post, we will show you how to add custom fonts using WordPress, Squarespace, and Showit. We will also provide some tips on choosing the right font for your website. Let’s get started!

Step 1: Choose a Font

When it comes to a business website, you have to use commercial fonts, and one of the best places to find commercial use web fonts is Creative Market. When it comes to custom fonts, they are better used with headings and accents, not as your primary text font. The reasoning behind that is that if every piece of text on your page is a custom font, your page speed can suffer.

For your paragraph text font, you’ll want to stick to a traditional font or a Google font, such as Open Sans, Arial, or Merriweather.

Step Two: Download the Font

A web font needs to be saved in WOFF or WOFF2 format to be embedded into your website. Make sure you save all of the font formats available to you via your font purchase, and we’ll upload them all according to your website platform.

Step Three: Add the Font to Your Website

The next step is to upload and add the custom font to your website. Depending on your website builder or platform, there are a couple of ways to do this.

How to Add a Custom Font in WordPress

Adding a custom font in WordPress is a straightforward process.

If you are using a website page builder, such as Elementor or Beaver Builder, they have the custom font upload option built-in for their pro versions.

Alternatively, you can also use a separate WordPress plug-in to upload your custom font, such as WP Google Fonts, Easy Google Fonts, Use Any Font, or Custom Fonts.

How to Add a Custom Font in Showit

Showit users can add a custom font to their website by following the steps below.

• In your Showit account, go to the Design Studio and choose “Fonts” from the left-hand menu.
• Click on “Add Fonts” in the top right-hand corner
• Upload your web font files

How to Add a Custom Font in Squarespace

Squarespace users can add custom fonts to their website by following the steps below.

• Go to “Design” and then click on “Custom CSS”
• Click “Manage Custom Files”
• Click “Add Images or Fonts” and select your font file to upload

With Squarespace, you need to create some custom CSS to use your new font on your website. Here is a super handy tutorial to help you get your fonts working after uploading with some CSS.

Final Thoughts

Adding custom fonts to your website is a fantastic way to add personality and branding to your site. Just be sure to use them sparingly and only for headings or accents, not as your primary text font. When choosing the right font, do some research and try out a few different options before settling on one.