DEV Community

loading...

An insignificant browser-bug?

Mads Stoumann
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
・1 min read

Almost 3 years ago, I reported a browser-bug to the Chrome-team:

https://bugs.chromium.org/p/chromium/issues/detail?id=807546

It is minor for most people, but for typography-geeks, it's ... significant!

In the snippet below, I use 3 fonts:

Chrome

  • Abhaya Libre Medium for the body-text
  • Cormorant SC SemiBold for the first line of a paragraph
  • Yeseva One for the first letter of a new paragraph, that's the first-of-type within a section.

The quoted entries are within <q>-tags, using the standard open-quote and close-quote as content for the ::before and ::after pseudo-elements.

Here's the same snippet in Firefox;
Firefox

Can you spot the issue?

Firefox correctly use Cormorant SC SemiBold for the quotes in the first-line, since there's a CSS-rule:

.article__section>p:first-of-type::first-line {
  font-family: "Cormorant SC", serif;
  font-weight: 600;
  font-size: 1.2em;
}
Enter fullscreen mode Exit fullscreen mode

But Chrome (and Safari), use the body-font, Abhaya Libre Medium, for the quotes, but the correct font for everything else on the line.

It's not the end of the world, but funny it's not been fixed yet, maybe it is too insignificant after all!?

Discussion (0)