When building a website with WordPress, many people will use both the Elementor respond in singing Gutenberg Editor. Both have their advantages, but sometimes you can run into font style conflicts. For example, if you set fonts in Elementor, but in the content you edit with Gutenberg, these font settings don't work and it looks like they are overridden by Gutenberg's default styles. This article explains why this is the case, and shares a few practical solutions to make it easier for you to get your fonts aligned.

Why are Elementor's font settings overridden by Gutenberg styles?

The Gutenberg editor comes with a default set of style specifications, especially for elements such as paragraphs, headings, and lists, with built-in CSS rules for fonts, font sizes, line heights, and so on. These rules tend to have a higher priority and are written directly in the Gutenberg style file. Even though Elementor sets fonts globally on the page, the Gutenberg The content blocks themselves come with mandatory styling, causing the font adjustments you make in Elementor to look ineffective.

In a nutshell.Style Conflictsrespond in singingprioritizationGutenberg added default font styles to content blocks, overriding the fonts set by Elementor.

Solution 1: Add Custom CSS to Gutenberg Content Blocks

The most direct way to do this is to write someCustom CSS, increase the selector priority to allow Elementor's font styles to take effect.

• Go to "wordpress appearance" → "customize". This will open the theme customizer.

• Find the "Extra CSS" or "Custom CSS" option. Most themes support adding extra CSS code here.

• Copy and paste the following code into the CSS edit box

.entry-content p,
.entry-content h1, .
.entry-content h2, .
.entry-content h3, .
.entry-content h4, .
.entry-content h5, .entry-content h6 { .entry-content h7, .entry-content h8
.entry-content h6 {
  font-family: 'Your font name', sans-serif !important;
}

here are .entry-content is the name of the main container class for many theme content areas, which can be adjusted to your theme.!important Used to prioritize and ensure that the font settings override the Gutenberg defaults.

Solution 2: Adjustment via global CSS in Elementor

If you're used to using Elementor to control fonts in a uniform way, you can also take advantage of Elementor's globalCustom CSS(Required) Elementor Pro):

• Open the WordPress backend and go to Elementor → Customize Code → Add Code

• Add the following code to the custom CSS input box

selector p,
selector h1,
selector h2,
selector h2, selector h3,
selector h3, selector h4,
selector h4, selector h5, selector h6 {
selector h6 {
  font-family: 'The name of your font', sans-serif !important;
}

here are selector It will automatically be positioned in the currently edited area. Remember to add the font setting in the Elementor theme style to the!importantto avoid being overwritten by other styles.

Solution 3: Disable Gutenberg's own styles

If you don't rely much on Gutenberg default styling, you can also choose to turn it off. It is possible to disable Gutenberg's front-end styling loading through a theme or plugin, for example:

• Go to the WordPress backend and select "Appearance" → "Theme File Editor".

• Open the theme's functions.php file

• Add the following code to the end of the file

function disable_gutenberg_frontend_styles() {
    wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'disable_gutenberg_frontend_styles', 100 ); }

However, this should be done with care and may affect the style performance of other blocks. It is recommended to firstbacking up, test and reuse.

Solution 4: Prioritize content creation with Elementor

If your site has high visual style requirements and font uniformity is important, consider using Elementor for content on more pages or articles than Gutenberg.This way, font styles and layouts are in the Elementor The settings are set directly in the

wrap-up

Inconsistent font styles are usually due to Gutenberg's own CSS having a high priority and overriding Elementor settings. Solve this problem by increasing the priority with custom CSS, or turning off Gutenberg styles, or even reducing the use of Gutenberg content. With these methods in hand, your website fonts will be consistent and look more professional and uniform.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off