Fonts play a big role in shaping the personality of your website. A custom font can set the tone for your brand, increase readability, and make your website stand out. While WordPress offers a variety of default fonts, adding your own fonts can take it to the next level.
In this post, I am going to show you how you can add custom fonts to your WordPress site without touching a single line of code. After reading the post, you will be able to set a custom font on your website.
Let’s start.
Adding Custom Fonts in WordPress
From WordPress 6.7, you can add custom fonts to your website using the editor. Now, you don’t need to take the help of any external plugin or write codes.
Step 1: Open Styles
From your WordPress dashboard, navigate to Appearance -> Editor.
Click on ‘Styles’.
From here, click on the ‘Edit Styles’ button.
Step 2: Edit Typography
From the right side, click on the ‘Typography.’
Now, you can see every option that you need to customize your typography in WordPress.
Step 3: Install a Custom Font
If you want to install your custom font, click the ‘Manage Fonts’ button.
If you have downloaded or have the font in your computer, then upload it with the ‘Upload’ tab.
Just drag the font file here, or click on the ‘Upload font’ and then upload the font. It supports .ttf, .ott, .woff, and .woff2 formats.
Installing Fonts from Google Fonts: If you like to install fonts from Google Fonts, then click on the ‘Install Fonts’ tab and press ‘Allow access to Google Fonts’.
Now, all the Google fonts are in front of you. Search for any fonts or hit the next page and choose your font.
When you find it, choose the variant and click on the Install button.
After the installation is complete, the installed font will be available in your font library.
Step 4: Applying Custom Font
Now, get back to the typography settings.
Click on any elements on which you want to apply a custom font. I am applying a custom font on Heading.
From the ‘Font’ option, choose your installed custom font.
You can also change appearance, line height, letter spacing, and letter case. If you like to change the font for all the headings then choose ‘All’, else choose a specific font, and then customize.
In this way, you can apply custom font to any element.
Additionally, if you like to adjust font size presets, then you can do it from the ‘Font sizes’.
Adjust any font size you want, or create a custom font size preset by clicking on the custom button.
Last Words
In summary, custom fonts are a simple yet effective way to make your WordPress site stand out. Follow the methods presented in this guide to easily customize your typography to reflect your brand’s style.
If you like the post, then please share it with your friends, and don’t forget to leave your thoughts in the comment box below.
Leave a Reply