WordPress: How to install additional fonts

But if that is not enough, and you or your client have fallen in love with a very specific typeface, then you are at right place! In this tutorial, we will show you how to install or add Custom Fonts in WordPress.

#Use Any Font

It allows you to upload the sources directly from your computer. So if you are one of those designers who, first-pass everything through the drawing board, this plugin is perfect.

It supports the following formats: ttf, otf, eot, woff, svg, dfont and suit.

eye! Apparently, in a 2018 update it became freemium, meaning that now it only lets you upload a source for free. If you need to upload more, you must request a new password and create another account. Or that or pay the license, of course.

#Easy Google Fonts

This plugin loads the sources directly from the database of Google Fonts. This means the following:

• It doesn’t matter if the font is on your computer or not, it must necessarily be in the Google Fonts repository in order to load it. But don’t worry, right now (2019) it has 915 in its database. And a system that allows you to suggest similar sources, in case 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 and you will not have incompatibility problems between browsers (Recall that some browsers do not support certain font extensions).

#WP Google Fonts

A very simple plugin that follows the logic of the previous one: It allows you to add sources from the Google Fonts repository with a limitation of up to 6 per page.

Why up to 6? The excess of sources not only remains ‘shabby’ but significantly slows down the page load.

#Typekit Fonts for WordPress

It simply gives us the option of putting embedded code so that we can insert calls from external sources.

In addition, in another box, it allows us to assign these calls to different elements through CSS. Therefore, it is a very simple tool focused perhaps for developers in a hurry or without FTP access.

We remind you that in the last section of this post, websites will be listed where you can download sources for free.

1st :- We get the source:

• If it is already on our computer, we move on to the next step.
• If we had downloaded it, we will have to make use of a tool that converts that file to all compatible formats. That way, we won’t have problems like some browsers not reading it. We recommend using the Generator by Font Squirrel.

2nd:- We upload the font, with all its extensions, to an existing directory or create one, for example, a folder called “fonts” in the root of the WordPress installation. If we had it installed on the computer, dragging that source from the sources folder to FTP will automatically upload all extensions.

3rd :- Edit the style sheet of our active theme or create a child theme In any case, we add the following:

@font-face {
  //Nombre por el que llamaremos a la fuente
  font-family: 'loveloblack'; 

  //Referencia de todo los formatos
  src: url('/fuentes/lovelo_black-webfont.eot');
  src: url('/fuentes/lovelo_black-webfont.eot?#iefix') format('embedded-opentype'),
  url('/fuentes/lovelo_black-webfont.woff2') format('woff2'),
  url('/fuentes/lovelo_black-webfont.woff') format('woff'),
  url('/fuentes/lovelo_black-webfont.ttf') format('truetype'),
  url('/fuentes/lovelo_black-webfont.svg#loveloblack') format('svg');
  font-weight: normal;
  font-style: normal;
}

Where loveloblack, It will be replaced by the name we want to give to the source.

And the src: url, they must be replaced by the path where we have hosted the files. In our example, folder “source” in the root of WordPress.

It is also very important, we insist, that we look at the FTP server, at least, the referenced formats have been uploaded: eot, woff, truetype, svg.

Now it only remains to use it. For example, if we want to assign it to the titles:

h1, h2, h3, h4{
  font-family: 'loveloblack'; 
}

And if the titles were already assigned a different source, or we looked for the line and replaced it, or we added ! important To give priority to our modification:

h1, h2, h3, h4{
  font-family: 'loveloblack'!important; 
}

What we are going to do is, in essence, add the external call from a source to WordPress execution. That is, as if we were editing the HTML code of the web to add a <link rel = “stylesheet “ href = ” ” >, but well done.

1st:- Access via FTP and look for the file functions.php of our active theme.

2nd :- We edit it, or better yet, create a child theme, and add the following function:

function load_fonts() {
  wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Unna:700');
  wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts', 'load_fonts');

Where the URL corresponds to the URL of the source we want to insert, provided by Google Fonts.

Just save it and go!

• MyFonts
• dafonts
• Font Squirrel
• fonts
• 1001freefonts
• Google Web Fonts

Do you know any more that you think we should add? Share it with us in the comments!