Major issues with vertically centered text in Firefox on Linux - Known issue with Nimbus as an alias for Helvetica

What happened?

UPDATE: See discussion in comments. This is due to the Nimbus font that Firefox chooses on Linux as a substitute for Helvetica. More of a significant problem than I thought. Track this issue: https://github.com/primer/css/issues/1209 … Github itself has the same issue and has not yet settled on a fix.

There are a number of problems with vertically centered text in Firefox. Many components are affected, including buttons and nearly all form controls, chips, toolbars, and more. All of the issues are visible in the Quasar documentation as of this writing.

Below are just a few examples.

Left: Vivaldi (Chromium-based), Right: Firefox 99

What did you expect to happen?

Text should be centered vertically

Reproduction URL

https://jsfiddle.net/ap58tdq3/1/

How to reproduce?

1. Use Firefox
2. Go to https://quasar.dev
3. Look a things

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Linux(5.17.1-arch1-1) - linux/x64
NodeJs - 14.19.1

Global packages
  NPM - 6.14.16
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.6.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.4.7 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.13.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14 -- > This is the repository for Vue Router 4 (for Vue 3)
  pinia - 2.0.13 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - 18.0.1 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.8 -- Babel compiler core.
  webpack - 5.71.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @0x199x! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[0x199x]

Submitted a PR but this needs some more consideration/testing. It turns out Nimbus is more of a problematic font than I originally thought… but that’s definitely what the issue is.

Github itself is struggling with the same problem. https://github.com/primer/css/issues/1209

It was staring me right in the face and I never noticed it.

See also: https://nolanlawson.com/2020/05/02/customizing-fonts-in-firefox-on-linux/ https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/1874842