1

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?

jarhill0
  • 1,559
  • 1
  • 11
  • 19
  • Seems related to https://stackoverflow.com/questions/23991699/underline-text-decoration-is-crossing-through-the-imported-font-used-in-firefox but that question doesn't have a good answer. – jarhill0 Oct 11 '19 at 22:54
  • 1
    Works ok in my Win10, FF 67. Also works in the code snippet above. See if there's some css style for `u` element affecting it. – wazz Oct 12 '19 at 07:14
  • Also, `u` element has changed. If you're looking for an underline, use css. See [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u). – wazz Oct 12 '19 at 07:15
  • 1
    I can see the problem in FF 60ESR, but not in v71 (nightly), so apparently it's something they fixed with newer versions. – Mr Lister Oct 12 '19 at 08:35
  • 1
    @wazz There is no difference in display between and using CSS. is implemented with CSS also in the browser. – Mr Lister Oct 12 '19 at 08:37
  • @wazz Thanks for testing on Windows. I don't have a Windows machine available to test for myself. – jarhill0 Oct 12 '19 at 14:35
  • Thanks @MrLister, it also works for me in Nightly (version `71.0a1 (2019-10-12) (64-bit)`) as well as in Beta (version `70.0b14 (64-bit)`). If you submit this as an answer, I will accept it. – jarhill0 Oct 12 '19 at 14:44
  • 1
    Have the same issue with a particular font in Firefox for Android only. Tried the latest 'nightly' APK (68.3a1) but that does resolve the issue. Does anyone know if the fix has been ported to the Android source yet? – Jake Nov 08 '19 at 02:27
  • 1
    @Jake for me, Firefox 70 fixed the issue that was present up to Firefox 69. Assuming desktop version numbers correspond to Android version numbers, you should have a fix once version 70 makes it to Android. I was unable to find a better solution than that. – jarhill0 Nov 08 '19 at 18:42

1 Answers1

0

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.

jarhill0
  • 1,559
  • 1
  • 11
  • 19