Custom Font Elementor Code

April 10, 2025 · AI Conversations

User

add custom font in elementor using code

Assistant

To add a **custom font in Elementor using code** (without using Elementor Pro or uploading it via the UI), you can do it by registering the font manually in your WordPress theme or child theme. Here’s how:

—

### ✅ Step-by-step: Add Custom Font via Code in Elementor

#### 1. **Place Font Files in Your Theme Folder**

Create a folder inside your theme or child theme:

/wp-content/themes/your-theme/fonts/

Place your font files there (e.g. `.woff`, `.woff2`, `.ttf`).

—

#### 2. **Add `@font-face` in Your CSS**

In your `style.css` (or enqueue a new CSS file), add:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Make sure the file paths are correct relative to your theme directory.

—

#### 3. **Enqueue the CSS in `functions.php`**

In your theme’s `functions.php` file, enqueue the stylesheet:

function enqueue_custom_fonts() {
    wp_enqueue_style(
        'custom-fonts',
        get_stylesheet_directory_uri() . '/style.css', // Or point to your custom font CSS
        [],
        null
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

—

#### 4. **Use the Font in Elementor (via Custom Class)**

In Elementor:

– Add a widget (e.g. Heading, Text).
– Go to **Advanced → Custom CSS** (Elementor Pro) or add a class via **Advanced → CSS Classes**.
– Example if you added a class `my-custom-font`:

.my-custom-font {
    font-family: 'MyCustomFont', sans-serif;
}

Or apply inline styles using a custom class from Appearance > Customize > Additional CSS if you're not using Pro.

—

### 🎯 Optional: Register Font for Use in Elementor Dropdown (Advanced)

If you want to add it to Elementor's typography dropdown (Pro only), you’d need to hook into Elementor controls with something like:

add_filter( 'elementor/fonts/groups', function( $groups ) {
    $groups['custom_fonts'] = __( 'Custom Fonts', 'your-textdomain' );
    return $groups;
});

add_filter( 'elementor/fonts/additional_fonts', function( $fonts ) {
    $fonts['MyCustomFont'] = 'custom_fonts';
    return $fonts;
});

> 📝 Note: This only works in Elementor Pro as it allows access to those filters.

—

Let me know if you want a version using Google Fonts or want to enqueue fonts via a CDN instead.

User

How to add font src

Assistant

To **add `src` for a custom font** in CSS using `@font-face`, you need to define the file path and format of your font files. Here's the syntax:

—

### ✅ Basic `@font-face` with `src`

@font-face {
    font-family: 'MyCustomFont';
    src: url('/wp-content/themes/your-theme/fonts/MyCustomFont.woff2') format('woff2'),
         url('/wp-content/themes/your-theme/fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

—

### 🔍 Explanation

—

### 📁 Example Font Folder Structure

If your theme folder is:

/wp-content/themes/my-theme/

Then put fonts here:

/wp-content/themes/my-theme/fonts/MyCustomFont.woff2

Use relative paths when including from inside the theme, like:

src: url('fonts/MyCustomFont.woff2') format('woff2');

Or absolute if needed:

src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/MyCustomFont.woff2') format('woff2');

(if you’re injecting it via PHP).

—

Let me know if you want to add multiple font weights (like bold or italic), or support for `eot`, `ttf`, etc.

User

add_filter( 'elementor/fonts/groups', function( $groups ) {
$groups['custom_fonts'] = __( 'Custom Fonts', 'your-textdomain' );
return $groups;
});

add_filter( 'elementor/fonts/additional_fonts', function( $fonts ) {
$fonts['MyCustomFont'] = 'custom_fonts';
return $fonts;
});

Assistant

Your code snippet is **almost perfect** for registering a **custom font in Elementor Pro** so it appears in the **typography font family dropdown**.

Here’s a cleaned-up and complete version with explanation:

—

### ✅ Final Working Code (Add to `functions.php`)

// Add a new font group called "Custom Fonts"
add_filter( 'elementor/fonts/groups', function( $groups ) {
    $groups['custom_fonts'] = __( 'Custom Fonts', 'your-textdomain' );
    return $groups;
});

// Register your custom font under that group
add_filter( 'elementor/fonts/additional_fonts', function( $fonts ) {
    $fonts['MyCustomFont'] = 'custom_fonts'; // 'MyCustomFont' is the font-family name you used in @font-face
    return $fonts;
});

—

### 💡 Notes

– Replace `'MyCustomFont'` with the name you declared in your `@font-face` CSS.
– This font should already be loaded in the frontend, either:
– Via `@font-face` in your CSS
– Or enqueued via `wp_enqueue_style()`

—

### 📂 Example CSS (also needed)

Make sure you also have this in your `style.css` or enqueued file:

@font-face {
    font-family: 'MyCustomFont';
    src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/MyCustomFont.woff2') format('woff2'),
         url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

(If it's a PHP file outputting CSS, otherwise use a static path if plain CSS.)

—

### 🔄 Result

– Now you’ll see `MyCustomFont` under a new "Custom Fonts" section in Elementor Pro’s **font-family** dropdown.

Let me know if you want to register different weights/styles or load it from Google Fonts/CDN instead.

User

we have plugin now register font from theri

Assistant

Great — if you have a **WordPress plugin** and want to register a **custom font for Elementor** directly from it, here's how to do it **entirely within your plugin**, including:

1. Loading the font files.
2. Defining the `@font-face` rule.
3. Registering the font in Elementor’s typography dropdown.

—

### ✅ 1. Place Font Files in Your Plugin

Structure example:

/wp-content/plugins/your-plugin/
├── fonts/
│   ├── MyCustomFont.woff2
│   └── MyCustomFont.woff
├── your-plugin.php

—

### ✅ 2. Enqueue Font CSS in Plugin

In `your-plugin.php`, add:

function myplugin_enqueue_custom_font() {
    wp_enqueue_style(
        'myplugin-custom-font',
        plugin_dir_url( __FILE__ ) . 'fonts/custom-font.css',
        [],
        null
    );
}
add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_custom_font' );

Now, create the file `fonts/custom-font.css` inside your plugin and add:

@font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.woff2') format('woff2'),
         url('MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

(You can use relative path because it’s loaded from the same folder.)

—

### ✅ 3. Register Font in Elementor Typography

Still in `your-plugin.php`, add this:

// Add a custom group
add_filter( 'elementor/fonts/groups', function( $groups ) {
    $groups['myplugin_custom_fonts'] = __( 'Plugin Custom Fonts', 'your-plugin-textdomain' );
    return $groups;
});

// Add your custom font to the group
add_filter( 'elementor/fonts/additional_fonts', function( $fonts ) {
    $fonts['MyCustomFont'] = 'myplugin_custom_fonts';
    return $fonts;
});

—

### ✅ 4. Use in Elementor

Once activated:
– You’ll find `MyCustomFont` in Elementor's typography dropdown under **Plugin Custom Fonts**
– You can apply it to any widget text

—

Let me know if you want to load multiple font weights, or if your plugin should support RTL, multilingual, etc.

User

$this->add_group_control(
ElementorGroup_Control_Typography::get_type(),
[
'name' => 'text_typography',
'selector' => '{{WRAPPER}} .variable-font-content',
'exclude' => ['font_family'],
]
);
Now I want include custom font only

Assistant

Perfect — if you're using a **custom Elementor widget** and want to:

– Use `Group_Control_Typography`
– But **limit font selection** to your **custom font only**

Then here’s how you can do it:

—

### ✅ Updated Widget Control Code

$this->add_group_control(
    ElementorGroup_Control_Typography::get_type(),
    [
        'name'     => 'text_typography',
        'selector' => '{{WRAPPER}} .variable-font-content',
        'fields_options' => [
            'typography' => [
                'default' => 'custom',
            ],
            'font_family' => [
                'default' => 'MyCustomFont',
                'options' => [
                    'MyCustomFont' => 'MyCustomFont',
                ],
            ],
        ],
    ]
);

—

### ✅ Also Required: Register the Font (Plugin or Theme)

As you've already planned, make sure you register the font in Elementor:

add_filter( 'elementor/fonts/groups', function( $groups ) {
    $groups['custom_fonts'] = __( 'Custom Fonts', 'your-plugin-textdomain' );
    return $groups;
});

add_filter( 'elementor/fonts/additional_fonts', function( $fonts ) {
    $fonts['MyCustomFont'] = 'custom_fonts';
    return $fonts;
});

And enqueue the font CSS properly (in plugin or theme):

wp_enqueue_style(
    'myplugin-custom-font',
    plugin_dir_url( __FILE__ ) . 'fonts/custom-font.css',
    [],
    null
);

With this in your `custom-font.css`:

@font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.woff2') format('woff2'),
         url('MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

—

### ✅ Final Result

– In your Elementor widget, the typography control will **only show your custom font**.
– The font will render correctly if loaded on the frontend.

Let me know if you'd also like to **hide size, weight, or transform controls**, or allow multiple custom fonts.

User

$this->add_group_control(
ElementorGroup_Control_Typography::get_type(),
[
'name' => 'text_typography',
'selector' => '{{WRAPPER}} .variable-font-content',
'fields_options' => [
'typography' => [
'default' => 'vfw_custom_fonts',
],
'font_family' => [
'default' => 'Neue Metana',
'options' => [
'Neue Metana' => 'Neue Metana',
'Compressa VF' => 'Compressa VF',
],
],
],
]
);
this showing all font I want to show my plugin custom font only

Assistant

To ensure that your Elementor widget only shows **your plugin’s custom fonts** in the `font_family` dropdown and hides **all default Elementor fonts**, you have to do two things:

—

### ✅ 1. Use `'fonts' => []` to limit font list

You need to **override** the available fonts using the `fonts` key directly in `fields_options['font_family']`.

Update your code like this:

$this->add_group_control(
    ElementorGroup_Control_Typography::get_type(),
    [
        'name'     => 'text_typography',
        'selector' => '{{WRAPPER}} .variable-font-content',
        'fields_options' => [
            'font_family' => [
                'default' => 'Neue Metana',
                'options' => [
                    'Neue Metana'   => 'Neue Metana',
                    'Compressa VF'  => 'Compressa VF',
                ],
                'fonts' => [ // 👈 This restricts font list to only these
                    'Neue Metana'   => 'Neue Metana',
                    'Compressa VF'  => 'Compressa VF',
                ],
            ],
        ],
    ]
);

This `fonts` key will **completely override Elementor’s default fonts**, showing **only your custom ones**.

—

### ✅ 2. (Optional) Register Fonts in Elementor Dropdown Globally (Pro only)

To make sure Elementor can recognize and render them globally (not just inside your control), you can also still register them:

add_filter( 'elementor/fonts/groups', function( $groups ) {
    $groups['plugin_custom_fonts'] = __( 'Plugin Custom Fonts', 'your-plugin' );
    return $groups;
});

add_filter( 'elementor/fonts/additional_fonts', function( $fonts ) {
    $fonts['Neue Metana'] = 'plugin_custom_fonts';
    $fonts['Compressa VF'] = 'plugin_custom_fonts';
    return $fonts;
});

But this step is only needed if you want them **available site-wide**, not just in your custom widget.

—

### 🧠 Pro Tip: Load the Fonts

Make sure to load the fonts from your plugin:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'my-plugin-fonts',
        plugin_dir_url(__FILE__) . 'fonts/fonts.css',
        [],
        null
    );
});

And your `fonts.css`:

@font-face {
    font-family: 'Neue Metana';
    src: url('NeueMetana.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Compressa VF';
    src: url('CompressaVF.woff2') format('woff2');
    font-display: swap;
}

—

Let me know if you want to disable font-weight or transform controls too — I can include that snippet as well.

User

still showing all fonts

Assistant

Thanks for the update — since you’re still seeing all fonts despite using `'fonts' => […]`, here's the key detail:

> ❌ **Elementor's `Group_Control_Typography` does not natively support limiting fonts using `'fonts' => […]` inside `fields_options`.**
It **still loads all fonts globally** unless you override the typography **control itself**.

—

### ✅ Workaround: Use `add_control()` Instead of `add_group_control()`

If you want **absolute control** over which fonts appear (e.g. only your plugin’s fonts), you'll need to register a **custom `select` control** manually for the font family, like this:

—

### 🔧 Replace Group Typography with Manual Font Select

$this->add_control(
    'custom_font_family',
    [
        'label' => __( 'Font Family', 'your-plugin' ),
        'type' => ElementorControls_Manager::SELECT,
        'options' => [
            'Neue Metana'   => 'Neue Metana',
            'Compressa VF'  => 'Compressa VF',
        ],
        'default' => 'Neue Metana',
        'selectors' => [
            '{{WRAPPER}} .variable-font-content' => 'font-family: {{VALUE}};',
        ],
    ]
);

Then, you can **add other typography controls individually** (like font-size, weight, etc.) as needed:

$this->add_responsive_control(
    'custom_font_size',
    [
        'label' => __( 'Font Size', 'your-plugin' ),
        'type' => ElementorControls_Manager::SLIDER,
        'size_units' => [ 'px', 'em', 'rem' ],
        'range' => [
            'px' => [ 'min' => 10, 'max' => 100 ],
        ],
        'selectors' => [
            '{{WRAPPER}} .variable-font-content' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
    ]
);

—

### ✅ Why This Works

Using `add_control()` for font-family gives you **100% control** over the font options — no interference from Elementor’s global font list.

—

### 📝 Summary

| Method | Fonts Filtered | Easy to Maintain |
|—————————|—————-|——————|
| `add_group_control` | ❌ No | ✅ Yes |
| `add_control` (manual) | ✅ Yes | ⚠️ More work |

—

Let me know if you want a reusable trait or helper class to make this process cleaner.

User

free varialvle font examples

Assistant

Here are some great **free variable fonts** you can use in your projects — these support multiple weights, widths, and sometimes slant/italic through a **single font file** (which makes them performance-friendly and super flexible):

—

### ✅ **Top Free Variable Fonts**

#### 1. **Inter**
– Designed by Rasmus Andersson
– Great for UI and modern design
– Axes: `wght`, `slnt`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Inter)

#### 2. **Roboto Flex**
– Next-gen version of Roboto
– Extremely customizable (weight, width, slant, grade, etc.)
– Axes: `wght`, `wdth`, `slnt`, `GRAD`, etc.
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Roboto+Flex)

#### 3. **Recursive**
– Display + monospace hybrid
– Axes: `wght`, `slnt`, `CASL`, `MONO`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Recursive)

#### 4. **IBM Plex Sans Variable**
– Professional look, used by IBM
– Axes: `wght`
– 🔗 [Download on GitHub](https://github.com/IBM/plex)

#### 5. **Figtree**
– Clean and readable
– Perfect for minimalist UIs and blogs
– Axes: `wght`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Figtree)

#### 6. **Lexend**
– Designed for reading fluency
– Axes: `wght`, `wdth`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Lexend)

#### 7. **Archivo Variable**
– Great for headlines and web text
– Axes: `wght`, `wdth`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Archivo)

#### 8. **Manrope**
– Modern geometric sans
– Axes: `wght`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Manrope)

#### 9. **Sora**
– Designed for DeFi apps and crypto branding
– Axes: `wght`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Sora)

