Want to add custom fonts to WordPress? Custom fonts allow you to use a beautiful combination of different fonts on your website to improve typography and user experience. In addition to being aesthetically pleasing, custom fonts can help you improve readability, create brand identity and increase the amount of time users spend on your WordPress site.
In this article, you will be shown how to use the Google Fonts,TypeKit cap (a poem) CSS3 @Font-Face method to add custom fonts in WordPress.
Adding Custom Fonts in WordPress
Attention:Loading too many fonts may slow down your website. We recommend choosing two fonts and using them on your site. We will also show you how to load them correctly without slowing down your site.
Before we get into how to add custom fonts to WordPress, let's look at how to find custom fonts that you can use.
How to Find Custom Fonts Used in WordPress
There are many places to find great free web fonts these days, such as Google Fonts, Typekit, FontSquirrel and fonts.com.
Adding Custom Fonts to WordPress from Google Fonts
Google Fonts is the largest, free and most commonly used font library among web developers. There are many ways to add and use Google Fonts in WordPress.
Method 1: Add Google Fonts with WordPress Plugin
If you want to add and use Google Fonts on your website, then this method is the easiest way and recommended for beginners.
- Installation of plug-ins::
- Installation and activation Google Fonts Typography Plug-ins.
- Configuring Plug-ins::
- Once activated, enter your email address to receive the official Quick Start Guide. Then, click Font Plugins → Customize Fonts in the admin sidebar. This will automatically take you to the WordPress Theme Customizer and open the new "Font plug-ins"Part.
- Selecting Fonts::
- In the Basic Settings section, select the default fonts for the site and under Advanced Settings, select fonts for specific parts of the site.
- Use the "Font Family" drop-down menu to select a new font. The preview will automatically change to show the font effect.
- Posting Changes::
- When you are satisfied with your custom font choices, click "post" button to store your changes.
Method 2: Add Google Fonts Manually in WordPress
This method requires code to be added to the WordPress theme file.
- Selecting Fonts::
- Visit the Google Fonts library and select the font you want to use. Click the "Quick Use" button below the font, select the style you want to use and copy the embed code.
- Add Code::
- Edit the theme of the
header.phpfile and paste the code into the<body>Before labeling, or using the WPCode plugin, paste the embedded code into the "Header" box and click "Save Changes".
- Edit the theme of the
- Using Fonts::
- Use this font in the theme's stylesheet, for example:
.site-title { font-family: 'Open Sans', Arial, sans-serif; }Adding Custom Fonts to WordPress with Typekit
Typekit by Adobe Fonts is another free, high-quality resource that offers great fonts to use in your design projects.
- register an account::
- Register for an Adobe Fonts account and access the Browse Fonts section. Select the font and create a project, copying the embed code with the project ID.
- Add Code::
- Edit the theme of the
header.phpfile and paste the code into the<body>Before labeling, or using the WPCode plugin, paste the embedded code into the "Header" box and click "Save Changes".
- Edit the theme of the
- Using Fonts::
- Use the selected Typekit font in the theme stylesheet, for example:
.site-title { font-family: 'gilbert', sans-serif; }Adding Custom Fonts to WordPress with CSS @font-face
The most straightforward way to add custom fonts to WordPress is to add the font @font-face using the CSS method.This method allows you to use any font you like on your website.
- Download Fonts::
- Download your favorite fonts in web format. If you don't have a suitable web format, you can use the FontSquirrel Webfont Generator to convert it.
- Upload Fonts::
- Upload the fonts to the WordPress hosting server, the recommended location is the new "fonts" folder in the theme or child theme directory.
- Loading Fonts::
- Use the CSS @font-face rule to load fonts into the theme's stylesheet, for example:
@font-face { font-family: 'Arvo'; src: url('http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf'); font- weight: normal; }- Using Fonts::
- Use this font anywhere in the theme stylesheet, for example:
.site-title { font-family: 'Arvo', Arial, sans-serif; }Loading fonts directly using CSS @font-face is not always the best solution. For example, if you use the Google Fonts maybe Typekit fonts, then it is best to serve the fonts directly from their servers for optimal performance.
reach a verdict
Adding custom fonts can dramatically improve the visual appearance and user experience of your WordPress site. Fonts can be easily personalized using Google Fonts, Typekit and CSS@font-face methods.
