.elementor-4055 .elementor-element.elementor-element-ef8e9c3{--display:flex;--min-height:1440px;}.elementor-4055 .elementor-element.elementor-element-0ff564a{--spacer-size:50px;}/* Start custom CSS for html, class: .elementor-element-3f9a75a */ Font Override for Elementor

Font Override for Elementor

This code will help you override Elementor's font settings to use Roboto for all text and Anaheim for headers.

Implementation Instructions

To use this font override on your Elementor-based website:

  1. Add the Google Fonts link in your HTML head section
  2. Add the CSS rules to your theme's Custom CSS area or in a custom CSS plugin
  3. For maximum effectiveness, also add the JavaScript code to your site

Font Demonstration

Anaheim Header Font (H1)

Anaheim Header Font (H2)

Anaheim Header Font (H3)

Roboto Body Font - Regular

Roboto Body Font - Bold

Roboto Body Font - Italic

CSS Code for Font Override


/* Add Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anaheim:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Base font styles */
body {
    font-family: 'Roboto', sans-serif !important;
}

/* Header styles */
h1, h2, h3, h4, h5, h6, 
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
[class*="elementor-size-"] {
    font-family: 'Anaheim', sans-serif !important;
}

/* Additional Elementor-specific .elementor-4055 .elementor-element.elementor-element-3f9a75as */
.elementor-widget-container, 
.elementor-text-editor, 
.elementor-button, 
.elementor-tab-title,
.elementor-accordion-title,
.elementor-icon-box-description,
.elementor-testimonial-content,
.elementor-post-excerpt {
    font-family: 'Roboto', sans-serif !important;
}

JavaScript for Persistent Override


// Function to apply font overrides
function applyFontOverrides() {
    // Apply to body
    document.body.style.fontFamily = "'Roboto', sans-serif";
    
    // Apply to all headings
    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headings.forEach(heading => {
        heading.style.fontFamily = "'Anaheim', sans-serif";
    });
    
    // Apply to Elementor-specific elements
    const elementorElements = document.querySelectorAll(`
        .elementor-heading-title,
        .elementor-widget-heading .elementor-heading-title,
        [class*="elementor-size-"],
        .elementor-widget-container, 
        .elementor-text-editor, 
        .elementor-button, 
        .elementor-tab-title,
        .elementor-accordion-title,
        .elementor-icon-box-description,
        .elementor-testimonial-content,
        .elementor-post-excerpt
    `);
    
    elementorElements.forEach(el => {
        if (el.classList.contains('elementor-heading-title') || 
            el.classList.contains('elementor-widget-heading') ||
            el.matches('[class*="elementor-size-"]')) {
            el.style.fontFamily = "'Anaheim', sans-serif";
        } else {
            el.style.fontFamily = "'Roboto', sans-serif";
        }
    });
}

// Run on page load
document.addEventListener('DOMContentLoaded', applyFontOverrides);

// Run after Elementor actions (if Elementor is used)
if (typeof elementor !== 'undefined') {
    elementor.hooks.addAction('frontend/element_ready/widget', applyFontOverrides);
}

// Optional: Use MutationObserver to watch for dynamic changes
const observer = new MutationObserver(applyFontOverrides);
observer.observe(document.body, { 
    childList: true, 
    subtree: true 
});

Important Note

Using !important in CSS is necessary to override Elementor's styles, but it should be used judiciously. The JavaScript provides a more dynamic approach that will work even when Elementor modifies styles after page load.

/* End custom CSS */