Impactful typography thickens the website’s first impression. And therefore, it comes under vital consideration in the website’s design. Attractive fonts not only look good but level up the website’s readability. Unique typography and fonts used can also help in standing out in this crowded world. So, are you looking to add unique and custom typography fonts to your site? This article is a perfect guide you can use to prefer.
Visiting the same fonts and applying them seems outdated. You need something unique that alternatively turns out good for your site. Although, WordPress offers a good collection of font families to be added to your site. Still, we humans crave some unique. And so, we are going to help you learn how to add custom fonts to a WordPress website.
Converting fonts to a Web-Friendly format
Sometimes, your current web browser will not accept your chosen custom fonts. And in case, you have chosen the unacceptable fonts, you can convert them into a compatible format. Here’s how you can convert your custom fonts into compatible ones. But before converting, let’s find which types of font formats are there:
- The Open Type Fonts are the most commonly used and are compatible with all types of browsers.
- True Type Fonts are created by Microsoft and Apple. They are used for both Windows and macOS.
- Web Open Font Formats are recommended by the World Wide Web Consortium and are the broadly used font formats.
- The next format is WOFF 2.0 is a better version than WOFF 1.0 because of its compression abilities. This format works well with Chrome, Firefox, and Opera but does not work with Safari and Internet Explorer.
- The Embedded OpenType fonts are the embedded fonts on web pages. They seem to be adjustable with all browsers.
And, now the steps for converting the non-compatible fonts to compatible ones. We are going to use the Webfont Generator tool for this:
- Browse the Webfont Generator tool.
- Tap the Upload Fonts button and select the font you want to convert.
- Tick right the agreement box to state that the fonts are legally compatible with web embedding.
- Tap the Download your Kits button and save the .zip to archive it on your computer.
- In the archive section, you will find the WOFF and its 2.0 version along with the CSS files and the demo HTML page.
How to add Custom Fonts in WordPress?
Method 1: Adding Custom Fonts In WordPress Manually
This is the first method you can add custom fonts to your WordPress website. And that is by using your current theme’s CSS file. Firstly, you must upload the font on your WordPress Host account and then start editing the theme’s CSS file. Below is the perfect step guide for this:
- Get the font downloaded you wish to add to your device and extract the .zip archive.
- Next, upload the extracted font file to the wp-content, and then to the themes. In the Themes section, select your themes, and then in the fonts directory. It is advised to create a separate font file if you haven’t created one yet. As this will be easier to locate. And you can use the FTP client for this.
- After uploading the selected font file, go to the WordPress admin area.
- Select the Theme editor in the Appearance section and you will reach the style.css file. Now, come down to the page to add the below code:
- @font-face { font-family: Aguafina Script-Regular; src: URL(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }
- Here, AguafinaScript-Regular.ttf is the font option we wish to upload.
- Next, click the Upload File button to store the changes.
- Keep in mind that when the visitor enters your site, the Font face code will automatically load without applying to any element.
- To allow the fonts to display in specific places, go to the same editor with the style.css file. And if you want to apply the font on the title, copy this code:
.site-title {
font-family: “Aguafina Script-Regular”, Arial, sans-serif;
}This will finally place the font in the desired place. In Gutenberg WordPress Themes add the fonts manually
Method 2: Adding Custom Fonts in WordPress using Typekit
TypeKit by Adobe Fonts is one of the popular tools that can be used in adding custom fonts to your website. It comes with free and paid subscriptions that users can use to apply custom fonts. And let us watch some steps to add custom fonts to your website:
- Signup for the Adobe Fonts account and take your mouse to the “Browse Fonts” section. Here, you have to click on the “</>” button to choose the font and build a project.
- Next, this will show you the embed code with the project ID. and this will guide you on how to utilize the font in the theme’s CSS. Simply, copy that code and paste it on the header side of your website.
- And there are two ways you can add this code to your website. First, you can simply edit the theme’s header.php file and place the code before the <body> tag.
- The other way you can use the WP Code plugin. After getting the plugin, visit the code snippets and then the Header and Footer page.
- Place the embed code and the Header section and click to Save the changes.
- It's done. Now, you can use the Typekit font you have chosen earlier in the website’s stylesheet.
Method 3: Adding Custom Fonts in WordPress using Plugins
Adding custom fonts using plugins is by far the easiest method you can imply. For this, we are going to use the popular Google Fonts Typography plugin. Firstly, you need to get this plugin on your website by installing and activating it. And, then follow the steps to add custom fonts:
- After installing the plugin, you will be directed to enter your email address to proceed further.
- Next, tap the Fonts plugin and then on the Customize Fonts in the sidebar. This will redirect you to the WordPress Theme Customizer by opening the Fonts Plugin section.
- Here, you are supposed to choose from the default fonts in the Basic settings. Also, there are Advanced Settings having fonts for particular parts of the site.
- In the Basic settings, you can select fonts for your content, headings, buttons and other fields. By clicking the dropdown menu, you will find other font family options. The dropdown list will have the default font at the top, the system fonts at the highlights and then the variety of 1000 fonts. By clicking on the font, you will see a preview of how it will appear.
- After this, you can customize the advanced settings to innovate the font selections. Click the “<” back button and switch to the Advanced settings section. Here, you will find extraordinary settings for adding fonts on different sections of your site. You can set the custom fonts on the site title, navigation menus, sidebar and footer.
- Likewise, you can select the Content section and you can easily select the font from the dropdown list. Thus, by clicking on any section, you can choose to add the font.
- After making all the changes, click the Publish button to save the changes.
Here are some more plugins you can use to add Custom fonts to a WordPress website:
WP Google Fonts
This is one of the popular plugins for adding custom fonts to your website. It lets you use custom fonts by adding them to the CSS elements. You can simply install the plugin and open the Google Font Control Panel through the dashboard. It lets you select the desired font and update the settings as required.
Easy Google Fonts
This easy-to-use Easy Google Fonts plugin lets you add custom Google fonts with real-time changes.
After downloading the plugin, you can easily organize the settings by visiting Google Fonts under the settings tab. Also, you can tweak the theme’s typography by using the customizer. Simply enter the WordPress customizer by visiting the Customize button under the Appearance tab. Start doing changes as required by managing the places where you want to place the fonts.
Conclusion
So, have you learned well about how to add Custom fonts to a WordPress website? If not, then start reading the above content as you will be fully satisfied with this. We have made it easier to learn how to add custom fonts with three simple methods:
- Method 1 is to add custom fonts manually through the theme’s CSS file.
- The next method is to add custom fonts using the Typekit tool which is a simple method.
- The third method is again a simpler one by using plugins. Also, we have listed more plugins that will help you add custom fonts to your website.
So, start including custom fonts on your website for an enhanced and advanced look.
