DEV Community

Mads Stoumann
Mads Stoumann

Posted on

2

An insignificant browser-bug?

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!?

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more