ChatGPT
Claude
Perplexity
GeminiTypography is as impactful as design elements like images, videos, and graphics. It improves the readability of your content and makes your site stand out from your competitors. WordPress offers a variety of font options to choose from, but you might be considering using your custom fonts on your website. After all, it’s one way to make your brand image more unique and presentable to your visitors.
Well, you’ve come to the right place! In this article, you’ll learn what custom fonts are, where to find them, and how to add them to your WordPress site.
What are custom fonts?
Using WordPress as a reference in this article, we will define custom fonts as any typeface that isn’t in the content management system (CMS). Several fonts are available online, and you will find many aesthetic font designs. But remember that choosing the right font isn’t all about its appearance. You need to ensure that your custom font:
- Is easy to read
- Looks good on any font size (for web and mobile)
- Reflects your brand identity
- Fits your website design
A good balance between aesthetics and the above criteria in choosing your custom font will help you express your brand style.
Where can you find custom fonts?
Hundreds of pages will appear in your Google results when you search for “free fonts,” but it’ll be hard to find a good one with these many options. Save your time and check this list of some of the best sources of custom fonts:
- Google Fonts. Choose from over 900 free, open-source designer fonts available in over 135 languages, compatible with any web design project.
- Adobe Fonts (Previously known as Typekit). Find thousands of fonts licensed for personal and commercial use available when you subscribe to the Adobe Creative Cloud package.
- Font Squirrel. Browse through a library of free and premium, commercially licensed, high-quality fonts and select the one that best suits your brand style.
Now that you know where to find the best font options, let’s see how you can add your chosen custom font to your WordPress site.
How to add custom fonts to your WordPress site
You can add custom fonts to your WordPress site in many ways. Check the following options and see which one best works for you.
Step 1. Edit your theme’s file
- Open any font page and click on “Select This Font.” If you use Google Fonts, it should look like this:
- A new menu will appear, including two snippets. Copy the one that looks like this:
- Place the snippet within the <head> tags of your child theme’s header.php file, which you can find in the public_html/wp-content/themes directory.
- Open the child theme’s stylesheet to specify to which elements the new font will apply. The code should look like this:
Note: The child theme’s stylesheet and its header.php file must be within the same directory so you can do the tasks in one place and implement new fonts directly.
To add custom fonts to your WordPress site, you will need to complete the following steps:
Find and download the custom font you want to use on your website. Make sure you have the correct file type (such as .ttf or .woff) and that you have permission to use the font on your website.
Log in to your WordPress dashboard and go to Appearance > Editor.
In the Editor, open the style.css file by clicking on it in the right sidebar.
At the top of the style.css file, add the following code to import the custom font:
View code here:
@font-face {
font-family: ‘YourFontName’;
src: url(‘fonts/YourFontName.ttf’) format(‘truetype’);
}
Replace ‘YourFontName’ with the actual name of your custom font, and make sure the url points to the correct location of your font file.
Next, you’ll need to apply the custom font to specific elements on your website. You can do this by setting the font-family property for different CSS selectors. For example, to apply the custom font to all headings on your website, you can add the following code to your style.css file:
h1, h2, h3, h4, h5, h6 {
font-family: ‘YourFontName’;
}
Save the changes you made to the style.css file, and then refresh your website to see the custom font in action.
If your theme has a option to upload custom font. You can directly upload your font to the theme and use it. This is the easiest way.
Note: Some themes may have their own options for custom fonts, so you should check your theme’s documentation to see if this is the case.
Step 2. Upload fonts
- Create a font folder using your trusty FTP client.
- Upload your font file to the new folder.
- Open your child theme’s stylesheet and enter the snippet that looks like this:
- Keep the stylesheet open and configure which elements will use the new font. Here’s an example:
Manually upload the fonts: You can manually upload the font files to your server and then use CSS to apply the custom font to your website.
First, you will need to access your website’s file manager or FTP client.
Navigate to the “wp-content/themes/your-theme-name” folder.
Create a new folder called “fonts” and upload the custom font files to that folder.
Then you can use the following CSS code to link to the font files and apply the custom font to specific elements on your website:
View code here:
@font-face {
font-family: ‘YourFontName’;
src: url(‘wp-content/themes/your-theme-name/fonts/YourFontName.ttf’) format(‘truetype’);
}
Some themes have their own options for custom fonts. You should check your theme’s documentation or options panel to see if this is the case.
Note: Before uploading the custom fonts, make sure you have the correct file type (such as .ttf or .woff) and that you have permission to use the font on your website.
Step 3. Install a plugin
- Install a font plugin (Google Fonts Typography plugin or Custom Fonts).
- Go to your dashboard to upload fonts to your website.
- Use the WordPress Customiser to select the elements where you want to implement the new fonts.
Now that you know where to find the custom fonts and how to add them to your WordPress site, you’re ready to take the next step. Select the most convenient way for you, and transform your website with a fresh look on your typography.
