Learn How to add custom fonts to wordpress theme and find the best custom fonts for your WordPress site. How to find the best free and premium fonts.
Custom fonts will allow a user to make their website to improve typography and user experience. Moreover, custom fonts increase readability, and create brand image and time spent by the user on your website. In this article, you will learn How to add custom fonts to a WordPress theme.
Vister will love blogs and sites that have good fonts in them. So, Custom fonts not only decorate your site but attract people to your content. Therefore, You can add Customs fonts to your site manually or with a plugin.
Table of Contents
Why use fonts in WordPress?
As we can see, there are many websites where you can search and download any fonts. In addition, many WordPress theme come with already built-in fonts. While using fonts, if you cannot find the best fonts, you can use alternate fonts on your site.
Using fonts in WordPress will give you the advantage of making your site user-friendly and improving typography. Improvement in typography will increase user experience and make website information relevant.
How to Add Custom Fonts to WordPress Theme on Your Site using code ?
Adding custom fonts on your site using code is easier than it looks. moreover, you need to have knowledge of some basic web development. Follow these steps to add a font to your site.
Add a WordPress Custom font on your site using the CSS panel
1. First, Download your custom font from a trusted site.
2. Make a folder on your computer and add web-ready fonts inside.
3. Now, import your fonts into your WordPress theme.
As an example below:
@font-face {
font-family: 'Your Custom Font';
src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/webfont.woff') format('woff'), /* Modern Browsers */
url('fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
How to Add Custom Fonts in WordPress using plugin?
Fonts Plugin
It’s an alternative freemium of Easy Google Fonts, which works in a similar way. Moreover, this plugin will help to smooth add google fonts to your website. It does not affect your theme while changing the font.
When you install the fonts plugin from the WordPress Plugin directory. In addition, You can easily access the google font control panel directly on your dashboard.
Fonts Plugin will help to allow you to try many fonts before publishing the font. In addition, it has adobe fonts integration which is helpful for every user.
WP Google Fonts
Wp Google Fonts has custom fonts feature and apply CSS elements using this plugin. Moreover, users can install WP Google Fonts and have direct access to their dashboard.
Users can adjust options like font style, allocated elements, and more. In addition, users can choose typefaces.
How to add google fonts in WordPress?
Using Easy Google Fonts
Using this plugin, you can add custom fonts to your website. Therefore, this is the best and recommended method for beginners.
At first, the user needs to install and activate the Easy Google Fonts plugin. Here is a step-by-step guide to installing an easy google fonts plugin and adding your custom fonts.
After activation, the user can go to Appearance>>Customizer. Moreover, it will open a live theme customizer interface. There you will see the typography section.
After clicking on Typography, a different section opens where users can apply google fonts and other custom fonts. In addition, click on ‘Edit Font’ and edit your font as you like.
Now, you can choose your Google Font on your website. Font style, font size, padding, margin, and more like this you can edit on your WordPress website.
Manually Add Google Fonts in WordPress
In this method, the user needs to have knowledge of code and how to use them. In another word, you need to add code to the WordPress theme files.
First, you need to visit the Google fonts library and choose your font from google official font. Further, click on the font below button.
Now, you can see the styles available for the font on the front page. As a result, select the style and use it on your website. Then click on the sidebar button at the top.
After that, you can see the ‘Embed’ tab in the sidebar with embed code. Now, take the code in the theme’s header.php file and paste the code before the tag.
How to Disable Google Fonts in WordPress?
We know that google fonts help to improve the typography of your site. But, on the other hand, it increases dependency on your site and increases page load times.
Many WordPress themes come with a built-in plugin that already has loads of google fonts, even if you don’t need them on your site.
Now, you will learn how to disable google fonts in WordPress.
By Using a Plugin
By using Disable and Remove Google Fonts, users can remove all the things from Google fonts from their website.
Using a plugin is a simple way to remove all requests to google fonts by just activating it. Therefore, it will save time for the user and easier to disable google fonts on the WordPress website.
Disabling Google Fonts Manually
Users can disable Google fonts not only by a plugin but by using some code in your site.
First, open the source of your website and look for ‘Fonts.Google.Com. After that, you can find a line of code.
This is the google-fonts-CSS. Here ID is the important part.
<link rel='stylesheet' id='google-fonts-roboto-css' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css' media='all' />
After you have the ID, You can add this code to your theme’s functions.php file.
function remove_google_fonts_stylesheet() {
wp_dequeue_style( 'google-fonts-roboto' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts_stylesheet', 999 );
Now, you have disabled google fonts in your WordPress website.
Wrap Up
The first thing user will notice on your website is the font. So, during the selection of fonts users need to take good care and choose a good font for your website. Moreover, make sure you are not using more than two fonts on the same site. The more fonts you use, the slower the site speed.
finally, If you want to learn about more features of WordPress then you can follow this link: How to Add HTTP Security Headers in WordPress?. We have a list of articles to increase your knowledge of WordPress.