Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

How to change Firefox GUI font WHEN not allowing webpages to use their own fonts?

edited January 2018 in Style Requests Waterfox

Hi!

This code in userchrome.css to change the gui font doesn't work when I don't allow websites to use their on font settings:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

* {

    font-family:"Comic Sans MS" !important;


}

The GUI will use the font specified for websites...
Apparently it's because of a firefox bug starting with FF41. Is there any way I can override the GUI fonts used in this case?

Comments

  • Try using a userChrome.css file for your UI modifications. I have some info up here: https://www.userchrome.org/
  • Waterfox
    Try using a userChrome.css file for your UI modifications. I have some info up here: https://www.userchrome.org/

    I am using this CSS within userchrome.css. And FF56.

  • I see now.

    When the user overrides page fonts in Options/Preferences, Firefox disregards any specific font family set in userChrome.css, but will pay attention to the generic font, for example, sans-serif instead of serif (which appears to be used by default).

    And that gives rise to a workaround:

    Coincidentally, "Comic Sans MS" is the default cursive font, so you can do this if you really want that face:
    * {
    font-family: cursive !important;
    }
    To specify a different font, if you have an English-language version of Firefox, you can edit the typeface listed for this preference in about:config:

    font.name.cursive.x-western
  • edited January 2018 Waterfox
    I see now. When the user overrides page fonts in Options/Preferences, Firefox disregards any specific font family set in userChrome.css, but will pay attention to the generic font, for example, sans-serif instead of serif (which appears to be used by default). And that gives rise to a workaround: Coincidentally, "Comic Sans MS" is the default cursive font, so you can do this if you really want that face:
    * {
      font-family: cursive !important;
    }
    
    To specify a different font, if you have an English-language version of Firefox, you can edit the typeface listed for this preference in about:config: font.name.cursive.x-western

    I see. Thanks. So is this a fourth type (besides serif, sans-serif, monospace) that doesn't appear in the graphical settings?

    Well, I guess it's a good enough workaround. I can't say that I've been running into cursive fonts while browsing.

  • Waterfox

    Never Mind. This doesn't work either.
    Looking with dom inspector I see "font-family: serif,cursive;" in the calculated CSS section for GUI elements.

    It looks like serif, is always prefixed when I disable the option to allow websites using their own font settings.

  • edited January 2018 Firefox
    It worked for me in Firefox 52 ESR and Firefox 57 when I live edited my userChrome.css file in the Browser Toolbox. However, it may not "stick" when you actually restart Firefox. I guess the user's setting in the UI overrides the user's setting in userChrome.css.
  • edited January 2018 Waterfox
    It worked for me in Firefox 52 ESR and Firefox 57 when I live edited my userChrome.css file in the Browser Toolbox. However, it may not "stick" when you actually restart Firefox. I guess the user's setting in the UI overrides the user's setting in userChrome.css.

    I have a side question maybe you can answer me:
    Why doesn't this work?

    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
    
    * {
        font-size: 13px; 
    }
    
    #tools-menu{
    font-size:20px !important;
    }
    
    #helpMenu, #file-menu{
    font-size:16px !important;
    }
    

    I want to set a default font size to all UI elements, but I also want to override some specific ones to be larger.
    In actuality everything stays at 13px.

  • The * selector seems to be considered more specific, so to overcome that, you need to select exactly the container you want to style, for example:
    #tools-menu .menu-text {
    font-size:20px !important;
    }

    #helpMenu .menu-text, #file-menu .menu-text {
    font-size:16px !important;
    }
  • Waterfox
    The * selector seems to be considered more specific, so to overcome that, you need to select exactly the container you want to style, for example:
    #tools-menu .menu-text {
      font-size:20px !important;
    }
    
    #helpMenu .menu-text, #file-menu .menu-text {
      font-size:16px !important;
    }
    

    Thanks. Though sadly that means I'd have to add everything on the GUI into the CSS.

  • avada0 said:

    Though sadly that means I'd have to add everything on the GUI into the CSS.

    Why not stop using the * selector and instead use a few higher level selectors? Occasionally you'll need more, but it will be simpler in the long run than having a lot of exceptions.
  • No, the * selector is never more specific than an ID (it has the lowest specifity of all). Especially as you use !important with the IDs but not with the *.

    Font-size is inherited by default, so that's also not the problem. What I've seen quite often is, that you missed another declaration somewhere down the tree. Strange that it isn't overwritten because of !important.

    However, in general you can easily evade this problem by using #ID, #ID *. Otherwise you need to search for the exact element.

    Summary:

    * { 
        font-size: 13px; }
    
    #tools-menu, #tools-menu * { 
        font-size: 20px !important; }
    
    #helpMenu, #helpMenu *, 
    #file-menu, #file-menu * { 
        font-size: 16px !important; }
    
  • edited January 2018 Waterfox

    No, the * selector is never more specific than an ID (it has the lowest specifity of all). Especially as you use !important with the IDs but not with the *.

    Font-size is inherited by default, so that's also not the problem. What I've seen quite often is, that you missed another declaration somewhere down the tree. Strange that it isn't overwritten because of !important.

    However, in general you can easily evade this problem by using #ID, #ID *. Otherwise you need to search for the exact element.

    Summary:

    [...]

    Thanks! This in fact works around whatever the problem is.

    (I'm quite sure I'm not using * anywhere else. Particularly because if I remove the font-size declaration here the font sizes for the specific elements start to work.)

  • Waterfox

    However, in general you can easily evade this problem by using #ID, #ID *. Otherwise you need to search for the exact element.

    Hmm... I just realized that this has a pretty big side effect. All the child elements'' font size also changes.
    In this case it increases the font size for the opened menus, which I definitely don't want.

  • edited January 2018 Firefox

    All the child elements'' font size also changes.

    That's the point doing it like that xD

    To solve your problem you either have to manually define the fontsize of child elements back to the desired size or try to exclude them (like #ID *:not(button) { font-size:12px !important; }).
    At some point this workaround makes no more sense and it is more reasonable to search for the exact container that you wanted to change in the first place and change only that without the need for exclusions or overwriting.

    The method to choose comes down on what identifiers you (can) know and what you want as default for unknown.

  • Waterfox

    I see. In this case ":not(button)" doesn't seem to change the result though. Both the menu and it's child elements' font size changes.

  • avada0 said:


    Hmm... I just realized that this has a pretty big side effect. All the child elements'' font size also changes.

    In this case it increases the font size for the opened menus, which I definitely don't want.

    I thought that was the whole point of your question. What is it that you want to change if it's not the font size of text on the three drop-down menus? Only the label on the menu bar itself??? That would be

    #tools-menu .menubar-text {}
    #helpMenu .menubar-text, #file-menu .menubar-text {}
  • Waterfox

    Hmm... I just realized that this has a pretty big side effect. All the child elements'' font size also changes.
    In this case it increases the font size for the opened menus, which I definitely don't want.

    I thought that was the whole point of your question. What is it that you want to change if it's not the font size of text on the three drop-down menus? Only the label on the menu bar itself??? That would be #tools-menu .menubar-text {} #helpMenu .menubar-text, #file-menu .menubar-text {}

    Indeed. That's what I wanted to change. Didn't think it wasn't clear. This now works. Thanks!

Sign In or Register to comment.