WordPress Plugins for Managing Fonts on Your Website

fontsOne good reason to change the font on WordPress site is the inability of displaying special characters. The default WordPress theme Twenty Fifteen features the font type that supports a large number of letters, but the problem can arise when you buy a theme that is not optimized for Cyrillic or Latin alphabet. Also, it is not the only reason you might want to change characters. It may happen that you do not like the default fonts or you want different text elements to ones you are given (headlines, quotes, passages) to be highlighted with a separate font type. This desire (or a problem) is easily managed by using plugins for WordPress.

Instead of listing all the different types of plugins for font changing, we will try to show you and describe two interesting and useful plugins: one which is completely free and another one that requires a donation of more than $10 to use all of its options.

Use Any Font (starting from 10$)

Use Any Font comes with the motto “Integrate any letters in your site!”. And that is exactly where this plugin can help. After installation, you need to register on developers’ site in order to obtain the API key. Programmer Dinesh Karki is offering the option of donating up to $100, but any donation over $10 allows an unlimited number of activations and fonts management for a lifetime. If you wish to use this plugin for free, you can use one API key and one font activation.

Example Settings

After installing the plugin, it is necessary to obtain an activation API key in order to use Use Any Font. Registration is required for both free and paid version.

Before registration form field, there is a slider for setting the amount you want to donate to plugin developer. If you are going to use this plugin for free, drag the slider all the way to the start. After entering the required information you will receive API key and you can copy it to the form field reserved for this purpose in the plugin itself.

screenshot-i0 wp com 2016-03-17 14-25-04

Now that you’ve got the API key, open WordPress dashboard, access the settings of Use Any Fonts plugin and insert the activation key in the API KEY field.

screenshot-i2 wp com 2016-03-17 14-30-22

Once your API key is activated, you can use any font you are about to upload from your computer. In the form bellow, you’ll find Upload Fonts form field. To add a font from your computer, click the Add Fonts button. In the Font Name box enter the name of the font. Click the button to Select file and browse for the font in your computer. Select the font and click Upload.

use-any-fonts-dodavanje-novog-fonta-sa-racunara

This way, fonts from your computer are uploaded directly to your website and can be used by the plugin. All fonts that you add can be found under Upload Fonts:

use-any-fonts-uploud-slika

Further, once the fonts from your computer are uploaded to your website, they can be used for different elements if you have decided to go for the paid version of the plugin. Customizing fonts is managed vi Assign Font.

screenshot-i1 wp com 2016-03-17 14-33-57

 

After selecting all the desired elements, in order to save all the settings, click on Assign Font button.

The viability of this plugin is that it allows you to use any font. All it takes is for the user to find a font that he wants to use on its website, download it and upload it to his site, following the procedure described above. If we take into account such (unlimited) opportunities, it can be concluded that the price is not really high. This plugin does not feature the preview mode, which is the only minus for this plugin.

WP Google Fonts plugin for WordPress (completely free)

This is a simple and easy plugin, recommended even for the beginners, that is – for everyone who wants to change the fonts on their website. It allows the use of the entire Google Fonts library. It is free and it allows the use of a large number of fonts as well as choosing the most suitable one. After the plugin installation and activation, it can be very easily determined which special type of fonts you are going to use for the elements such as the title, text, quote and others. It has the options to assign a special CSS code. It can be used simultaneously with as many as six different fonts, which may even be too much as it can visually look a bit distasteful and make it difficult to navigate the web site.

This plugin doesn’t support the option for including additional fonts (by uploading them from a computer), but it does have a very large resource base so it basically goes without question that you’ll be able to find what really suits you.

google-fonts-prikljucak-slika-1

The interface of this plugin is simple. It is divided into six sections, i.e. the setting of each of the six types of fonts that the user can specify. In each section one can specify fonts for each text element on his site.

google-fonts-prikljucak-slika-2

Assign different font to elements

In the example shown in the picture below, we’ve selected Duru Sans as example. In part 1.Chose the font styles you want: we’ve selected Normal, that is – the general style.

If you want to assign one type of font to all elements of the text (titles, quotes, passages), find the font that has all styles (Book, Normal, Normal Italic, Bold, Bold Italic).

The font selected will be assigned to elements we have selected in 2.  Elements you want to assign this font to, respectively, h1, h2 and h3 headings.

screenshot-i2 wp com 2016-03-17 14-46-01

In order to allocate the remaining elements with the new font, it is necessary to select a new type of font in Font 2 section. In the same way as in the previous case where we determine headlines h1, h2 and h3, we will now assign new fonts to h4, h5 and h6 headlines. We won’t skip selecting a style, Normal 400.

 4. Choose character sets you want, always choose the Latin-ext as thus all the letters of Serbian Latin alphabet will be shown.

google-fonts-prikljucak-slika-4

What’s left is to assign a font to quotes (blackquotes), paragraphs and lists, too. As shown in the previous examples we need to pay attention to styles and elements which are assigned a particular font.

If the site you are using relies on the Cyrillic alphabet, pay attention to Part 4. In the Choose character set you want to choose a Cyrillic-ext so that all the letters are fully displayed in the style of the font you selected.

google-fonts-prikljucak-slika-5

In the end, when you click on the Save All Fonts button and all the settings are saved, the results appear on the page like this:

Here is an example of using three types of font. In practice, it is often enough to find one type that will meet all the needs, so pay attention not to overdo it. Just as the previous plugin, this one also doesn’t have the option to preview the font before using it on a live website. However, if you visit Google Fonts website, you can view all fonts and find one that will suit you. After that, it will be easy to be sure on the font you want to activate.

Note that the font you choose has the following items before you use it live on your WordPress website:

  • To have the necessary selection of styles

odabir-stila-fonta-adriahost-blog

  • To support both Cyrillic and Latin letters. This option is shown as Cyrillic Extended (cyrillic-ext) and Latin Extended (latin-ext)

odabir-setova-karaktera-fonta

Font is a part of your visual identity on the Internet, do not ignore it

Your font style can very much influence the traffic on your page as well as the content you wish to share with your readers. If the letters are visually heavy, too small, unusual, or even too big, it may happen that people give up on the idea you’ve presented. It is best to use standard, legible letters of a normal size and letters supporting Serbian characters. If it has happened that you’ve stumbled upon on contents with Serbian letter prominent in comparison to the rest of the words, this means that the site is using a font that does not support Serbian alphabet, neither Cyrillic nor Latin. As you’ve read in this text, that’s a “problem” that can easily be fixed so that your readers enjoy reading and scrolling through your page.

Tags: , , ,

No comments yet.

Submit Comment