There are countless ways to make your WordPress site look more visually pleasing. One of them is to add custom fonts.
However, the choice of WordPress ones may be limited and depend on the theme. In this article, you will learn how to add fonts to WordPress both manually and through plugins.
Where can you download fonts for WordPress?
There are a wide variety of websites that you can choose from. it is one of the most popular options and you can find free fonts to use in your commercial projects. is another of the most popular options, where you will find a large number of fonts made by Google to be used in more than 135 languages. is another free alternative made by the Adobe team. There are also other alternatives like and .
Convert the fonts to a web-friendly format
Once you’ve found the font you want to use on your website, it’s time to review its formatting. It is worth mentioning that not all font types are supported by web browsers. But you don’t have to worry, even the formats that are not supported can be converted to a format that is compatible.
Before we start converting fonts from one format to another, you need to know what the different types of formats are:
- Open Type Fonts
Font type that is abbreviated as OTF, are those that are commonly used on websites and is a type registered by Microsoft. They work perfectly in most browsers. - True Type Fonts
Abbreviated as TTF, they are a typeface developed by Microsoft and Apple in the 1980s and were widely used by both companies’ operating systems. Also most browsers support them. - Web Open Font Format
Abbreviated as WOFF, this typeface is widely used on web pages and is the typeface recommended by the W3C. They are supported by most browsers, so there should be no problem. - WOFF 2.0
It can be said that WOFF 2.0 sources are bordering on WOFF 1.0 because it has better compression ability. It is not supported by browsers like Internet Explorer or Safari, but they have no problem with Chrome, Firefox or Opera. - Embedded Open Type Fonts
These are compact OTF fonts that are used as fonts for embedding on websites. Most of the available browsers support them.
In case you are not sure if the font you want to use is compatible or not, you can use , a tool that allows you to convert most fonts to a web-friendly format. It works very simple:
- Enter your .
- Now press the ‘Upload Fonts’ button to open the file browser and you can select the font(s) you want to convert to a web-friendly format.
- Before you can continue you have to accept the agreement”agreement” by selecting the checkbox indicating that you are uploading a legal source.
- Now press the button ‘Download‘ which should have appeared. Select in which folder on your computer you want to save the .zip file with the sources and save it.
- Inside the downloaded file you will find your fonts in WOFF and WOFF 2.0 formats along with their CSS files and an HTML demo page. These formats are accepted by most browsers.
What do you need to use them in WordPress?
- Access to your WordPress admin area.
- Access to the control panel of your Hosting or an FTP client.
1.- Add custom fonts to WordPress using plugins
Plugins are the easiest way to add fonts to WordPress. Here are some of the most popular plugins:
WPGoogle Fonts
is the best way to add custom fonts to your WordPress. This plugin automatically includes to your site code what is necessary to start using all its sources.
All you have to do is install the plugin from the WordPress plugin directory. then go to Google Font Control Panel and select the changes you want to make to your fonts.
Typekit Fonts for WordPress
If you want to add fonts to your WordPress, this plugin is your best option. You just have to sign up on the Typekit page and create your own font kit. If you have doubts and want to see a complete instruction on how to use the plugin, you can enter .
Once you have signed up and created your kit, you are ready to use the WordPress plugin. To configure it you just have to go to ‘Settings’ > Typekit Fonts and paste the embed code of your kit. This plugin will automatically load the fonts that are added in your kit.
Use Any Fonts
is another of the most used plugins to add a wide variety of custom fonts to your WordPress site. Like the others in this tutorial, you can install it from the official WordPress plugin directory. Once you are done with the installation, go to the Use Any Fonts section in the admin menu, create a API key and press the button ‘Check’ (Verify).
When you are done with verification, the plugin will allow you to assign custom fonts.
2.- Add fonts to WordPress manually
If you don’t want to install any plugin on your site and prefer to do everything manually, you can also do it in a very simple way: you have to upload the fonts to your hosting and edit the CSS file of your theme.
Here are the instructions to do it:
- Have the font downloaded on your computer. Don’t forget to have it in web-friendly format.
- If the font was downloaded in a .zip file you must unzip the file.
- Now you have to upload your source using an FTP client or the File Manager of your hosting. Fonts must be uploaded to the following address: wp-content/themes/your-theme/fonts. If there is no folder called ‘fonts’ in your theme, just create it.
- Once you have uploaded the source you have to go to your WordPress admin area go to Appearance > Edit. There you have to select the file style.css. Scroll to the end of the code in that file and add the following code (don’t forget to change the values font-family Y URL to stay with your source):
@font-face { font-family: Aquafine Script-Regular; src: url(http://-tutorials.com/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }
- After adding the code at the end of the file press the button ‘Update files’ (Update File) for the changes to be saved.
The font-face code loads the fonts every time a visitor comes to your website. However, the font is still not applied to the elements. So for now you won’t see any change. In order to assign a specific font to an element, you need to edit the style.css file. For example, the code to apply the Aguafina Script font to the title of our page is:
.site-title { font-family: “Aquafina Script-Regular”, Arial, sans-serif; }
Hopefully this tutorial has helped you to use custom fonts on your WordPress site.
Conclusion
Now you have a wide variety of sites where you can download fonts, customize your WordPress without problems
Deyi is a digital marketing enthusiast, with a background in web design, content creation, copywriting, and SEO. She is part of ‘s SEO & Localization team. In her free time, she likes to develop projects, read a book or watch a good movie.
Facebook Comments
Disqus