Do you have a website built on WordPress and don't know how to install custom fonts? Have you noticed that the available fonts don't suit your taste? Using custom fonts 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 formats like ttf, otf, eot, woff, svg, dfont, and suit. It works with major browsers such as Edge, Firefox, Chrome, Safari, Opera, and others. Font loading time is good since they are hosted directly on your site.
Easy Google Fonts
This plugin loads fonts directly from the Google Fonts database. This means: Google Fonts. Esto significa que:
- The font doesn't need to be on your computer; it must be in the Google Fonts repository to load.
- It has 915 font types in its database.
- It has a system that allows you to suggest similar fonts if the one you need isn't available.
- Fonts will load from Google's server, so they won't take up space on your server.
- You won't have compatibility issues between browsers.
WP Google Fonts
This plugin allows you to add fonts from the Google Fonts repository with a limit of up to 6 per page. This is because an excess of fonts can slow down your page and make it look bad.
02. Insert with CSS:
If you have the font installed on your computer or downloaded in your files, you can upload it to the server via FTP and then link it with CSS. You'll need to use a tool that converts your file to all compatible font formats so that all browsers can read it.
You can do this from “Generator” de Font Squirrel.
- Now, upload the font via FTP with all its extensions to an existing directory or create one, for example, a folder called "fonts" in the root of the WordPress installation.
- Edit the style sheet of your active theme:
| @font-face { //Nombre por el que llamaremos a la fuente font-family: ‘tufuente’; //Referencia de todo los formatos src: url(‘/fuentes/tufuente.eot’); src: url(‘/fuentes/tufuente.eot?#iefix’) format(’embedded-opentype’), url(‘/fuentes/tufuente.woff2’) format(‘woff2’), url(‘/fuentes/tufuente.woff’) format(‘woff’), url(‘/fuentes/tufuente.ttf’) format(‘truetype’), url(‘/fuentes/tufuente.svg#tufuente’) format(‘svg’); font-weight: normal; font-style: normal; } |
In this example, "tufuente" will be replaced by the name of the font you upload. The src and url should be replaced by the path where your files were uploaded. In our example, the "fonts" folder in the WordPress root.
Now just use it. For example, if you want to assign it to titles:
| h2, h3, h4{ font-family: ‘tufuente’; } | h |
And if the titles already have a different font assigned, or you're looking for the line and replace it, or you add !important to give priority to your modification:
| h1, h2, h3, h4{ font-family: ‘tufuente’ !important; } |
Download Fonts!
If you're not sure where to download your favorite fonts, here's a list of websites where you'll find almost unlimited fonts of any style:
