How to Set Up Global Fonts and Fluid Typography in Elementor

Typography carries most of your website. Visitors may glance at images, but they read your headings, scan your paragraphs, and click your buttons. If the type feels inconsistent, a page looks unfinished no matter how nice the photos are.

The classic Elementor mistake is styling text element by element: 42 pixels here, 40 pixels there, a slightly different font weight on one page. In this tutorial you will set up a proper typography system in Elementor, with global fonts, a clear type scale, reusable typography classes, and fluid sizes that adapt smoothly from phone to desktop.

Step 1: Choose Two Fonts and Stop There

Most professional websites use one or two typefaces. A common pairing is:

• A heading font with personality, such as Poppins, Playfair Display, or Space Grotesk.
• A body font built for reading, such as Inter, Source Sans 3, or Roboto.

Using a single family with different weights also works beautifully and loads faster. What you want to avoid is three or four families competing for attention.

Step 2: Set Global Fonts for Classic Widgets

If your site still uses classic widgets, start with Site Settings > Global Fonts. Elementor provides four default slots:

• Primary for main headings.
• Secondary for subheadings.
• Text for body copy.
• Accent for buttons and small highlights.

You can add custom global fonts too, for example "Eyebrow" for small uppercase labels above headings. Then, when styling a widget, click the globe icon next to Typography and choose a global font instead of setting values manually.

Step 3: Build Typography Classes for Atomic Elements

With the Atomic Editor, the cleanest approach is a set of Classes combined with Variables:

1. Create font variables, for example font-heading and font-body.
2. Select an atomic Heading and create a class such as text-h1.
3. In that class, set the font family to the font-heading variable, then define size, weight, line height, and letter spacing.
4. Repeat for text-h2, text-h3, text-body, text-small, and text-eyebrow.

Now every heading on your site uses one of a handful of classes. Change text-h2 once and every H2-styled heading updates. Elementor can also sync typography classes to the classic Global Fonts, which keeps mixed pages consistent.

Step 4: Use a Type Scale

Random sizes make a page look messy. A type scale picks sizes that relate to each other, often by multiplying with a fixed ratio. Here is a practical scale with a base of 16 pixels:

Class	Mobile	Desktop	Line height
text-h1	36px	56px	1.1
text-h2	28px	40px	1.2
text-h3	22px	28px	1.3
text-body	16px	18px	1.6
text-small	14px	14px	1.5

Notice the pattern: headings get tighter line heights, while body text gets more breathing room for comfortable reading.

Step 5: Make Sizes Fluid with clamp()

The traditional approach sets one size for desktop, another for tablet, and another for mobile. It works, but sizes jump abruptly at each breakpoint. Fluid typography scales smoothly with the screen width instead.

The CSS function behind it is clamp(minimum, preferred, maximum). For example:

clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem)

This means: never smaller than 2.25rem (36px), never larger than 3.5rem (56px), and in between, grow with the viewport width. Elementor's size controls let you switch the unit to Custom and paste a value like this directly into the font size field.

A few tips:

• Use fluid sizes for headings, where the size difference between phone and desktop is large.
• Keep body text simpler, such as 16px on mobile and 18px on desktop.
• If you have Elementor Pro, store fluid values in Size variables so you can reuse them in several classes.
• Use an online clamp calculator to generate values from your minimum and maximum sizes.

Step 6: Fine-Tune Readability

Size is only part of good typography:

• Line length: aim for roughly 60 to 75 characters per line in paragraphs. Set a maximum width on text containers rather than letting text run across the full screen.
• Contrast: dark gray text on white is often more comfortable than pure black, but keep enough contrast to pass accessibility checks.
• Weight: use regular weight for body text and reserve bold for emphasis and headings.
• Letter spacing: large headings often look better slightly tighter, while small uppercase labels need a bit of extra spacing.

Step 7: Keep Fonts Fast

Every font weight is a separate file. A typography system can slow your site if you are not careful:

• Load only the weights you actually use, typically regular, medium or semibold, and bold.
• Consider hosting Google Fonts locally, which Elementor supports, for better privacy and fewer external requests.
• Prefer variable fonts when available, since one file can cover many weights.

Semantic Tags Versus Visual Style

Remember that the HTML tag and the visual style are separate decisions. A heading can be an H2 for SEO and structure, but use the text-h3 class because it sits in a small card. Choose the tag based on the document outline, and the class based on how it should look.

Common Mistakes

• Setting font sizes directly on elements instead of using classes or global fonts.
• Using too many sizes. If two sizes are only two pixels apart, merge them.
• Forgetting to check tablet, where text often looks oversized.
• Loading six font weights and using only two.

Wrapping Up

A typography system takes an hour to set up and saves days later. Pick two fonts, define a small scale, wrap it in classes and variables, and let fluid sizing handle the in-between screens. Your pages will look more polished, and future redesigns will be a matter of changing a few values instead of hundreds.