mozilla
Back arrow on 404 page is bottom-aligned
Description
The <-- Go back message on the mozilla.org 404 page has the back-arrow awkwardly positioned at the bottom of the line right now.
~I think this is really a bug/quirk of the new "Mozilla Text" font, so I'll try to find the right place to report it as a font bug, but for now I'm filing it as a site bug since it's visible on the site.~ EDIT: As discovered in comments below, we're picking this glyph up from "Liberation Sans", which is the default substitution for Arial on Ubuntu.
Steps to reproduce
- Visit https://www.mozilla.org/en-US/bogus-not-a-real-page/ (or any gibberish not-a-real-page URL on the www.mozilla.org domain)
Expected result
You should see "Go back" with a vertically-centered arrow next to it.
Actual result
The arrow looks awkwardly not-centered; it's noticeably too far down.
Environment
Firefox 135.0a1 (2024-12-23) on Ubuntu 24.10 Chrome 133.0.6888.2 (Official Build) dev (64-bit) (i.e. this isn't a browser-specific behavior)
If I add this CSS to the site in devtools...
.back-button { font-family: sans-serif }
...to use a different font for this element (and its arrow), then this looks more nicely-centered to me:
(I'm not suggesting we actually do that; just mentioning it for diagnostic purposes, to demonstrate that this is specific to this particular font.)
Hmm, I see the same issue (in Chrome and Firefox) if I just pick Arial as my font, too -- here's a reduced testcase (with a large font to make it easier to see):
data:text/html,<!DOCTYPE html><meta charset="utf-8"><body style="font: 40px Arial">%E2%86%90Go Back
This renders like so in Firefox and Chrome:
So this isn't specific to the Mozilla font; there just must not be as much of a guarantee about the vertical positioning of this arrow as I was imagining.
FWIW the UTF codepoint that we're currently using here is this one: https://codepoints.net/U+2190?lang=en https://www.fileformat.info/info/unicode/char/2190/index.htm
Chances are the glyph is not even part of that font, and it's some kind of a fallback, picking up something from the stack like Arial or Helvetica. @dholbert Out of curiosity, if you change the page lang to /cs/ or /ar/ does anything change for you regarding this arrow?
This is how it looks on macOS 15 fwiw: (gecko left, webkit right)
You're right - it looks like the arrow is from Liberation Sans.
https://www.mozilla.org/cs/bogus-not-a-real-page/ renders with a different, bigger arrow in Firefox and Chrome, which looks vertically centered to me.
https://www.mozilla.org/ar/bogus-not-a-real-page/ renders with a different arrow that looks vertically centered in Firefox, but in Chrome I think I'm still getting the "Liberation Sans" bottom-aligned one.
If I add font-family: sans-serif; to the .back-button::before rule, then we pick up one that looks good:
.back-button::before {
content: "← ";
font-family: sans-serif;
Screenshot:
That lets us bypass Arial from the --body-font-family: "Mozilla Text",Inter,"Helvetica Neue",Arial,X-LocaleSpecific,sans-serif; font-family list here, which is what's matching to Liberation Sans which gives us the low-biased leftarrow here.
I filed an issue in the Liberation Sans repo ( https://github.com/liberationfonts/liberation-fonts/issues/71 ) to see if they might want to adjust their version of this glyph to make it more centered.
Not holding my breath, since it looks like the last commit in that repo was 3 years ago. :) So we might still want to consider working around this on mozilla.org as well (by e.g. specifying a generic font family -- and not Arial -- for this backarrow, per my previous comment.)