ShuFont

Uplaoding fonts and manage them was never that easy

Learn how to change font in wordpress sites by only reading these 7 sections

How to change font in wordpress site?

This tutorial is for anyone who wants to know how to change font in wordpress sites. The tutorial includes screenshots from the "ShuFont" plugin admin pages and detailed information about how to use it. For any other help or question, you may contact us.

In order to change font in wordpress using this tutorial you will need to download and install "ShuFont" WordPress Plugin.

If you want to see and get sense of how to use the plugin and add or change font, you can watch the tutorial in here: 

In case you like to read, we have here a written tutorial with screenshots. 

Table Of Contents:

  1. Installing The Plugin
  2. Uplaoding A Font
  3. Managing Fonts
  4. Editing Fonts
  5. Google Fonts
  6. Text Editor Button
  7. Summary

1. Installing The Plugin

After downloading the plugin to your computer, upload the folder called "ShuFont" to your WordPress site. Plugin uploading can be done in the page under "Plugins->New Plugin" In the top left corner, right to the headline "Add Plugin" there is a button called "Upload Plugin" All you need to do is clicl on it and a new upload area will appear.

Click on the "Choose File" button, select the "ShuFont" folder and then click on "Install Now".

After this your plugin should be in the "Installed Plugins" table. Activate it and that's it, ShuFont is Activated!

2. Uploading A Font

Plugin Page

Now we finally come to part when we learn how to change font in wordpress.

ShuFont is very easy and intuitive once you get it. In this chapter we are going to go step by step on how to upload your first font.

The settings page of the plugin is under "Settings->ShuFont" in the admin area.

 

01
ShuFont - change font in wordpress
ShuFont - change font in wordpress
ShuFont - change font in wordpress

The order which you upload the files is not important.

After uploading the font files you're done! Yes, if you hit "Add Font" you have all you need to use this font. The plugin offers a custom button in WordPress text editor (also compatible with Visual Composer). With that button you can select text and assign the font to that text. We will cover this topic in the "Text Editor Button" chapter.

More Options

ShuFont - change font in wordpress

