V4 Extentions Custom Fonts (V4) Estimated reading: 5 minutes 16 views Use your own brand fonts on your site. Upload a font file, give it a name, and it shows up in the Elementor font list, right next to the usual fonts. No code needed. EXTENSION Custom Fonts FILES WOFF, WOFF2, TTF, OTF, EOT PLAN Free A QUICK LOOK What You Will Build A heading in a font that is not on Google Fonts or your theme. Here it is Pacifico, uploaded as a TTF file and picked from the Elementor font list. A heading using a custom font that was uploaded BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: You need a font file. Check the license of the font, so you are allowed to use it on a website. Many free fonts from Google Fonts can be downloaded and used this way. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Add a New Font In your WordPress Dashboard, go to Animation Addon > Custom Fonts. Then click Add New Font. Type the font name in the title box, for example Pacifico. This is the name you will pick later in Elementor. Under Font Variant 1, choose the Font Weight, for example 400 Regular. Choose the Style: Normal, Italic or Oblique. Click Upload next to the file type you have: WOFF, WOFF2, TTF, OTF or EOT. Pick the font file in the Media Library, or upload it, and click Insert into post. Click Publish. Title (1), the live preview (2), Font Weight (3), the font file (4), Add New (5), Enable For Global (6) and Update (7) (click to zoom) Tip: The preview box shows The quick brown fox jumps over the lazy dog in your font. If it looks right there, the file works. Note: Click Publish, not only Save Draft. A font that is still a draft does not show up in Elementor. STEP 2 Add More Weights and Styles (Optional) A font family often comes in several weights, like Regular, Bold and Italic. Add them all under the same name. Click Add New under the variant. A new Font Variant 2 appears. Choose its Font Weight and Style, and upload its file. Use the trash icon to delete a variant you do not need. Tip: Use WOFF2 when you can. It is small and fast. You can add WOFF as well, for older browsers. STEP 3 Choose When the Font Loads Look at Enable For Global in the Settings box. Keep it off (default) to load the font only on pages that use it. This keeps your site fast. Switch it on to load the font on every page of your site. Tip: Leave it off unless you need the font everywhere, for example in your header on every page. STEP 4 Use the Font in Elementor Open a page in the Elementor Editor and select a heading or a paragraph. Open the Style tab, then Typography. Click the Font family box. Type the first letters of your font name, for example Pacif. Your font is listed under the group animation-addon. Click it. Click Update to save your page. The search box (1) and your font under animation-addon (2) (click to zoom) Tip: Set the Font weight to one that you added. If your font has only 400 Regular, choose 400. Otherwise the browser has to guess the weight. RESULT Final Result The heading in Pacifico, on your live page. The custom font on a live page SETTINGS Options Font name (title) The name that shows in the Elementor font list. Font Weight Default: 100100 to 900, like 400 Regular or 700 Bold. Style Default: NormalNormal, Italic or Oblique. Font files WOFF, WOFF2, TTF, OTF or EOT. You need at least one. Enable For Global Default: OffLoads the font on every page. GOOD TO KNOW More Details Loads only when used With Enable For Global off, the font file is loaded only on pages that use the font. Swap while loading Text shows right away in a normal font, then switches to your font when it is ready. Many fonts Add as many fonts as you like. Each font is one entry in the list. HELP Troubleshooting My font is not in the Elementor list Check that the font is Published in Animation Addon > Custom Fonts, then reload the editor. Look under the group animation-addon, or search for the name. The font shows in the list but the heading looks plain Click the heading, open Style > Typography and make sure the Font weight matches a weight you uploaded. Then check your live page, because the editor can show a fallback font while it loads. I cannot upload a font file Use one of these file types: WOFF, WOFF2, TTF, OTF or EOT. If the file is rejected, ask your host to allow font files. The preview box shows a plain font The file may be broken, or it is not a real font file. Upload it again, or try another file type. You Did It Your site now speaks in your own typeface. If you face any problem, please contact our support team. We are happy to help.
