Add SF Mono to Firefox (macOS only)

add-sf-mono-to-firefox.md

GitHub uses the following CSS font stack to display code:

font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;

Chrome will use SFMono-Regular when that font is installed locally, but Firefox will not. Workaround: Add the following CSS to your Firefox profile's userContent.css file:

@font-face {
  font-family: SFMono-Regular;
  src: local("SFMono-Regular");
}

Before	After

add-sf-mono-to-firefox.sh

#!/usr/bin/env bash
set -e

FF_DIR="$HOME/Library/Application Support/Firefox"
PROFILE_PATH=`grep "Default=" "$FF_DIR/profiles.ini" | sed "s/Default=//"`
PROFILE_CHROME_DIR="$FF_DIR/$PROFILE_PATH/chrome"
CSS_FILE="$PROFILE_CHROME_DIR/userContent.css"

mkdir -p "$PROFILE_CHROME_DIR"

cat << EOF >> "$CSS_FILE"
@font-face {
  font-family: SFMono-Regular;
  src: local("SFMono-Regular");
}
EOF

echo "Done! Added the following CSS to $CSS_FILE"
echo
cat "$PROFILE_CHROME_DIR/userContent.css"

👆
👇

$ curl -Ls https://git.io/fjgMq | sh
Done! Added the following CSS to /Users/javan/Library/Application Support/Firefox/Profiles/t9kabcx4.Javan/chrome/userContent.css

@font-face {
  font-family: SFMono-Regular;
  src: local("SFMono-Regular");
}

For new versions of firefox, remember to set toolkit.legacyUserProfileCustomizations.stylesheets to true.

References:

• https://superuser.com/questions/318912/how-can-i-override-the-css-of-a-site-in-firefox-with-usercontent-css
• https://bugzilla.mozilla.org/show_bug.cgi?id=1541233