Before continuing, we will start with an introduction. Websites are written in HTML. Website page is made out of HTML blocks, each block is an element (For example we have <p> tag that represents Paragraph, <h1> tag that represents Headline 1 (The 1 determines the headline size. 1 is the biggest and 6 is the smallest) and so on and so on. To each element we can add attributes like class or id.

The reason I tell you this is that in the next fields we are going to use this information to assign a font to an element or couple of elements.

So let's start. Say we want to make all of our website in this font, all we will need to do is to select the "All site (Body tag)" checkbox.

ShuFont - change font in wordpress

Maybe we want only paragraphs to be in that font- in this case we will check the "paragraphs" checkbox.

ShuFont - change font in wordpress

Similarly, if we want all Headlines 3 to be in that font- all we are going to have to do is check that checkbox (Headline 3) too.

ShuFont - change font in wordpress

The next is the Classes area. What if we want only paragraphs with a class attribute named "special-font" to be in that font?

Well, all we will have to do is write that class ("special-font") in the classes textarea. If we have another class we will separate it with a "," (comma) from the previous class.

ShuFont - change font in wordpress
ShuFont - change font in wordpress

Same goes with the IDs field, if we want the font to work only on Unordered List with an id attribute named "special-font" you will need to write "special-font" in the IDs textarea. 

ShuFont - change font in wordpress

The last field, the "Force CSS" field, should only be used if you assign your font to a text/element/class/id and it did not work- the text/element/class/id appear in the regular font. If this happens, just check that option and it should be fine.

ShuFont - change font in wordpress

After you finished setting your font to be applied anywhere you want, click the "Add Font" button and the settings will be saved.

 

Congratulations! You've just added a font to your site!

3. Managing Fonts

ShuFont - change font in wordpress

Managing all of your fonts can be done under the "Manage Fonts" tab. Once you click the tab you will be seeing a table containing all of your current fonts with a short preview of each settings (Selected elements, classes and IDs).

If you'll put your mouse above one of the fonts, 2 links will appear- "Delete" and "Edit". "Edit" will take you to a page where you can edit your font and change settings. "Delete" will delete the font and will erase all font files that were uploaded while creating this font. Ifyou click "Delete" the font can not be restored, unless you create it again.

ShuFont - change font in wordpress

In the "Manage Fonts" tab you could see a preview text to see how will it look in your website. You can change the preview text by entering your desired text in the field above the table.

In Addition to preview text, as been said above, you will be able to see the elements you chose to to apply to this font, as well as Classes and IDs. You will also could see what formats you have uploaded so far from the supported formats (As for ShuFont 1.1 the current supported formats are ttf, woff, woff2, eot and svg).

4. Editing Fonts

If you click "Edit" in the "Manage Fonts" page you will be taken to the "Add Font" page only now you could see all the fonts settings you last set. You'll be able to see the files you uploaded, the elements you selected, the classes and IDs you wrote and whether to force this font or not.

To the right of each font there is an X sign (⊗). If you want to delete a font file click on the file's ⊗ and the file will be removed.

To upload new files to your font, click on the "Upload Here" area and choose your file ( If you have uploaded all available font formats the "Upload Here" button will not appear. Delete the file with the format whom you want to upload and then upload the new font file ).

You can also select new elements and remove selected element (by deselecting it).

Classes and IDs can be changed too by writing new classes/IDs.

14

After editing and changing everything you wanted just click "Update Font" to save your changes. Now if you will come back to the "Manage Fonts" tab you'll be able to see your changes.

NOTE: While editing a google font you will not be able to upload/delete files as the files are imported from google and we have no control over it.

5. Google Fonts

As for ShuFont 1.1 we added the option to add google fonts to your website. In order to view google fonts click on the "Google Fonts" tab. There you will see list of hundreds of fonts. In the page, you will be able to choose how many fonts to show per page, change preview text and search for fonts.

15

As you can see in the image above, there is an alert telling that you may not seeing the latest google fonts available. The reason is that in order to view all the latest google fonts you will need to require an API Key. You can get one here. After getting your API Key enter it to the "Google Fonts API Key" in the settings tab.

16

After you entered the API Key click "Save Settings" and you should be O.K.

If you entered wrong API Key, google won't let you access to the fonts and you will get an error message like this:

17

If everything went good and API Key is correct, you will get a success message and from now on you will have access to the latest google fonts available.

NOTE: When using Google Fonts with your API Key the fonts data is taken from google servers. It is recommended not to set high amount of fonts per page, otherwise page load will be slow.

6. WordPress Text Editor

If up untill now you don't feel like ShuFont can give you enough flexibility to choose the text you want to apply to a specific font- the next tool will change your mind about it.

ShuFont comes with a built-in addon to WordPress Text Editor (TinyMCE) which adds a fonts list available to you according to your fonts (All the fonts in the "Manage Fonts" tab).

ShuFont - change font in wordpress

In order to apply a font to a text simply highlight the text then choose the font from your list of available fonts. The text sould appear in that font.

ShuFont - change font in wordpress
ShuFont - change font in wordpress

If you wish to return text to it's default font, highlight the text and click again on the font that is applied to it. The text shell return to its initial font.

ShuFont - change font in wordpress
ShuFont -change font in wordpress

The fonts button also compatible with Visual Composer. 

7. Summary

So, after learning how to install the plugin, how to upload your first font, how to manage your fonts, how to add google fonts and how to edit, delete or just see the settings of a font- we hope you understand how to work with the plugin.

We hope you enjoy the plugin the same as we enjoyed making it for you. We encouraged you to send us feedback and improvements about the plugin and rate us on envato and WordPress.org.

After all this things been said, we can proudly say now that 

YOU'RE A FONTS MASTER!

ShuFont - The Best WordPress Plugin to Add Fonts

Get this plugin from envato

All Rights Reserved © ShuFont  2017