Elementor font size not changing

If you’re using Elementor and experiencing issues with font sizes not changing as expected, there are a few possible reasons for this. One common reason is that the font size is being overridden by the theme’s CSS or other stylesheets. To ensure that your font size changes are applied correctly, you can use custom CSS code within Elementor to override any conflicting styles.

Here’s an example of how you can use custom CSS code in Elementor to change the font size:

/* Increase the font size of a specific element */
.elementor-element .your-element-class {
    font-size: 20px;
}

In the code snippet above, you need to replace .your-element-class with the actual CSS class or ID of the element you want to modify. You can find the CSS class or ID by inspecting the element using your browser’s developer tools.

Once you have identified the correct CSS class or ID, you can add the code snippet to Elementor by following these steps:

1. Edit the page or template where you want to change the font size.
2. Select the element you want to modify.
3. In the Elementor settings panel, go to the Advanced tab.
4. Scroll down to the Custom CSS section.
5. Paste the CSS code snippet into the Custom CSS field.
6. Click the Publish or Update button to save your changes.

By using this custom CSS code, you can override any conflicting font size styles and ensure that your desired font size is applied correctly within Elementor.

Note: If you’re not comfortable with writing CSS code, you can also use the Elementor Pro version, which provides a user-friendly interface for changing font sizes without the need for custom code.

Examples

Example #1: Changing the font size using Elementor’s built-in settings

This example demonstrates how to change the font size of an Elementor element using the built-in settings provided by Elementor.

add_action( 'elementor/element/your_element/section_typography/before_section_end', 'wpsnippets_change_font_size' );
function wpsnippets_change_font_size( $element ) {
    $element->update_control(
        'font_size',
        [
            'default' => '20',
        ]
    );
}

In this code example, we use the elementor/element/your_element/section_typography/before_section_end action hook to modify the font size control of an Elementor element. We update the font_size control to set a default value of 20 pixels.

Example #2: Changing the font size using custom CSS

This example demonstrates how to change the font size of an Elementor element by adding custom CSS code.

add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );
function wpsnippets_enqueue_custom_css() {
    wp_add_inline_style( 'elementor-frontend', '.your-element-class { font-size: 24px; }' );
}

In this code example, we use the wp_enqueue_scripts action hook to enqueue custom CSS code. We use the wp_add_inline_style function to add the custom CSS code that targets the desired Elementor element by its class and sets the font size to 24 pixels.

Example #3: Changing the font size using custom JavaScript

This example demonstrates how to change the font size of an Elementor element using custom JavaScript code.

add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_js' );
function wpsnippets_enqueue_custom_js() {
    wp_enqueue_script( 'wpsnippets-custom-js', get_stylesheet_directory_uri() . '/custom.js', array( 'jquery' ), '1.0', true );
}

In this code example, we use the wp_enqueue_scripts action hook to enqueue a custom JavaScript file. The custom JavaScript file (custom.js) should contain the code to target the desired Elementor element and change its font size.