How to Add Custom Fonts in Elementor (Upload or Google Fonts Locally)

Fonts shape how a brand feels. If your logo uses a specific typeface, using the same one on your website makes everything consistent. Here is how to add custom fonts in Elementor and keep them fast.

Step 1: Check the licence and format

• Make sure the font licence allows web use.
• Get WOFF2 files (convert TTF or OTF files with a font converter if your licence permits).
• Only include the weights you use, for example Regular 400 and Bold 700.

Step 2: Upload the font (Elementor Pro)

1. Go to Elementor > Custom Fonts > Add New.
2. Enter the font name.
3. Click Add Font Variation, choose the weight and style, and upload the WOFF2 file.
4. Repeat for each weight, then publish.

Step 3: Set it as a global font

Open any page in Elementor, go to Site Settings > Global Fonts, and set your custom font for Primary (headings), Secondary, Text and Accent. Every widget using global fonts updates at once. Also check Site Settings > Typography for body and heading defaults.

Using Google Fonts? Load them locally

Go to Elementor > Settings > Advanced (or the Performance/Features screen in your version) and enable Load Google Fonts Locally. Elementor downloads the fonts to your server instead of calling Google each time.

Speed tips

• Limit to two families and three or four weights in total.
• Use font-display: swap so text shows immediately (Elementor's Google Fonts setting has a "Swap" option).
• Avoid uploading the same font in a theme setting and Elementor; it loads twice.

More design control: adding custom CSS in Elementor.