override font everywhere except Google Docs

I am wanting to change the default font rendered on all pages to Hack Nerd Font.

The first thing I tried was to change the setting in Firefox (Zen) at Settings / General / Language and Appearance / Fonts / Default Font to Hack Nerd Font. I also made sure to disable "Allow pages to choose their own fonts, instead of your selections above".

This gets very close to what I want to achieve, however there are some sites where I would like them to choose their own fonts, such as Google Docs.

Now I am thinking that using Stylus with exceptions might be the answer. So I created a style called Global Font Override like so:

```

• {

font-family: 'Hack Nerd Font', sans-serif !important;

}

``` To make this work, it looks like I have to enable "Allow pages to choose their own fonts, instead of your selections above", which I did. I created an exception in my style to exclude "https://docs.google.com/*". This seems to be working fine.

However, my Audiobookshelf self-hosted site it now exhibiting a problem. When I first used Firefox (Zen) to override the font on all pages, Audiobookshelf looked fine, but now using my Stylus theme, there are places where icons should be displayed, and instead I am getting "play_arrow" and "playlist_add".

What is the solution to override the font everywhere, have icon fonts displayed properly, and exclude Google docs?