Before you ask please READ THIS

Custom CSS applies only to parts of content

edited May 2018 in Rife Posts: 17
Hi,

I'm trying to apply custom fonts to headlines ect.

This is my staging CSS code:
@font-face {
    font-family: 'hecticregular';
    src: url('https://matus-burritos.de/wp-content/uploads/2018/05/hectic-webfont.woff2') format('woff2'),
         url('https://matus-burritos.de/wp-content/uploads/2018/05/hectic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
		color:green;

}

/* Titles and titles alike font */
   h2, h3 {
        font-family: "hecticregular";
					color: green !Important;
			letter-spacing: 23px;
	
    }
However, the font change only goes live for the h2 element while h3 remains stuck with the theme font (see screenshot).

Also, color would not update for h2 and h2. Color only updates if I would use '!important'.

What would be the solution here to get rid of the theme formatting?

Kind regards,

Thomas


Capture2.PNG
1687 x 455 - 63K
Post edited by Air on

Comments

  • AirAir
    Posts: 10,970
    Hello :-)

    What I see currently on your page is
    h2 {
        font-family: "courier_newregular" !important;
        font-size: 350% !important;
        color: #633;
        letter-spacing: -2px;
    }
    So it looks some font is set only for h2 tags.

    About color - you have to use !important cause color is set when you added this element in Elementor and h2 for example has such style:
    .elementor-8754 .elementor-element.elementor-element-52188283.elementor-widget-heading .elementor-heading-title {
        color: #161616;
    }
    So it will be hard to overwrite with CSS, but possible.

    However, as you use Elementor just use it to set color of titles :-)

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion