Tiny Forge
[resolved] Child Theme CSS being Overridden by Parent? (4 posts)

  1. BradJC
    Posted 2 years ago #

    I am attempting to change fonts, but my css is being overridden by the parent style.css when using Firefox (Mac & PC) or IE.

    Here is a testing URL: http://greatlakesbatteriesllc.com/sitecore/

    Here is a bit of code from my child theme's css:

    @import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:400,600,700,500|Montserrat+Alternates:400,700);
    	background:url(images/pageBG.jpg) repeat-x;
    	font-family: "Cabin Condensed" sans-serif;
    body.custom-font-enabled {
        font-family: "Cabin Condensed" sans-serif;

    When I look at the child theme css in firebug, the font-family isn't even there. It is in the file if I load it individually (http://greatlakesbatteriesllc.com/sitecore/wp-content/themes/greatLakes/style.css)

    The site seems to work correctly in Chrome and Safari.

    There are also other bits of css that are not being applied or recognized. I'm stumped.

    Any thoughts or suggestions?

  2. CrouchingBruin
    Posted 2 years ago #

    Firefox is quite picky when it comes to correct CSS syntax. You are missing a comma between your different font styles in the font-family property.

    Change this:

    font-family: "Cabin Condensed" sans-serif;

    to this:

    font-family: "Cabin Condensed",sans-serif;
  3. BradJC
    Posted 2 years ago #

    That was the problem. I've been doing this long enough that I should have been able to find that.

    Thanks for the second set of eyes!

  4. Tomas Mackevicius
    Theme Author

    Posted 2 years ago #

    I see you're using style.css to insert google styles, but I suggest you using the code in functions.php (search Tip31), because google recommends adding its styles in the first place before any other styles.

    Also @import increases load time of the site.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.