Chuyển đến nội dung chính

How to Add Custom Fonts to Elementor (and Make Sure They Display Correctly)

Typography plays a huge role in defining your website’s identity. Whether you’re building a personal brand or a client project, using a custom font can make your design stand out and strengthen your visual identity. In this guide, we’ll show you how to easily upload and manage custom fonts in Elementor — and make sure they display properly in both the editor and the frontend.

Why Use Custom Fonts?

Elementor already comes with hundreds of Google Fonts built-in. However, there are many cases when you might need to upload your own:

  • To match your company or client’s brand guidelines
  • To use premium or licensed fonts not available on Google Fonts
  • To achieve a unique design style

By uploading fonts manually, you ensure your site looks consistent everywhere — no matter which device or browser your visitors use.

How to Upload Custom Fonts in Elementor

Elementor Pro provides a simple way to add your own font files directly in the editor. Here’s how to do it step by step:

Step 1: Prepare Your Font Files

Make sure you have your font files in the following formats for best compatibility:

  • .woff (recommended)
  • .woff2
  • .ttf
  • .svg
  • .eot

Having at least .woff and .woff2 formats ensures your fonts load fast and work across all modern browsers.

Step 2: Go to Custom Fonts Settings

In your WordPress dashboard, go to:

Elementor → Custom Fonts → Add New

Give your font a name (for example, “MyBrand Sans”) and upload each weight and style (Regular, Bold, Italic, etc.) in the corresponding fields.

Step 3: Use the Font Inside the Editor

Once uploaded, your new font will appear inside the Typography panel of any Elementor widget that supports text — like Heading, Text Editor, or Button.

Select your font from the dropdown list, and Elementor will automatically apply it to your selected element.

Step 4: Verify Display on Frontend

After saving, visit the live version of your page to make sure the font is rendered correctly on the frontend. If it doesn’t appear properly, try clearing cache (browser + site), or re-upload the font with a different name.

Alternative: Use Custom CSS or @font-face

If you’re using the free version of Elementor, you can still load custom fonts manually using CSS. Here’s how:

@font-face {
  font-family: 'MyBrand Sans';
  src: url('https://yourdomain.com/fonts/MyBrandSans.woff2') format('woff2'),
       url('https://yourdomain.com/fonts/MyBrandSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Then, apply your font to specific elements via the Elementor widget’s “Advanced → Custom CSS” (available in Pro) or globally in your theme stylesheet:

body {
  font-family: 'MyBrand Sans', sans-serif;
}

Troubleshooting Common Issues

  • Font not showing in editor: try refreshing the page or reloading the editor; check browser cache.
  • Font not displaying on live site: verify the font file path is correct and accessible.
  • Performance drop: use optimized webfont formats (.woff2) and preload critical fonts.

Best Practices for Custom Fonts

  • Keep font files under 200KB for faster load times.
  • Use only the weights you actually need (don’t upload all variants).
  • Host fonts locally for better performance and privacy.
  • Always test responsiveness and cross-browser compatibility.

Wrapping Up

Adding custom fonts in Elementor helps you create a truly branded experience for your visitors. Whether you use the built-in Custom Fonts feature or the manual CSS method, always verify the display on both desktop and mobile. A consistent and well-optimized font setup can dramatically improve your site’s design and user perception.

Next up, we’ll explore how to enhance your site even more with animations and transitions — stay tuned!

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Building a Design System with Global Colors & Typography Variables in Elementor

How to Build a Design System with Global Colors and Typography Variables in Elementor Maintaining visual consistency across a website can be challenging — especially as your design grows in complexity. Fortunately, Elementor’s Global Colors and Typography Variables make it easy to keep your design system organized and consistent. In this post, you’ll learn how to create, manage, and apply global design tokens in Elementor to save time and simplify updates. What Are Global Colors and Typography Variables? Global Colors and Typography Variables are reusable design settings you can define once and use throughout your entire site. Instead of setting colors and fonts manually for every widget or section, you can assign global variables — making it simple to change your entire site’s look with just a few clicks. Global Colors: Define your brand’s palette (Primary, Secondary, Accent, etc.) and apply them site-wide. Typography Variables: Create text styles (Headings, Body, Butt...
Đăng nhận xét
Đọc thêm

Global Colors & Typography in Elementor: The Secret to Consistent Design

Global Colors & Typography in Elementor: The Secret to Consistent Design Have you ever updated a website’s color scheme, only to realize you need to change dozens of buttons and headings manually? That’s exactly why Global Colors and Global Typography exist in Elementor. They help you design faster and keep everything consistent across your entire site. What Are Global Colors and Typography? Global Colors and Typography are design settings that control how elements look site-wide. Instead of adjusting each widget’s color or font individually, you define your main styles once — and Elementor applies them everywhere. This means that if you ever want to refresh your brand colors or update your fonts, you can do it with just one click. How to Set Up Global Colors Open any page in Elementor. Click the top-left hamburger icon ☰ → select Site Settings . Go to Global Colors . Add or edit your color palette — for example: Primary, Secondary, Text, and Accent. W...
Đăng nhận xét
Đọc thêm

Using Custom Breakpoints: Make Your Elementor Designs Truly Responsive

Using Custom Breakpoints: Make Your Elementor Designs Truly Responsive In today’s world, your website isn’t just viewed on laptops — it’s seen on phones, tablets, large monitors, and even TVs. That’s why responsive design is more important than ever. Elementor makes it easy with Custom Breakpoints , giving you full control over how your site looks on any screen size. What Are Breakpoints? A breakpoint is a specific screen width at which your website layout changes to adapt to a device. For example, when the screen gets smaller, elements may stack vertically, images shrink, or font sizes adjust for better readability. Before Elementor 3.4, you only had three breakpoints: desktop, tablet, and mobile. Now, Elementor Pro lets you add Custom Breakpoints — meaning you can fine-tune designs for extra devices like large desktops or small mobile screens. How to Enable Custom Breakpoints Go to your WordPress dashboard. Navigate to Elementor → Settings → Experiments . Find ...
Đăng nhận xét
Đọc thêm