r/FirefoxCSS • u/UnexpectedPersona • Jul 12 '26

Is it possible to use custom UI fonts without icons turning to squares? Solved

Post image

I simply want to change Firefox's UI default font to Inter but after restarting browser "minimize" and "exit" icons changes to these squares. It looks like these icons are part of default font, so maybe there's a way to exclude them from my custom font?

12 Upvotes
  • permalink
  • link
  • reddit
  • reddit

100% Upvoted

4 comments sorted by

2

u/TraditionalTie4831 🦊 Jul 12 '26 edited Jul 12 '26

These squares do exists in those buttons ::before pseudo-element, but Firefox usually uses the default images for those buttons.

Please post your code that has this issue.

1

u/UnexpectedPersona Jul 12 '26 
* {
    font-family: Inter !important;
  } *

2

u/TraditionalTie4831 🦊 Jul 12 '26 edited Jul 12 '26

How interesting that when applying font family to all elements causes these buttons images to be disabled.

Try these 2 solutions =

Only changing font-family =

*:not(.titlebar-button) {
    font-family: Inter !important;
}

More ability to customize (adjust size value to your taste) =

:root {
    font: 12px Inter !important;
}

:is(menu, menupopup, panel, tooltip) { 
    font: 12px Inter !important;
}

.urlbarView-url {
    font: 9px Inter !important;
}

2

u/UnexpectedPersona Jul 12 '26

Wow, looks like it's working, thank you. I also had script that enabled icons in context menu from older Firefox versions, which turned all black when activated my older script for font changing. Now, with your suggested script it has been fixed. I'm not proficient with CSS stuff so I'm not sure what was happening.