How to force span to use parent font-family in CSS

Question

When HTML span has CSS font-family, I can't force it to use parent font-family

Why span don't use parent font-family?

How can I make this work?

Answer 1

You could select all the children elements using .parent * and then set font-family to inherit. This will effectively override the child element font and force all children elements to inherit the value of whatever the closest parent element's font is.

.parent {
  font-family: tahoma;
}
.child {
  font-family: cursive, geneva;
}
.parent * {
  font-family: inherit;
}

<div class="parent">
  <span class="child">Text</span>
</div>

And if you only want to target the .child element, you would obviously change the selector to .parent .child.

Depending on what you're trying to achieve, it's also worth mentioning that you can use the direct child selector, >, in order to only target direct children: .parent > *.

.parent {
  font-family: tahoma;
}
.descendant {
  font-family: cursive, geneva;
}
.parent > * {
  font-family: inherit;
}

<div class="parent">
  <span class="descendant">Direct child. <em class="descendant">Not a direct child</em></span>
</div>