Why Safari Keeps the Parent Font After font-family: initial

A child element set to font-family: initial still shows the parent’s decorative font in Safari. Is that a bug, and would unset behave any differently?

Why Safari Keeps the Parent Font After font-family: initial
TLDR
  • font-family: initial should use the property's initial value, not the parent's font.
  • Safari Technology Preview 255 fixes a WebKit bug that treated the reset like inheritance.
  • unset still inherits for this property. An explicit font stack is a separate design choice.

WebKit had a font reset bug

A child retaining its parent's font after font-family: initial matches a documented WebKit bug. The October 22 release notes for Safari Technology Preview 255 list a fix for treating this value like inherit.

That identifies a preview build with the correction. It does not establish that the same fix has shipped to every stable Safari or iPhone installation. Technology Preview 255 is the useful comparison target here.

Compare the reset child with text outside the parent

The WebKit report isolates the problem with a parent using fantasy and a child using initial. An equivalent comparison is:

<style>
  .parent { font-family: fantasy; }
  .reset { font-family: initial; }
</style>
<p>Sample text</p>
<div class="parent">
  <span>Sample text</span>
  <span class="reset">Sample text</span>
</div>

In an otherwise unstyled document, the first paragraph and reset span should use the same font. The other span inherits the decorative parent font. If the reset span retains that font too, it matches the reported symptom. Use an environment where the default and fantasy faces look different so the comparison is visible.

unset deliberately preserves font inheritance

The CSS cascade specification gives the reset keywords different jobs. Because font-family is inherited, replacing initial with unset does not express the same intent.

ValueEffect on font-family
initialUses the property's initial value.
inheritUses the parent's computed value.
unsetBehaves like inherit for this inherited property.
revertRolls back the current style origin; inheritance can remain.

In particular, reverting a child's author style does not erase a font declaration on its parent.

An explicit stack can state the intended design

If the component should use sans-serif text, font-family: sans-serif expresses that directly. For a preferred face with a fallback, a declaration such as font-family: Arial, sans-serif selects from an ordered list.

As the font-family reference explains, declaring a family does not itself download it: the browser selects available fonts, including those supplied through @font-face. An explicit stack also does not reproduce every browser's initial font. That initial value depends on the user agent.

Technology Preview runs alongside stable Safari as a separate app. Compare the same small case in both, then decide whether the component needs an explicit font choice for existing browsers or must preserve the semantics of the initial value.