Lets say you love fonts or typography, or would like to add a custom font to your website. You may be thinking of using a Premium font. This may be to improve the visual appearance or to make reading easier. Whatever the reason, having custom fonts in your website really makes a difference. Especially on the web where, by default, most fonts are only web safe fonts.

What are web safe fonts?
You must be already knowing these fonts if you are using word editing softwares, or may have come across such fonts before.

Arial / Helvetica
Times New Roman / Times
Courier New / Courier

There are many more web safe fonts. But some of those fonts do not work everywhere. For example the fonts that work on Windows and MacOS but not Unix+X are:

Verdana
Georgia
Comic Sans MS
Trebuchet MS
Arial Black
Impact

Web fonts can also look good, but it depends on how you use them in your website. Once thing is for sure, you will always have more options and variety with fonts, if you go with a custom font.  So web fonts include web safe fonts and the custom fonts that you select. Well adding a custom font to your WordPress website is easy and can be done through the steps I have listed below.

1. Create FTP folder

Using your favourite File Transfer software, such as FileZilla, or CuteFTP, you can connect to your server. Once you are connected go inside your theme folder, which you are using. Then create a folder and call it “fonts”.

2. Load Font in Stylesheet

After that, you need to load the font in your style sheet via @font-face. Below is an example of using a custom font called “Flix Normal”:

Please note that you will need to use your font name, font extension, and url path. Normally, when you purchase or download a custom font, you will get a folder containing all the fonts, with instructions and the css code to use in your stylesheet. You will need to upload those fonts to your “fonts” folder you created in step 1. Make sure that the url path points to your fonts folder correctly, or the fonts may not load properly. Also save the changes to the stylesheet.

3. Call the Custom Fonts

Do what? Yes you would need to call your custom fonts to your html tags. This is also done in your stylesheet. Lets say I want my font to load in all my headings. Well the css code, for my font will look like this:

h1, h2, h4, h5, h6 {
font-family: "Flix Normal", Helvetica, Arial, sans-serif;
}

You would have noticed that we have used other fonts after our custom font. This is for safety and considered a good practice. It is added to make sure a similar font loads in case our custom font does not. Please make sure the fonts are uploaded correctly and the url path to the fonts folder containing the fonts is also mentioned properly in your stylesheet. Now if you have followed the steps above properly, saved and uploaded the stylesheet, you can go ahead and see your custom font on your website.

 

Now you may be thinking.. “What if I just download a WordPress Plugin to install fonts?”. Well you could do that but it has few limitations. Most of those plugins adds the font to the overall
website for all the HTML tags. So you would need to make sure that you have the option to apply fonts to specific html tags, like header, paragraph etc. In addition, adding plugins may increase the loading time of the website or webpage, which is not good.

You can also add fonts from Google Fonts, as they have an enormous amount of web fonts (this is going to be a separate post on my blog) and the best part is its free.  You can quickly select fonts and add them to your website, with their given code to copy and paste into your stylesheet and html tags.  They have lots of option to further customize and select fonts in different styles.

Which custom fonts and premium fonts have you used in your website?

 

Please share and like:

Leave a Reply