In this article we're going to discuss how to add custom fonts to Elementor. There are a couple of methods to do this, each with their own pros and cons. In this article we're going to discuss the three of the most popular ways of adding custom font files.

Why Add custom fonts to Elementor?

Using a custom font on your WordPress website makes it stand out from competition. Elementor, as well as many other page builders include Google Fonts as a standard list of options that can be implemented on the website. Google Fonts are extremely easy to add to your website, and because of that most use them. If you're a consumer who frequently browses the web, it's very easy to see which site uses Google Fonts, and which site uses custom fonts.

Because of that, we like making our websites, as well as our client websites stand out from the pack. We do this by adding custom fonts to WordPress and Elementor.

Custom fonts typically come in zip file downloads, which you then extract and gain access to define files. there are multiple file formats that fonts come in, ranging from woff to otf. We recommending uploading as many different file formats as possible for maximum browser compatibility. If you only have one font file format, we recommend generating a .TTF and a .woff2 from it. (We use this online tool). these are the files that you will add to your website and use for your custom fonts.

See Also: https://isotropic.co/how-to-preload-elementor-fonts/

Method One: Elementor Native Interface

Elementor comes with a custom fonts integration page built in. Using it is fairly simple, first access it by going to Elementor >> Custom Fonts.

On that page, click the add new button . You will be presented with an interface where you can upload your custom font files.

First, give your font family a name. Then select the weight and style of the font. From that, upload your font files. You have multiple choices, though we recommend uploading a .TTF and a .WOFF2. If you have multiple font variations, simply click the add font variation button, and upload another weight of that font.

Once all the files are uploaded, click the blue publish button, and you will be able to access your new font from the Elementor editor.

We like this method because it is quick, easy, and the native way to add custom fonts to Elementor. However, it could be limited in some use cases, and it only works if Elementor remains installed on your website. If you're worried about these, we recommend using the second method in this article.

Method Two: Custom Fonts

You can easily add custom fonts to Elementor using a plugin titled (you guessed it) Custom Fonts.

This plugin officially integrates with Elementor, Though it also works throughout WordPress. Because it's not a part of Elementor, even if Elementor is uninstalled from the website, your custom fonts will continue to be applied.

You can also use custom CSS to apply the font specifying it like so:

element {
Font-family: “your-custom-font”
}Code language: CSS (css)

Adding the font itself is very simple and easy. All you need to do is click add new font, give it a name, and upload the font files. This plugin then generates and applies a @font-face rule to your WordPress website, as well as adding the font name to an easily accessible area in the Elementor typography settings.

This plugin is actually our preferred way to add custom fonts to WordPress. Because it integrates with Elementor, we will also typically use this instead of the native interface. The one drawback of this plugin is the fact that it doesn't support multiple weights of font in one go. Instead you need to name different variations of the font like so:

• Font Normal
• Font Bold

This doesn't impact us a lot, as we typically only use three variations of the font, but it may be a deal breaker for you. If it is, use method one or method three.

Method Three: Font Face

If you don't want to use any plugins, you can simply add a custom font to your WordPress website using fontface. This is actually what the other two methods do, but they just give you a graphical user interface.

when adding font phase to a WordPress website, you need to generate a pack, install it on your server, and then apply it via CSS. This is the most bare bones method, causes the least bloat, but doesn't fully integrate with Elementor. If you want to use this method with Elementor, you'll need to use CSS to apply styling to the font.

On the website, you use CSS to install a font, and apply it to specific elements.

Installed like so:

@font-face {
  font-family: your-custom-font;
  src: url(your-custom-font.ttf);
}Code language: CSS (css)

Font family is the name of the font, scr is where the font file is located on your server.

You can also use this online tool to automate the process of creating a @font-face installation: https://www.fontsquirrel.com/tools/webfont-generator

You can get the font onto your server by uploading it in the media library and copying the URL location. You can also do this via FTP, uploading it to the uploads folder or WP content folder.

You then apply the font via CSS:

element {
Font-family: “your-custom-font”
}Code language: CSS (css)

With Elementor, you can do this in the custom CSS section under advanced settings. We recommend doing this on a page level. You can also apply global fonts to Elementor by using the general CSS (appearance -> customize).

Conclusion

This article should have provided you with three actionable ways to add a custom font to Elementor. Adding a custom font is extremely important as it differentiates your website from other competitors. As always, if you have any questions about how to do this, leave a question in the comments section.