Fonts and CSS

  • Resolved defensiefotografie

    (@defensiefotografie)


    9 months, 2 weeks ago

    I have some difficulties adjusting h1 into an other font.
    After adjusting the font in the colormag customizer, the adjustment is cancelled by a definition for weight and size (500 amd 2.4rem). I do not know what is causing it. Do you?
    I made the adjustment in the css customizer as well, overwriting the unwanted definition. That solved it.

    At first I thought is was a caching issue. See also https://www.reddit.com/r/Wordpress/comments/1mveo87/where_are_my_css_settings_cached/
    But it seems to be the theme.

    A sample of the css as seen by Inspector in Chrome.

    h1.cm-entry-title { <—- through css customizer made by myself

    1. font-weight: 700;
    2. font-size: 36px;

    }

    .cm-entry-title { <—– where does this come from?

    1. margin-bottom: 12px;
    2. font-size: 2.4rem;
    3. font-weight: 500;

    }

    h1 { <—– chosen in customizer

    1. font-family: Montserrat;
    2. font-weight: 700;
    3. font-size: 36px;

    }

    h1, h2, h3, h4, h5, h6 {

    }

    h1 {

    1. font-family: Montserrat;
    2. font-weight: 700;
    3. font-size: 36px;

    }

    h1, h2, h3, h4, h5, h6 {

    }

    h1 {

    1. font-size: 4rem;

    }

    h1, h2, h3, h4, h5, h6 {

    1. margin-bottom: 20px;
    2. color: #27272a;
    3. font-weight: 500;
    4. font-family: “Open Sans”, sans-serif;
    5. line-height: 1.3;

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Amrit Kumar Shrestha

    (@shresthauzwal)

    9 months, 2 weeks ago

    Hi @defensiefotografie,

    The class cm-entry-title is applied to all titles by default, so its CSS has higher priority than styles applied to the h1 tag alone.

    CSS applies rules based on specificity and order:

    • h1 → element selector, low specificity.
    • .cm-entry-title → class selector, higher specificity than h1.
    • h1.cm-entry-title → combination, even higher specificity.
    • Inline CSS or !important → overrides everything else.

    Because of this, the theme’s .cm-entry-title CSS overrides the general h1 styles.

    Solution: In your custom CSS, use h1.cm-entry-title to target the exact element. You can also add !important if needed.

    I hope this information is helpful.

    Best regards!

    Thread Starter defensiefotografie

    (@defensiefotografie)

    9 months, 2 weeks ago

    On (for instance) https://defensiefotografie.nl/woordenlijst/ongeschreven-regels-van-oorlog/ you can see that 3.2rem overrules the custom setting.
    This change occurred later today without any interruption / alteration made by me.

    .single .cm-entry-header .cm-entry-title {

    1. font-size: 3.2rem;

    }

    h1.cm-entry-title {

    1. font-weight: 700;
    2. font-size: 36px;

    }

    .cm-entry-title {

    1. margin-bottom: 12px;
    2. font-size: 2.4rem;
    3. font-weight: 500;

    }

    h1 {

    1. font-family: Montserrat;
    2. font-weight: 700;
    3. font-size: 36px;

    }

    h1, h2, h3, h4, h5, h6 {

    }

    h1 {

    1. font-family: Montserrat;
    2. font-weight: 700;
    3. font-size: 36px;

    }

    h1, h2, h3, h4, h5, h6 {

    }

    h1 {

    1. font-size: 4rem;

    }

    h1, h2, h3, h4, h5, h6 {

    1. margin-bottom: 20px;
    2. color: #27272a;
    3. font-weight: 500;
    4. font-family: “Open Sans”, sans-serif;
    5. line-height: 1.3;

    }

    Thread Starter defensiefotografie

    (@defensiefotografie)

    9 months, 2 weeks ago

    @amrit
    Thanks for your reaction. It crossed with my addition.

    Where comes the 3.2rem from? What pushes it?
    In my custom css I wrotein the customizer it said already:

    h1.cm-entry-title {
    font-weight: 700;
    font-size: 36px;
    }

    So there seems to be an overriding nuissance all by itself.

    Amrit Kumar Shrestha

    (@shresthauzwal)

    9 months, 2 weeks ago

    Hi @defensiefotografie,

    The 3.2rem value comes from the theme’s style.css file. If you want to override this CSS, we recommend using !important it in your custom CSS, as suggested in the earlier response. For example:

    h1.cm-entry-title {
    font-size: 36px !important;
    }

    Best Regards!

    Thread Starter defensiefotografie

    (@defensiefotografie)

    9 months, 2 weeks ago

    Thanks. I will.
    The push of 3.2 seems an error in the theme programming since it overwrites adjustments made in the customizer.

    Amrit Kumar Shrestha

    (@shresthauzwal)

    9 months, 1 week ago

    Hi @defensiefotografie,

    Thank you for writing back,

    We have already clarified in which cases the CSS cannot be overridden. There is no issue with the programming itself; it is about the priority of the files loading on your website. In some cases, you may need to add !important to your CSS to give it higher priority.

    I hope this helps to clarify things.

    Best regards,

    Thread Starter defensiefotografie

    (@defensiefotografie)

    9 months, 1 week ago

    Hi Amrit,

    I put the important! in and al works fine.

    Keep up the good work.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Fonts and CSS’ is closed to new replies.