font family not working on h1
I'm experiencing a situation where a font family isn't getting applied to a h1 unless I set it on both the parent element of the h1 and the h1. Setting it on only the parent element does not work. I'd think that the h1 would inherit the style of the parent but that's not the case. There isn't any interfering font family styles for the h1. I'm using Brave browser. I've never seen something like this before in CSS and I've been writing CSS for 2 years. It's just very strange. How do I solve this issue?
8 Replies
Inspect the element and you'll see where it comes from in the styles tab.
There's no styling on the h1 when I inspect it until I put the styling on the parent element of the h1 and the h1, only then does the styling on the h1 show up in dev tools and works takes effect on the page. The h1 doesn't inherit styling from the parent if only the parent is styled and I set the h1 font family to
inherit, and it doesn't get styled when the font family is applied on the h1 alone. I used an extension visbug and it shows a system UI font family on the h1. The font family that I'm choosing works on the h2 and every other element on the page, not just on the h1. I even created another HTML file with a CSS file to test it in isolation and it works fine on the h1, not just on the page that I'm using it. This is an anomaly.Well, without seeing it, it is impossible for us to tell
It's exactly as I explained it
.hero-section {
font-family: 'archivo black' , san-serif;
}
h1 {
font-family: 'archivo black', san-serif;
}
Where the h1 is a child of the hero-section but the font family just doesn't work on the h1 if I don't set the font family to both the parent and the h1. So the above code works fine but the moment I take remove the font family from the the hero section, it stops working on the h1.if you share a demonstration, either in codepen or the live site including instructions on which element you're talking about, we can take a look. What you have shared so far does not explain the behavior you're seeing
you do have a typo though, it's
sans-serif not san-serifHere is the result of this (with the typo fixed), as you can see the h1 is getting its font applied just fine
https://codepen.io/jochemm/pen/LYaJpWM
when you remove the h1 styling, it still inherits the font family like it's supposed to
this means it has to be something else in your code, so if you don't share something where we can see the style not applying in our own browsers, we won't be able to help you
maybe I should mention that i'm using bootstrap CDN (i haven't used this in over 2 years) to build this theme that's going to be on the market else i would have loved to share the code. I'm beginning to consider that maybe bootstrap has a hidden default font family that is interfering with the one that i am setting when i try to set it on only the h1, and can only be overridden by setting it on both parent
.hero-section and child h1 but it's odd. I mean i haven't used bootstrap in that long and I don't know what has changed but it still doesn't add up. But Thanks for all the help, I'm just going to take this as one of those weird CSS or bootstrap issues and just go ahead to set both the parent and h1 with the font family since this is the only way that works.