How to Add Custom Fonts to WordPress : A Beginner Friendly Guide
Today’s Beautiful Themes topic of discussion tackles probably one of the most important aspects of Typography: WordPress fonts. If you’re running a blog or a discussion channel your text and how it fits with your content matters a lot. But if you’re using a custom theme or perhaps a free theme, you’re very limited with the number of fonts you can use if you do not want to depend on items such as Google fonts. So instead, let’s consider the subject this article exists to teach you about: How to add custom fonts to WordPress.
A wide range of fonts is available on the WordPress market. Google fonts and Typekit are generally considered an invaluable element to integrate with pretty much every WordPress theme that focuses on typography and textual content. But let’s consider the situation where the proper style or modification that might suit your website isn’t available on them. There’s also the fact that loading too many fonts on a single website might take a hit on its speed.
A WordPress custom font lets you choose the most fitting font you can imagine with an impressive style that isn’t necessarily a part of Google fonts or any major text management plugin. However, enabling them can be a different beast to tame. So let’s take a look at how we can implement our WordPress fonts.
How to add custom fonts to WordPress By using CSS3 font_face
This is a more direct and native way to enable custom fonts on your WordPress website. First, you need to download your font, preferably in the OTF or TTF format. Some of the websites you can check out for this purpose are:
Once you have your file, the next step requires you to upload your font file onto your server, preferably the one your WordPress installation is on. You can use FTP for this purpose and it can be achieved by using Filezilla as we will demonstrate.
Simply create a folder named fonts inside your theme or its child theme’s directory. Then copy the required font inside this folder.
You don’t necessarily have to upload this into this exact folder as it is more important to just have your font uploaded on your server but it is more efficient and manageable to have it on your theme files. Next, copy the URL of the file that you just uploaded which should be along the lines of ‘www.website_name.com/wp-content/themes/theme_name/fonts/file_name.ttf’
Now we need to enable a CSS3 @font-face rule in your theme stylesheet. For this purpose, open your WordPress admin dashboard and hover over Appearance to click on Editor. By default, WordPress should open your theme’s stylesheet but if that is not the case, simply click on the rightmost column’s Stylesheet listing.
Once you have your spreadsheet ready, go ahead and copy this set of commands on the style sheet:
@font-face
{ font-family: Font_name;
src: url(upload_url);
font-weight: normal; }
Here, insert your font-family in the Font_name section and the uploaded URL of your theme file on your server in the src: URL section.
Next, in order to use the font, we need to add some codes to reference this font style for a specified purpose. For example, if you want the font to be used for paragraphs only, we add the code
p { font-family: ‘font_name’ }
For headers, we’d use
h1 { font_family : ‘font_name’ }
Once you add the code, click on Update file to make your new font settings go live.
Using other HTML tags and CSS3 font rules, we can enable the font on various other elements as well such as various headings, paragraphs, listings and more.
How to add custom fonts to WordPress using WordPress plugins
We can also enable amazing WordPress custom fonts and various style designs various dedicated WordPress plugins available on the markets. Most of these plugins use highly compatible font text formats which ensure that your font appears the way you want on any kind of platform. Furthermore, these plugins can be quite easy to use and provide a myriad of customizations to your themes.
Arguably, these plugins are easier to enable than using CSS3 font rules so we recommend using this approach for their custom WordPress fonts.
Here’s a list of WordPress plugins we’ve checked out and highly recommend:
1. Custom Font Uploader:
Custom font uploader is a WordPress plugin to allow you to upload custom fonts on your website and use it in your content instantly. The plugin’s easy to understand UI was made to allow you to easily upload a number of fonts and test them on the go. The WordPress was built for Google fonts especially but supports customized forms of these fonts as well.
Key features:
- Fully compatible with all google fonts and various custom fonts in TTF, OTF or WOTF format.
- Easy to use and simple UI design
- Multiple font management systems to help you manage your custom fonts
2. Fonto – Web fonts manager
Fonto is a free to use a plugin that provides you the ability to add a wide range of custom fonts and use them seamlessly on your website. The plugin is integrated with WordPress’s text editor which reduces the hassle of using a separate interface for enabling your custom fonts.
Fonto web fonts manager is compatible with almost all fonts available on popular font vendors such as Typekit, Google fonts and more. This removes the needless step of making sure your fonts are fully compatible.
Key features:
- Easy to set up and manage the uploaded fonts
- Runs with an integration to WordPress editor for easier font access
- Works via embedding fonts or by self-hosted files.
3. Font organizer
This complete font management package was made to accommodate all custom font modification desires a WordPress user can have. From uploading customized fonts to google fonts and more, Font organizer lets you do this and more, with zero hassle.
Easily assign your uploaded fonts to various elements on your website, from paragraphs to headings using Font customizer. The plugin also lets you specify font weight and even assign the fonts to customized elements as well. All this, for free cost as the plugin, is completely free to use.
Key features:
- Upload multiple fonts and assign them to various web elements on your website
- One click google font apply feature
- Easy to assign the fonts and to select font weight.
Using the plugins:
For this demonstration, we’ll be using Font organizer for the wide range of options it provides. The plugin also doesn’t need an API to run unlike the other to run which. This reduces the hassle of setting up the plugin for use.
So, First go ahead and install the plugin to start. If you don’t know how to do so, consider checking out this blog.
Next, open the settings page for Font customizer. For this, hover over Settings and click on Font settings.
You can use the first Add fonts option to easily enable fonts the plugin already contains. There is a wide range of a number of popular fonts provided and you can choose them from the Available fonts drop-down menu. Once you choose one, click on Use this font to add this font to your selection of fonts.
You can also upload your custom fonts using the second Custom fonts section.
First, you need to provide a name for the font, then choose the appropriate font weight for it. This can range from Light/italic to Black/light and more. Once you choose the appropriate weight, click on Upload to add your new font to the plugin’s options.
You can also choose different font formats for the same font by clicking on the green plus sign with the subtext ‘Add another font format file’. For this demonstration, we’ll be uploading a file downloaded from Font squirrel named Amatic.
Using the font in website elements
In order to use the uploaded fonts on the various elements on your website such as paragraphs or headings, we use the third option: Known Element settings. This lets you direct which element should use what fonts and if you want this font to include the ” !important “tag so it is always applied.
The elements you can apply your fonts to are:
- Body – <b>
- Paragraph – <p>
- Headings – <h1> to <h6>
- Inline quotations – <q>
- Ordered lists – <li>
- Hyperlink or anchor texts – <a>
In order to customize these elements, simply hover over the element you want to customize and click on the drop-down menu.
Then click the appropriate font you want to enable and then choose the appropriate font weight. You can also click on the checkbox to enable the ” !important “tag as well. Once you customize various elements you want to modify, click on Save changes on the bottom of this section to enable your customized fonts on these elements.
This should enable your custom fonts on your website. Furthermore, if you have knowledge about coding and are aware of the HTML tags for various elements you want to customize, you can change the fonts for these elements using the custom element section.
The 5th section: Manage fonts exists to help you manage various fonts, add more font weights and delete them if required.
Concluding:
I hope this blog will answer the question of how to add custom Fonts to WordPress. Remember that if you want to ensure your fonts run on every platform, it should be a compatible web format such as OTF and TTF. Furthermore, use you can use font converters such as Font squirrel’s generator to change incompatible fonts to compatible ones.
Check out some of our other blogs which can help you improve your website’s typography and appearance factor:
- How to remove the date from WordPress posts and pages
- How to add breadcrumbs to your WordPress website
- Managing and changing WordPress line spacing
