Search code examples
htmlcssfirefoxfontsgoogle-webfonts

Specific font has incorrect underline in Firefox only — where is the error, and how to fix it?

Problem

A specific font (Concert One from Google Fonts) behaves badly in Firefox only. When underlined, the underline appears as a strikethrough due to being too high.

Example

Here's my minimal, reproducible example:

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <link href="https://fonts.googleapis.com/css?family=Concert+One&display=swap" rel="stylesheet">
    </head>

    <body>
        <u style="font-family: 'Concert One'">Underline too high</u>
    </body>
</html>

Here's the appearance in Safari (same as in Chrome), which is the intended appearance:

Proper underline in Safari

And this is how it appears in Firefox:

Strikethrough in Firefox

Both screenshots were taken in macOS version 10.15 (19A583). Firefox version is 69.0.2 (64-bit).

Questions

  1. What's the cause? In my view it could be any of the following, possibly more than one:

    • problem in my example
    • misconfigured/"wrong" font file
    • bug in Firefox

    If the problem is not in my example, I would like to report this behavior to the appropriate party. I don't know much about fonts or browser rendering, so it's hard for me to determine what's going on here.

  2. If the fault is not in my example, is there a workaround that allows me to continue using this specific font and have it display properly in Firefox?

Solution

  • As of Firefox 70, the issue is fixed, maybe due to compositor improvements on macOS, or maybe because "Readability is now greatly improved on under- or overlined texts, including links. The lines will now be interrupted instead of crossing over a glyph."

    Thanks Mr Lister for noticing that this would be fixed in future Firefox versions.