WP Rocket - WordPress Caching Plugin

How to Upload Custom Fonts in WordPress

custom Fonts WordPress

The WordPress theme may have a good font collection to modify various parts of your site. But what will do if you have impressed with some new or external fonts?

Now you want to use it in a WordPress site. Okay. But is it possible?

WordPress users can upload themes, plugins but not fonts unless they have access to the server. A child theme is the best solution to use custom fonts in WordPress. But it is a complex task and you should have coding knowledge to make it effective.

What about plugins? Is there any plugin that let you upload custom fonts in WordPress?

Yes, there are.

In this post, we pick two best custom font plugins for your website. They are free and easy to use. Find a new font of your choice and upload it to the site using any of these plugins. What else?

Read the full post.

1. Use Any Font

Custom Fonts WordPress

Use Any Font is a simple and popular plugin to add custom fonts in WordPress. It is free too.

Initially, you have to download the desired font in TTF, OTF, WOFF format with a maximum of 15 MB size. Google Fonts, Font Squirrel, 1001 Free Fonts, Typekit are leading sources for font downloading.

If you are opting for Google Fonts, select anyone from the home page and tap ‘+’ button from the top right corner. It will be added to your collections.

Custom Fonts WordPress

Click the ‘-‘ button from the bottom to get the embed code or download. We need font file, so tap download button from the top right side.

Custom Fonts WordPress

The downloaded font is in the zip format. Extract it to get the TTF file.

Click Use Any Font menu from the left sidebar. Collect and insert your free API plugin key in the first field. It is essential to convert your fonts to correct web type. Otherwise, there may be compatible issues in some browser types.

You will see the Upload Fonts section next. Type Font name. Select your TTF file and click the Upload button. Wait for a few moments to finish the conversion. Then go to the Assign fonts section.

Choose your new font and assign elements to it. Finally, tap ‘Assign’ button to finish.

Clear your website cache and check contents from front-end. It should appear in the new look according to the elements selected.

2. Typekit

Custom Fonts WordPress

Typekit is a great place to find free as well as premium custom fonts for websites. It has a huge collection of font faces.

Sign in to the website using Adobe ID and select any font from the home page.

A new screen will open with font variants and preview. Tap green color Web Use: Add to Kit button from the right end. Then you will get an option to create a font kit. Enter name and domain address to use the chosen font. Click on Save.

A small popup box will appear with font codes. Copy Default Embed Code from it. Click on Continue to open Kit settings. Here you can customize Font style, weight and set font fallbacks for unsupported browsers. Once finished, Click on Publish.

Sign in to your WordPress site, click Plugins and Add New. Search for Typekit Fonts for WordPress. Install and activate the plugin.

A sub menu, Typekit Fonts, will be created under Settings. Open it.

Paste you embed code in the first field.

Wherever do you want to use the new font?

Define your elements in the form of CSS codes.

h2 { font-family: “proxima-nova-1”, Adobe Caslon Pro; }
p {
font-family: “Times New Roman”, Times, serif;
body { font-family: Arial, Helvetica, Sans-Serif; }
h1 {
font-size: 40px;font-weight: bold;font-family: Georgia, Serif;
}h2 {
font-size: 30px;font-weight: bold;font-family: Lora;
}p {
font-size: 14px;font-family: Georgia, Serif;
.entry h1 { color: #589642; font-family: Georgia, Serif; }

These are some of the example CSS codes. Replace mentioned fonts with your chosen font name. You can recover it from the Kit editor in Typekit website.

Enter your code in Custom CSS Rules field of the plugin. Click on Save.

Go to the front-end of your blog and see the changes.


Are you looking for customization related topics in WordPress? Make sure to read the following contents: