Child theme of Genesis not calling enqueued fonts in functions.php

[brentaarnold]

Have a link here to a paste of my functions.php and style.css, the only files in my child theme. I installed the Genesis Framework, created a directory in the themes folder and dropped these files in.

https://paste.ee/p/bpLty

I'm having an issue when using <h1> tags pointing to IBM Plex Sans Condensed it's not working. Thanks for any help.

http://southerndataworks.com

[Victor Font]

The problem is where you are defining the H1 in style.css. CSS follows a last in, first out paradigm. In other words, the last H1 defined in style.css is the one that takes precedent.

Your H1 for the IBM Sans Condensed is defined at line 17 in style.css. At line 240, your style.css defines the h1 as Arial, 'Helvetica Neue', Helvetica, sans-serif. This takes priority over your declaration at line 17, thus overwriting it.

Move your IBM Sans declaration after the line 240 block and it will work.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[brentaarnold]

Victor, first off thanks so much for looking at my issue.

That was the entire CSS file. I think maybe the parent theme is somehow getting priority over my child theme. It's only 18 rows long.

Thanks again,
Brent

[Victor Font]

The parent theme overrides the child, if the elements in the parent are missing in the child. Since your child theme style sheet is so sort, add the keyword !important.

h1 {
    font-family: "IBM Plex Sans Condensed" !important;
    font-weight: 500 !important;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[brentaarnold]

Victor, thanks so much for the fix. It's working properly. However, I just have to wonder if there is a way to give the child theme style.css precedence?

[Victor Font]

The way to give the child theme priority the way you're approaching this is to name your own classes instead of relying on element tags. For instance, in your example, you can write the HTML as:

<h1 class="condensed-font">this is a test</h1>

Then, in your child theme CSS use:

h1.condensed-font {
    font-family: "IBM Plex Sans Condensed" !important;
    font-weight: 500 !important;
}

This makes it unique and will override the parent theme.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Terry]

Hi,

Curious why you're enqueuing the parent theme css?

If you're developing a custom child theme you might like to start with the Genesis Starter theme.

Terry

[Author]

Posts