/* Regular */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-regular.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-medium.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-italic.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold-oblique.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold-oblique.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}



You said:
best way to add custom font su elementor freee

ChatGPT said:
In Elementor Free you don’t have the native Custom Fonts feature (that exists only in Elementor Pro), but there are 3 clean professional ways to add custom fonts — ordered from best → fastest → easiest.

✅ Best Method (Recommended): Load font via theme / CSS (global & performant)
This is the proper developer approach.

1️⃣ Upload your font files
Upload fonts via:

WP Admin → Media → Add New

Recommended formats:

.woff2 ✅ (best)
.woff
Example:

myfont-regular.woff2
myfont-bold.woff2
2️⃣ Add @font-face CSS
Go to:

👉 Appearance → Customize → Additional CSS

(or child theme style.css)

@font-face {
    font-family: 'MyCustomFont';
    src: url('https://yoursite.com/wp-content/uploads/2026/02/myfont-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('https://yoursite.com/wp-content/uploads/2026/02/myfont-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
3️⃣ Use it inside Elementor
Now inside Elementor:

Typography → Font Family
Just type:

MyCustomFont
✅ Elementor accepts manual font names even in Free.

✅ Method 2 — Load fonts via functions.php (cleaner for many fonts)
Best if you manage multiple sites.

Add in child theme functions.php:

function custom_fonts_enqueue() {
    wp_enqueue_style(
        'custom-fonts',
        get_stylesheet_directory_uri() . '/fonts/fonts.css',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'custom_fonts_enqueue');
Then create:

/child-theme/fonts/fonts.css
and place your @font-face there.

✅ More scalable
✅ Cleaner maintenance

✅ Method 3 — Plugin (fast but less ideal)
Install:

Custom Fonts

Use Any Font

OMG Fonts (local Google fonts)

These give UI upload + Elementor integration.

Good for non-dev workflow, but:

extra plugin

slightly heavier

⭐ Pro Tips (important)
✔ Always use WOFF2
Smaller + faster:

TTF ❌
OTF ❌
WOFF2 ✅
✔ Add fallback stack
Example:

body {
   font-family: 'MyCustomFont', Arial, sans-serif;
}
✔ Force Elementor Global Font
Elementor sometimes overrides fonts.

Go to:

Elementor → Site Settings → Typography
Set your custom font globally.

🚀 Best professional setup (what agencies do)
✅ Fonts inside child theme
✅ Enqueued via functions.php
✅ WOFF2 only
✅ font-display: swap
✅ Global Elementor typography

If you want, I can show you next:

✅ How to make Elementor dropdown show the font automatically
✅ How to preload fonts for Core Web Vitals
✅ Variable font setup (best modern method)
✅ Local Google Fonts without plugins

Just tell me 👍


You said:
Uploaded image
I have this

ChatGPT said:
Perfect 👍 — you already have the correct files (woff + woff2).
Now the goal is simply to register all weights correctly so Elementor can use them normally.

Below is the clean professional setup.

✅ 1. Upload fonts (recommended structure)
Upload them via FTP / File Manager (better than Media Library).

Create inside your child theme:

/wp-content/themes/your-child-theme/fonts/helvetica-condensed/
Put all files there.

Example:

Helvetica-Condensed-Regular.woff2
Helvetica-Condensed-Medium.woff2
Helvetica-Condensed-Bold.woff2
Helvetica-Condensed-Italic.woff2
Helvetica-Condensed-BoldOblique.woff2
👉 (Optional but recommended: remove spaces from filenames)

✅ 2. Create fonts.css
Create:

/fonts/fonts.css
Paste this (adjust paths if needed)
/* Regular */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/Helvetica-Condensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/Helvetica-Condensed-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/Helvetica-Condensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/Helvetica-Condensed-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold Italic / Oblique */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/Helvetica-Condensed-BoldOblique.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
✅ 3. Load fonts in WordPress
Add to child theme functions.php

function load_custom_fonts() {
    wp_enqueue_style(
        'custom-fonts',
        get_stylesheet_directory_uri() . '/fonts/fonts.css',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'load_custom_fonts');
✅ 4. Use inside Elementor FREE
Now open Elementor:

Typography → Font Family
Type manually:

Helvetica Condensed Custom
✅ Elementor Free accepts it
✅ Weight selector works automatically
✅ Italic works
✅ Global usage possible

✅ 5. (IMPORTANT) Set globally
Go to:

Elementor → Site Settings → Typography
Set:

Primary Font → Helvetica Condensed Custom
Now the whole site uses it.

⭐ Pro optimisation (very recommended)
Add preload for performance:

add_action('wp_head', function () {
    echo '<link rel="preload" href="' .
    get_stylesheet_directory_uri() .
    '/fonts/helvetica-condensed/Helvetica-Condensed-Regular.woff2" 
    as="font" type="font/woff2" crossorigin>';
});
✅ Result
You now have:

✅ Elementor Free custom font
✅ Proper weights
✅ Fast loading
✅ No plugin
✅ Agency-level setup

If you want next, I can show you the trick to make Elementor list the font in dropdown automatically (no typing) — most devs don’t know this one.


You said:
ok falta otra fuente

minion-pro-cond-display.woff2

ChatGPT said:
Perfect 👍
You just repeat the same structure — but since this looks like a single display font, we register it cleanly as its own family.

✅ 1. Put the font in your fonts folder
Example:

/wp-content/themes/your-child-theme/fonts/minion/
Add:

minion-pro-cond-display.woff2
✅ 2. Add it to fonts.css
Open your existing:

/fonts/fonts.css
and append this:

/* Minion Pro Condensed Display */
@font-face {
    font-family: 'Minion Pro Cond Display';
    src: url('./minion/minion-pro-cond-display.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
✅ 3. Use in Elementor Free
Inside Elementor:

Typography → Font Family
Type:

Minion Pro Cond Display
Done ✅

⭐ OPTIONAL (recommended if it's a display/title font)
Apply globally only to headings:

Go to:

Elementor → Site Settings → Typography
Set:

Headings Font → Minion Pro Cond Display
Keep body text with Helvetica Condensed.

Typical luxury setup:

Usage	Font
Headings	Minion Pro Cond Display
Body	Helvetica Condensed
Buttons	Helvetica Medium/Bold
✅ Quick check (important)
Open browser DevTools → Network → Fonts

You should see:

minion-pro-cond-display.woff2  ✅ loaded
If not loading → usually path issue.

⚠️ Small but important note
Minion Pro is an Adobe licensed font, so make sure usage rights allow web embedding.

If you want, next I can show you:

✅ how to assign fonts automatically via CSS tokens
✅ how to avoid Elementor inline font overrides
✅ perfect typography scale for high-end restaurant websites

(just tell me)


You said:
sirve la version woff?

ChatGPT said:
Sí ✅ — WOFF funciona perfectamente, pero hoy la regla profesional es:

👉 WOFF2 primero, WOFF solo como fallback

✅ Diferencia rápida
Format	Should use?	Reason
WOFF2	✅ YES (primary)	~30% smaller, faster
WOFF	✅ fallback	older browser support
TTF / OTF	❌ no	heavy
EOT	❌ obsolete	IE only
✅ Best practice (recommended setup)
If you have both, declare them like this:

@font-face {
    font-family: 'Minion Pro Cond Display';
    src:
        url('./minion/minion-pro-cond-display.woff2') format('woff2'),
        url('./minion/minion-pro-cond-display.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
What happens:
Modern browsers → load WOFF2

Older browsers → load WOFF

Automatic fallback ✅

✅ If you ONLY have WOFF
Also OK:

@font-face {
    font-family: 'Minion Pro Cond Display';
    src: url('./minion/minion-pro-cond-display.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
Nothing breaks.

⭐ Reality check (2026)
Browser support for WOFF2:

Chrome ✅

Edge ✅

Firefox ✅

Safari ✅

Mobile ✅

➡️ ~98%+ support

So honestly:

👉 WOFF2 alone is already safe
👉 Agencies still add WOFF just for legacy safety

🚀 Recommended final rule
Have WOFF2 → use it
Have WOFF2 + WOFF → use both
Only WOFF → still fine
If you want, next I can show you a very important Elementor font fix that prevents Elementor from loading Google Fonts even when disabled (huge performance win).


You said:
ok tengo la version woff

este es mi font.css

/* Add your custom styles here */


/* Regular */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/helvetica-condensed-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/helvetica-condensed-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/helvetica-condensed-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold Italic / Oblique */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src: url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold-oblique.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Minion Pro Condensed Display */
@font-face {
    font-family: 'Minion Pro Cond Display';
    src: url('./minion/minion-pro-cond-display.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

ChatGPT said:
Perfect 👍
You only need to add the WOFF fallback, without changing your structure.

I’ll show you the correct final version.

✅ Updated fonts.css (WOFF2 + WOFF fallback)
Just modify every src: like this:

✅ Helvetica Condensed
/* Regular */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-regular.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-medium.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-italic.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: 'Helvetica Condensed Custom';
    src:
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold-oblique.woff2') format('woff2'),
        url('./assets/fonts/helvetica-condensed/helvetica-condensed-bold-oblique.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
✅ Minion Pro
/* Minion Pro Condensed Display */
@font-face {
    font-family: 'Minion Pro Cond Display';
    src:
        url('./assets/fonts/minion/minion-pro-cond-display.woff2') format('woff2'),
        url('./assets/fonts/minion/minion-pro-cond-display.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


h1 { font-family: "Minion Pro Cond Display" !important; }