The BootStrap Themes intro: Here’s a very helpful guest post from Sofia Diaz David a web designer and writer. She’ll guide you through options for customizing fonts on your website. Enjoy the read!
In order to give a unique look to your design, adding custom fonts is always a wise decision. Fonts or Typography has always remained an essential element in the success and failure of every website. You can entirely change the look of your website or design by adding custom fonts, but How? This is the real question that I am going to answer in this guide.
Adding custom fonts to your WordPress site is the appropriate way to make the context readable and appreciable.
The custom fonts allow you to make an appealing combination of fonts that gives another level of touch to your site. So why not to make your website extraordinary by customizing fonts and Typography?
If you have a WordPress site and you are looking forward to knowing the ways through which you can customize fonts and Typography, then this guide is for you. The process is as easy as it seems without any hard and fast rules. However, you need to learn this process with both the manual and plugin processes. So, let the guide begins.
Get Your Hands-on Web-Friendly Fonts
Before starting the process, you should first get your hands-on web-friendly fonts because not every browser holds up every font. Before making the fonts web-friendly, you first need access to fonts that you are going to use in your website. You will come across many websites that offer free fonts.
Furthermore, many noted fonts are accessible free of cost for personal and commercial purposes, from which you can make an easy selection. If you are going to design a fashion website or store then I will recommend you to go with Gucci font which is available free of cost and you can easily use it on your WordPress site. Now once you have the font, the next step requires making it web-friendly if it isn’t.
If the selected font isn’t compatible with your browser, then making it web-friendly is the only way. There is a term ‘Web font Generator’ that lets you transfigure every font into a web-friendly format free of cost. You won’t get a better option to complete this process other than this tool. What you need to do is:
- Go to the Web-font Generator tool.
- You will see an option ‘Upload the font,’ Click the button and select the font that you want to make compatible with your browser.
- Below you will see an Agreement option that you need to click in order to move further.
- Below the agreement option, you will see another option, ‘Download your Kit.’ Click that option.
- Save the Zip file in your system. You are all set to use it.
It is how you can get complete access to web-friendly fonts for your website. Now the step requires how to add custom fonts to your WordPress site.
Adding Custom Fonts Manually
Here is the first process with which you can customize fonts on your WordPress site. If you don’t want to overload your website with unlimited plugins, then this process is surely for you. To begin the process, you need to edit your CSS file theme. Later, you need to do is:
- The font that you have downloaded to use on your website should be in the .zip archive; once you are done, move to the next step.
- The next step requires uploading the file to your font theme directory. Suppose you don’t have any theme directory to create the one to upload the font file. You can use any File Manager to complete this task. It’s totally up to you.
- Now go to the Admin area of your website, where you will come across the ‘appearance’ option. Click that option and later go to the Theme Editor option. You will witness a CSS file from where you have to add the code.
- Once you are done with the process, click the upload option to save the changes.
The point to b noted is, the code you have entered will load the added font every time any person will visit your site. Even after completing the task, you still need to assign the font to an element. To do it, you have to edit a similar CSS file. After the process, the font will be assigned to each element.
Adding Custom fonts with Plugins
If you do not want to proceed with the first method, here is another way to customize fonts by installing plugins. It is an equally easy and straightforward way to get the work done. You can simply go with Custom fonts plugin or if you want you can get many notable plugins from different sites free of cost, choose as per your requirement.
Once you have access to the plugin, install that plugin in WordPress theme Directory. Once it is installed, go to the Dashboard of the admin panel from where you can make changes in the font. For instance, changing the font size, assigned elements, and other settings.
Once it is verified, you would be able to download the fonts in different formats, including TTF and OTF, etc. After the font activation, go to the settings from where you can assign your required specifications to the font i.e font size, etc.
However, I would recommend you to go along with this process because it only demands a plugin installation. Yet if your site is already filled with many other plugins for different purposes, you can think about the above-mentioned process.
Conclusions
Through this guide, you have learned 2 important elements of making your website class apart. First, how to make the fonts compatible with your browser, and secondly, how to add custom fonts on the WordPress site by following 2 methods. I have made sure to simplify the method for everyone’s better understanding.
Whatever font you chose for your website, make sure it compliments your website’s theme and style. The time had gone when a graphic designer had hardly a few options for font selection. Now from unlimited font types, you can surely come across the most appropriate one for your website.
Make your design captivating by adding custom fonts because Typography makes your site look clear, legible, and fascinating. I hope you will find this article informative and obliging.
About the Author: Sofia Diaz David, has worked on web design and writing for the last 5 years. She has written a number of guides on web design related topics, to help new web users easily learn about all things web-design.
