Enforce Browser Fonts

Author: Jayesh Bhoot

Created: 2020-07-05 Sun 15:14

Last Updated: 2020-07-05 Sun 15:15

Table of Contents

1 What is this?

I prefer to use my own fonts instead of fonts set by websites. While firefox provides this configuration, it does not let you easily toggle between browser and website fonts, which is a hassle, because quite a lot of time, I need to use the website fonts (eg: fonts.google.com).

This Firefox WebExtension lets you toggle between browser and website fonts by:

  1. clicking on the toolbar icon
  2. pressing keyboard combo: Alt-Comma

The toolbar icon also acts as a visual cue: If it is coloured, then browser fonts are enforced. Otherwise, website fonts are being used. The icon tooltip provides the textual cue for the same.

2 Demo


3 Releases

3.1 Version 1.0

  1. The user can now specify in the addon preferences which fonts - the browser fonts or the website fonts - should be enforced for all websites by default.
  2. Enforcing browser/website fonts now operates at per-website-domain level, instead of the global level. A website domain by default uses the fonts set in the add-on preferences. If the user switches the fonts from the default for that domain, then the add-on will remember that change for that domain.

4 Potential Upcoming Features

4.1 DONE Customizable keyboard shortcuts

Firefox now lets the user to set a custom keyboard shortcut for each add-on

4.2 DONE Configuration per website.

As such, Firefox's setting is browser-wide. But I see a possibility of piping through the various extension APIs to make per-website configuration possible. Available from v1

4.3 TODO Keep the addon state in sync if a user changes the font configuration from Firefox's Preferences.

Start from here

4.4 TODO Allow a user to edit the domains affected by the addon

4.5 TODO Allow a user to export/import domains affected by the addon

5 Credits

Icons made by Baianat from www.flaticon.com is licensed by CC 3.0 BY

6 Dev Notes

Commands used during development are listed here for personal use and for general reference:

# to compile core.js
clj --main cljs.main --compile-opts cljs-compile-options/dev/core.edn --watch src --compile ebf.core

# to compile preferences.js
clj --main cljs.main --compile-opts cljs-compile-options/dev/preferences.edn --watch src --compile ebf.preferences

# to run web-ext in dev mode
web-ext run  --browser-console --pref font.name.monospace.x-western="JetBrains Mono" --pref font.name.sans-serif.x-western="JetBrains Mono" --pref font.name.serif.x-western="JetBrains Mono"