Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
Many times we need to modify the typography in WordPress and with this we find ourselves with the cumbersome task of looking for a plugin that does not consume a lot of resources on our server.
Changing the font in WordPress can be easier without plugins than it may seem at first glance. But how to start managing all the change of fonts? Where do we look for these fonts?
Next, we will see step by step what we can do so that our WordPress or our WordPress +Divi installation has new fonts that we can use.
Font servers to use in WordPress
As we mentioned previously, the search for fonts to use in WordPress is the first point to start working on the typographic change of our website. We can find varieties of pages that offer this service, both paid options as they are, among others that we can find throughout the internet.
We can also find free WordPress fonts that make it easier for us to select a font that is displayed correctly on our sites without any problem. Some pages where you can find free options are and, the easiest when making changes to fonts, .
Download Google Fonts:
To search for fonts in Google you can enter . Once inside the Google system, it’s as easy as selecting one of the fonts that appear or, if you know the name of the font, use the search engine at the top:
In the “Category” section, we can filter basic aspects of the font that we want to search for, for example, if this font is serif, sans serif, displayhandwriting, etc
On the other hand, you can select the native language of this font, if you need to incorporate a foreign language, and its properties, such as thickness, height, width, etc.
Once the ideal WordPress source for our project has been selected, we download it to be able to use it on our site under the direct embedding method on our server. To do this, when entering our chosen source, it will show us several options.
Here we can see a button with the action to download said font family. The family are the versions that the fonts have, for example, bold, regularY italicsamong other.
Download fonts from other websites
This will depend on the site we use, but the basic concepts will be the same. For example, if we enter , we will see many options to select the type of font we want. It is somewhat less organized than Google Fonts, but it is equally beneficial when selecting our typography.
Although if you prefer you can see this tutorial on .
As in Google Fonts, we have buttons to download the font. Once we select it, based on the superior criteria or we identify one that we like, we can download it using the button that indicates it.
Plugins to change WordPress font
As we mentioned before, it is very easy to change the font in WordPress using different pluginamong which we recommend using Easy Google Fonts.
East plugin it is the best option for users who do not have any knowledge about WordPress programming languages and do not want to edit code. Thanks to it you will not have to access the WordPress server or make any changes that require specific knowledge.
what this does plugin is that it allows you to change the font almost automatically. You can enter Google’s free font catalog in a very simple way to try all the fonts that are available until you find the one that best suits the style of the project.
To use this plugin all you have to do is enter it and go to the “Appearance” > “Customize” tab to be able to change the fonts of the different elements of your website, as is the case with the fonts.
The negative side of this plugin is that the number of fonts is limited, although it is true that they offer us a large catalog and it is most likely that you will find one that suits your needs. Also, it only allows you to change the font of titles and subtitles (H1, H2, H3, H4, etc.) automatically, which means that all titles on your site will have the same font settings.
Other plugins
The catalog is quite extensive and many of them may have just what you need to use a custom or premium font in your design very quickly and comfortably.
As we already mentioned, it is common for these plugins to ask you to modify certain lines of code in WordPress or in your , but most explain how to do it and will guide you through the process, making the whole process of changing WordPress font simple and fast. .
We invite you to compare and analyze the functions of the different plugins available so that you can find one that meets your needs and demands.
Change WordPress font without plugins
Once we have our font selected and downloaded, we can move on to the next step: upload it to our server so that it can be assimilated by our site directly into our files and so that our site can take it more effectively.
We can do this in two ways: by uploading files via FTP or through our .
Access our server via FTP
With this option, it is recommended that you use an FTP manager or FTP transfer program. One of the most used, which is also free, is . With this program you can have access to server folders and it is compatible with Windows, Linux and macOS, which makes it a fairly complete and accessible tool for transferring content.
To make the connection you will need the . These data consist of:
Server: name of the domain or subdomain to which the program will connect
Port: assigned port for FTP connection (optional)
Access mode: we select “normal” to be able to manually enter the username and password that we have for server access
User: user created to allow access to the server
Password: password specifically created for the previously created user
Access our server through cPanel
This step is similar to the previous one, but for this you simply have to enter your account administration panel following our guide: .
Once inside, we can enter the file management area located at the top under the same name:
There we will find an interface similar to FTP with the folders, which we can enter by clicking on the corresponding areas.
Upload files to our server
Once we successfully connect to our server, we will see all the folders associated with both our main domains and subdomains or temporary folders. So, the first thing, once connected, will be to identify where we are going to upload our sources.
We generally use our domain at the root of our server, so you may find the folder wp-content/theme_used within Public_Html. If not, you must go to the folder in which your website is being displayed and then go to the folder of this content.
It is possible that depending on your theme you already have a folder dedicated to fonts under the name of Fonts. If not, you can create it without any problem, although it is recommended to do it directly within the Theme, so that everything is more organized. Since this folder would be new, you can name it whatever you want.
The compressed fonts usually have files with extensions .eot, .woff, .svg or .ttf, the latter being the most common among font downloads.
Once you have these files uploaded to your server in the corresponding folder (created by you or by default of the Theme), you only have to tell the Theme where these fonts are located so that you can use them on your site.
To insert this code and have it recognized by your WordPress, you can enter a code both in the style.css file, located in the same path of your Theme in the FTP or cPanel files, or by entering Appearances > Theme Editorfrom the administration panel itself.
In both cases we will find a file in which we must insert a code at the top of it after the general description.
@font-face { font-family: font-name; src: url(https://domain/domain_folder(if you have one)/wp-content/themes/your theme/fonts/font_name.ttf); }
With this code we are indicating the name of the font that we are using and the specific path where we upload our font file. For example, if we have uploaded it to wp-content/yourtheme/fonts/ The route that we must enter would be:
http://domain/domain_folder(if you have one)/wp-content/themes/your theme/fonts/font_name.ttf
Load Typography Using CSS in WordPress
Once we have identified by the system and your theme what it will be called and where the new font will be taken from, it is time to choose where we want it to be displayed on our site. For this we are going to use a tool that all our browsers have that will help us verify the codes to enter WordPress so that it is assimilated.
When entering our site and identifying the element that we want to modify in font, we proceed to right click on it and then click on Inspect element. By doing this, it will show us all the code referring to the area we clicked on.
We will see that the title of the section or what we have clicked on is an H1, so to add the text we must enter the respective code to this H1:
h1 { font-family: font_name; }
Likewise, if we wanted to change it for the web texts, that is, the Ps, we could enter a code like this:
p { font-family: font_name; }
In certain cases, we have a specific class, for example:
We see that the button see options and hire owns a class, so we could also apply the source to this particular class:
a.et_pb_button.et_pb_custom_button_icon.et_pb_button_0.et_hover_enabled.et_pb_bg_layout_dark { font-family: font-name !important; }
As we can see, everything would be in being able to inspect the element that we want to modify and after this add the same CSS code structure only incorporating the Font-family option to maintain the font selection that we have uploaded to our server.
Change custom font from Divi
Unlike the arduous process that we have to carry out in an installation that does not have Divi, this one is much simpler:
- Open a post (page or article) in the Divi Builder and insert a text module. You can also click…
Facebook Comments
Disqus