Step 1: Set Global Fonts

Go to WordPress Dashboard → Elementor → Site Settings → Global Fonts. Set your font family (for example, Inter) for Primary, Secondary, Text, and Accent. Do not set any font sizes. Save your changes.

Step 2: Set Body Text Size

In Elementor → Site Settings → Typography, set the body text size to 1.1rem and leave the line-height field empty. Do not set sizes for headings (H1–H6). Save your changes.

Step 3: Add Clamp CSS (Important)

Go to Fluent Snippets → Add New and create a CSS snippet. Name it Global Typography – Clamp, set it to run on the Frontend, then paste the code below and activate the snippet.

/* =====================================================
Global Typography – Clamp System
===================================================== */

h1{
font-size: clamp(2.3rem, 3.8vw, 3.8rem);
line-height: 1.1;
}

h2{
font-size: clamp(1.9rem, 3vw, 2.9rem);
line-height: 1.15;
}

h3{
font-size: clamp(1.6rem, 2.4vw, 2.3rem);
line-height: 1.2;
}

h4{
font-size: clamp(1.35rem, 2vw, 1.9rem);
line-height: 1.25;
}

h5{
font-size: clamp(1.15rem, 1.6vw, 1.55rem);
line-height: 1.3;
}

h6{
font-size: clamp(1.05rem, 1.3vw, 1.25rem);
line-height: 1.35;
}

body{
font-size: 1.1rem;
line-height: 1.65;
}

/* ===== Clamp Code End Here ===== */

Step 4: Use Elementor Correctly

When editing headings in Elementor, do not manually set font sizes. Use Global Typography (globe icon) or leave sizes unset so the clamp system controls responsiveness.

Step 5: Test the Result

Open any page and resize the browser or use Elementor’s device preview. Headings should scale smoothly across desktop, tablet, and mobile.