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:
1. Installing The Plugin
After this your plugin should be in the "Installed Plugins" table. Activate it and that's it, ShuFont is Activated!
2. Uploading A Font
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.
The order which you upload the files is not important.
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.
Maybe we want only paragraphs to be in that font- in this case we will check the "paragraphs" checkbox.
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.
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.
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.
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.
Congratulations! You've just added a font to your site!
3. Managing Fonts
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.
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.
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.
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.
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:
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).
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.
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.
The fonts button also compatible with Visual Composer.
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.
After all this things been said, we can proudly say now that
YOU'RE A FONTS MASTER!