DEV Community

Mads Stoumann
Mads Stoumann

Posted on


An insignificant browser-bug?

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

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

In the snippet below, I use 3 fonts:


  • 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;

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

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.