The use of a font is crucial enough in the context of web design. A font can represent your brand. That is why Coca Cola never changed the base of its font on its logo. Elementor allows you to use your own font although the page builder itself already provides a bunch of font families.
Elementor offers you about 800 different fonts you can choose from. Also, you can integrate Elementor with Adobe Fonts to give you more font options. As a professional designer, you might want to use a completely different font by creating one yourself.
Follow the steps below to install a new font in Elementor.
Step One: Prepare Your Font
Before installing a new font on Elementor, you definitely need to prepare your font first. If you want to create a new font, that’s great. There are also some websites you can rely on to download new fonts.
Elementor itself supports the following font formats:
- WOFF
- WOFF2
- TTF
- SVG
- EOT
Step Two: Upload Your Font
Once you are done creating your new font, login to your WordPress dashboard and go to Elementor -> Custom Fonts.
On the Custom Fonts page, click the Add New button.
Give your new font a name and click the ADD FONT VARIATION button to select the font file from your computer. Click the UPLOAD button on the font format option to select a font from your computer.
Some fonts use different files for different styles (i.e bold, italic, and regular). If your font uses different files as well, make sure to upload all of the files. You can repeat the steps above (starting from clicking the ADD FONT VARIATION button) to upload other font files.
Click the Publish button on the upper-right corner to make your new font available on the typography settings in Elementor.
Elementor places the custom fonts on the top section on the typography control.
The Bottom Line
Elementor has a feature that allows you to add a custom font on your website. The feature is great if you want to use your own font your design. Before adding a new font, you can remove the Google Fonts integration so that Elementor won’t load fonts from Google Fonts. It can help streamline your design process.
Using a local font is also good for site performance as the font is loaded from your own server, so there is no extra HTML request is made to a third-party service.
