Elementor custom font not applying

If you are using Elementor and have added a custom font to your website, but it is not being applied correctly, there are a few steps you can take to troubleshoot and resolve the issue.

First, make sure that you have properly registered the custom font in your WordPress theme or plugin. You can use the wp_enqueue_style() function to enqueue the CSS file that contains the font. Here’s an example:

function wpsnippets_enqueue_custom_font() {
    wp_enqueue_style( 'custom-font', get_template_directory_uri() . '/path/to/custom-font.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_font' );

Replace 'custom-font' with a unique handle for your font, and 'path/to/custom-font.css' with the actual path to your CSS file.

Next, check if the font is being loaded correctly by inspecting the page source code. Look for the <link> tag that references your custom font CSS file. Ensure that the path is correct and that the file is accessible.

If the font is being loaded correctly but still not applied, it’s possible that the font selector in Elementor is not targeting the correct element. You can use custom CSS to explicitly apply the font to the desired element. Here’s an example:

.elementor-widget-heading h2 {
    font-family: 'Custom Font', sans-serif;
}

Replace .elementor-widget-heading h2 with the appropriate CSS selector for the element you want to apply the font to, and 'Custom Font' with the name of your custom font.

By following these steps, you should be able to troubleshoot and resolve the issue of Elementor custom font not applying.

Examples

Example 1: Enqueue Custom Fonts in Elementor

This example demonstrates how to enqueue custom fonts in Elementor using the elementor/frontend/after_enqueue_styles action hook. The code snippet registers a custom font and adds it to the list of available fonts in Elementor.

function wpsnippets_enqueue_custom_font() {
    wp_enqueue_style( 'custom-font', get_template_directory_uri() . '/fonts/custom-font.css', array(), '1.0' );
}
add_action( 'elementor/frontend/after_enqueue_styles', 'wpsnippets_enqueue_custom_font' );

Explanation: The wpsnippets_enqueue_custom_font function uses the wp_enqueue_style function to enqueue a custom font CSS file. The file path is specified using the get_template_directory_uri function, and the version number is set to ‘1.0’. The elementor/frontend/after_enqueue_styles action hook ensures that the font is loaded after Elementor’s default styles.

Example 2: Apply Custom Font to Elementor Heading Widget

This example demonstrates how to apply a custom font to the Elementor Heading widget using the elementor/widget/print_template filter hook. The code snippet modifies the widget’s HTML output to include the custom font class.

function wpsnippets_apply_custom_font( $template, $widget ) {
    if ( 'heading' === $widget->get_name() ) {
        $settings = $widget->get_settings();
        $custom_font = isset( $settings['custom_font'] ) ? $settings['custom_font'] : '';

        if ( ! empty( $custom_font ) ) {
            $template = str_replace( 'elementor-heading-title', 'elementor-heading-title custom-font', $template );
        }
    }

    return $template;
}
add_filter( 'elementor/widget/print_template', 'wpsnippets_apply_custom_font', 10, 2 );

Explanation: The wpsnippets_apply_custom_font function checks if the current widget is a Heading widget and retrieves the custom font setting from the widget’s settings. If a custom font is selected, the function modifies the widget’s HTML output by adding the custom-font class to the heading title element. The modified template is then returned.

Example 3: Override Elementor Default Fonts

This example demonstrates how to override the default fonts used by Elementor by modifying the elementor/fonts/print_fonts filter hook. The code snippet replaces the default font URLs with custom font URLs.

function wpsnippets_override_elementor_fonts( $fonts ) {
    $fonts['google'][] = array(
        'family' => 'Custom Font',
        'variants' => array( 'regular', '700' ),
        'subsets' => array( 'latin', 'latin-ext' ),
        'url' => 'https://fonts.googleapis.com/css2?family=Custom+Font:wght@400;700&display=swap',
    );

    return $fonts;
}
add_filter( 'elementor/fonts/print_fonts', 'wpsnippets_override_elementor_fonts' );

Explanation: The wpsnippets_override_elementor_fonts function adds a custom font to the list of Google fonts used by Elementor. The font family, variants, subsets, and URL are specified in the function. The modified fonts array is then returned, overriding the default fonts used by Elementor.