Do you have a website built on WordPress and don't know how to install custom fonts? Have you noticed that you don't like the type of letters available? Using custom fonts that are different from the default ones is easier than you think! Here are two ways to do it:
01. PLUGINS
Use Any Font
This plugin allows you to upload fonts directly from your computer and supports the formats: ttf, otf, eot, woff, svg, dfont and suit. It works with major browsers such as Edge, Firefox, Chrome, Safari, Opera and others. The load time of the fonts is good, since they are hosted directly on your site.
Easy Google Fonts
This plugin loads the sources directly from the database of Google Fonts. This means that:
- It does not matter that the font is on your computer, it must necessarily be in the Google Fonts repository to be able to load it.
- It has 915 font types in its database.
- It has a system that allows you to suggest similar fonts in the event that the one you need is not available.
- The fonts will load from the Google server, so they will not occupy a place on your server.
- You will not have incompatibility problems between browsers.
WP Google Fonts
This plugin allows you to add fonts from the Google Fonts repository with a limitation of up to 6 per page. This is because an excess of fonts can slow down your page, in addition to making it look bad.
02. Insert with CSS
If we have the font installed on our computer or downloaded in our files, we can upload it to the server via FTP and then link it with CSS. It must be taken into account that we will have to make use of a tool that converts our file to all compatible font formats so that all browsers can read it.
You can do this from: Font Squirrel's “Generator”.
- Now we upload the source via FTP with all its extensions to an existing directory or create one, for example, a folder called "sources" in the root of the WordPress installation.
- We edit the stylesheet of our active theme:
| @ font-face { // Name by which we will call the source font-family: 'yoursource'; // Reference of all formats src: url ('/ sources / yoursource.eot'); src: url ('/ sources / your source.eot? #iefix') format ('embedded-opentype'), url ('/ sources / yoursource.woff2') format ('woff2'), url ('/ sources / yoursource.woff') format ('woff'), url ('/ sources / yoursource.ttf') format ('truetype'), url ('/ sources / yoursource.svg#tusource') format ('svg'); font-weight: normal; font-style: normal; } |
In this example, “yourfont” will be replaced by the name of the letter you upload. The src and url must be replaced by the path where your files have been uploaded. In our example, “source” folder in the WordPress root.
Now it only remains to use it. For example, if we want to assign it to titles:
| h2, h3, h4 { font-family: 'yoursource'; } | h |
And if the titles already had a different font assigned, either we look for the line and replace it, or we add !important to give priority to our modification:
| h1, h2, h3, h4 { font-family: 'yoursource'! important; } |
Download Fonts!
If you do not know where to download the fonts that you like the most, then we leave you a list of pages where you will find almost unlimited fonts and of any style:
