How do I increase the font size of menus, tabs, and other user interface elements in Firefox 52?

Question

I'm running Linux, and I use Firefox Extended Support Release, 52.6.0, because I depend on certain accessibility/usability extensions which don't work in Firefox Quantum.

I have a small laptop screen with somewhat high resolution, which makes the default Firefox UI font unreadable for me.

I figured out that I can change the UI font size of most applications with an ~/.Xdefaults setting:

Xft.dpi: 192

This works for things like Gedit and i3, but for some reason Firefox ignores it.

I tried another workaround I found on support.mozilla.org, changing layout.css.devPixelsPerPx to 1.25 in about:config. On my version of Firefox this changes the size of pretty much everything but the UI text font.

Another suggestion from support.mozilla.org is to use an extension called "Theme and Font Size Changer". However, since the release of Firefox Quantum this extension seems to have been modified to no longer support changing font sizes (it only allows me to change the colors!).

I tried halving my screen resolution with xrandr (to 640x400), but this breaks many things, for instance various dialog boxes such as print dialogs no longer fit on the screen.

Is there a better solution?

Answer 1

The suggestion to let layout.css.devPixelsPerPx control UI font sizes on Linux was rejected.

That same bugzilla page recommends to control the UI font sizes with the GDK_DPI_SCALE and GDK_SCALE environment variables.

For example, if you're starting Firefox via a launcher shortcut, you can change its command from firefox %u to env GDK_DPI_SCALE=1.25 firefox %u

Answer 2

While trying to solve this problem I learned about userChrome.css. It is a configuration file allowing users to change properties of the Firefox UI, using the cascading style sheets language. It works on Firefox 52.

The file does not exist by default; I created it and added the following text:

$ cat ~/.mozilla/firefox/*.Default\ User/chrome/userChrome.css        
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

* {
font-size: 16pt !important
}

Don't forget the semicolon after the @namespace line.

Amazingly, there is a whole website, userchrome.org, dedicated to things you can put in this file. However, the above simple snippet was all I needed. I didn't get it from userchrome.org but from a post on mozillazine.org. On my system the font-size trick is also to be found in a file userChrome-example.css in the same chrome/ directory.

Now I can read the menubar text and tab names and so on, with my screen at full resolution.

Answer 3

File: fix-firefox-urlfont.sh

#!/bin/bash
if [ "$1" == "" ] || [ ! -d "$1" ] ; then
    echo "fix-firefox-font.sh <profileDir> [<fontSize>]"
    echo "Default font-size is 16pt"
    exit
fi

# Variables
PROFILE="$1"
FONT="16pt"
CHROME="chrome"
CSS="userChrome.css"
STYLE="toolkit.legacyUserProfileCustomizations.stylesheets"
PREFS="prefs.js"

# Font added
if [ "$2" != "" ] ; then
    FONT="$2"
fi

# Begin
pushd "$1"

# Remove the old setting
if [ `grep "$STYLE" "$PREFS" 2>/dev/null | wc -l 2>/dev/null` -ne 0 ] ; then 
    sed -i "/^.*$STYLE.*$/d" "$PREFS"
fi

# Add the new setting
cat << EOF >> "$PREFS"
user_pref("$STYLE", true);
EOF

# Create the directory
if [ ! -d "$CHROME" ] ; then 
    mkdir $CHROME
fi

# Add the custom CSS
cat << EOF > $CHROME/$CSS
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

* {
    font-size: $FONT !important
}
EOF

# Done
popd