#### 10. **Space Grotesk**
– Tech-oriented grotesque sans
– Axes: `wght`
– 🔗 [Download on Google Fonts](https://fonts.google.com/specimen/Space+Grotesk)

—

### 🔧 Want to Try in CSS?

Example (Inter):

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.variable-font {
    font-family: 'Inter', sans-serif;
    font-variation-settings: "wght" 600;
}

Let me know if you want local `.woff2` files, or examples of applying variable axes like `slnt`, `wdth`, `GRAD`, etc. in custom styles or Elementor.

User

download here and set with font -face

Assistant

Here's how you can **download and use a free variable font** (like **Inter**, **Roboto Flex**, or any from the list above) and set it up with `@font-face` in your plugin or theme:

—

### ✅ Step-by-Step: Download and Use Inter Variable Font

#### 1. **Download Variable Font**

Download Inter (or another font) from:
👉 [Inter Variable Font Download](https://github.com/rsms/inter/releases/latest)

– Download the `.zip`
– Inside, go to: `Inter-4.xxx/Inter Variable/`
– Get the file: `Inter.var.woff2`

Rename it for convenience:

fonts/
├── InterVariable.woff2

—

#### 2. **Add Font in `fonts.css`**

Create `fonts/fonts.css` (in your plugin or theme):

@font-face {
    font-family: 'Inter Variable';
    src: url('InterVariable.woff2') format('woff2');
    font-weight: 100 900; /* Variable weight range */
    font-display: swap;
}

—

#### 3. **Enqueue Font CSS in Plugin**

In your plugin main file:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'myplugin-variable-fonts',
        plugin_dir_url(__FILE__) . 'fonts/fonts.css',
        [],
        null
    );
});

—

#### 4. **Use in Elementor or CSS**

Now in Elementor (or your custom widget), you can use:

.variable-font-content {
    font-family: 'Inter Variable', sans-serif;
    font-variation-settings: 'wght' 600; /* Set desired weight */
}

You can animate or change weights dynamically too.

—

### ✅ Done! You now have Inter as a self-hosted variable font

Let me know if you'd like me to prepare `.woff2` files for another font (e.g. Roboto Flex, Compressa VF, or Neue Metana) — I can guide you to the exact file.

Custom Font Elementor Code

Leave a Comment Cancel