Custom Font Uploader,WordPress Custom Font Uploader

Custom Font Uploader is a free WordPress plugin that allows you to upload custom fonts on your WordPress website. You can easily upload custom font family using browse and upload as well as using Google font family and have it enqueued on your site. In this article, we will tell you how you can setup Custom Font Uploader Plugin on your WordPress website.

Installing the plugin

To install the Custom Font Uploader . Follow the steps given below

Step 1. Log in to the WordPress Dashboard.

Step 2. On the Dashboard of your website, scroll down the left-hand sidebar and click on Plugins.

 

Step 3. From the Installed Plugins page, click on Add New at the top of the page. Alternatively, click on Add New from the drop-down menu under Plugins on the sidebar.

 

Step 4. On the Add Plugins page, you can see upload button on the left-hand side, at the top of the page.

 

Step 5. After click upload button, you can upload plugin zip & install.

Step 6. The plugin is now installed and unpacked into your website. The last thing to do now is click Activate Plugin.

Custom Font Uploader,WordPress Custom Font Uploader

Uploading Fonts

After the plugin has been installed, we will upload the fonts and get them enqueued on our website. Before uploading any font please note that upload font file format of type: ttf,tf,woff. Let us start with the settings step by step:

General Settings: Go to Dahsboard>>Font Uploader>>General. General settings give you an option to  API Key from Google which will help you fetch fonts from Google. Here you will add the API Key and Save Changes.

Custom Font Uploader,WordPress Custom Font Uploader

Upload Fonts:  Go to Dahsboard>>Font Uploader>>Upload Fonts. This setting allows you to upload the fonts. Click on Add Fonts. Here you can upload or drag and drop the font that you have downloaded. Just Choose the file and upload the font. The font will be added to the list in this section.

Custom Font Uploader,WordPress Custom Font Uploader

Google Fonts: Go to Dahsboard>>Font Uploader>>Google Fonts. This setting enqueues particular Google Font on your website. After selecting and saving font from dropdown it will enqueue particular font on your site. Once enqueued the font will be shown on the list.

Custom Font Uploader,WordPress Custom Font Uploader

Displaying your Custom Font on Frontend

Now we will see how you can display this font on the front-end of your website. Firstly let us test if this is working or not.

Step 1: Go to My Site on the front-end. Inspect the element by right-clicking on the font you want to change and Inspect. I am inspecting the Heading, “The ultimate BuddyPress Theme”. Before this copy the code of the font you have uploaded from the back-end. Now add an element called Font Family and add the code. As soon as you will add the code you will see that the original font style has been changed to the newer font.

Custom Font Uploader,WordPress Custom Font Uploader

 

Step 2: Now in order to make the changes permanent, copy the CSS code from the inspect part. You will copy only the CSS part.

Custom Font Uploader,WordPress Custom Font Uploader

 

Step 3: Once you have copied the CSS, Go to your theme options and add CSS in the Additional CSS section. Inside the curly brackets add the Code of the font and Publish the changes. Here we have used Reign- The Ultimate BuddyPress theme.

Custom Font Uploader,WordPress Custom Font Uploader

 

Step 4: Your font will be published in the Front-end.

Custom Font Uploader,WordPress Custom Font Uploader

There you Go! You have published your own font on your website. This is free and you can download it from here. You can also check out this video of Custom Font Uploader.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.