Font override works on some sites but not others

I am using this font in an attempt to override Firefox's built-in Emojione font, however the override only works on some sites and not on others. For example, on eosrei's emoji demo sheet, the script works as intended (shown in the attached screenshot), as well as on Emojipedia. However, on other sites the override isn't working and it just uses Emojione as usual. I use Windows and have the font I want to use installed on my system and have modified the userstyle as follows:

@namespace url(http://www.w3.org/1999/xhtml);


@font-face
{
  font-family: 'EmojiOne Mozilla';
    src: local('Noto Color Emoji SVGinOT');
}

Is there any particular reason why this works on some sites but not on others?

1366 x 768 - 378K

Comments

  • Could Firefox be using a downloadable emoji font specified by the site? You may need to view the style sheet for sites where your rule isn't working to see.

    With normal fonts, there is the complication of not substituting if there is a font-style or font-weight assigned. While that seems unlikely with emoji's, there may be other specifications that are causing the issue.

    This style has an example of a set of rules from Adobe's forums, and overriding each one with a local font:

    https://userstyles.org/styles/126055/adobe-forums-substitute-arial-for-adobe-clean
  • Jefferson said:

    Could Firefox be using a downloadable emoji font specified by the site? You may need to view the style sheet for sites where your rule isn't working to see.

    With normal fonts, there is the complication of not substituting if there is a font-style or font-weight assigned. While that seems unlikely with emoji's, there may be other specifications that are causing the issue.

    This style has an example of a set of rules from Adobe's forums, and overriding each one with a local font:

    https://userstyles.org/styles/126055/adobe-forums-substitute-arial-for-adobe-clean

    I've double checked to make sure, but it's not using a downloadable font - It's always using the EmojiOne Mozilla font located in C:\Program Files (x86)\Mozilla Firefox\fonts. I did however just notice something looking through different sites' source code - If the emoji is wrapped inside either <span class="emoji"> or <div class="emoji">, it works as intended (which is the case with the site on the screenshot I attached in my original post: everything on it is wrapped in <div class="emoji">). If there's no such code however, and the emoji's unicode character is inputted as normal text, the CSS override gets ignored and it loads from the EmojiOne font instead.
  • I did however just notice something looking through different sites' source code - If the emoji is wrapped inside either <span class="emoji"> or <div class="emoji">, it works as intended (which is the case with the site on the screenshot I attached in my original post: everything on it is wrapped in <div class="emoji">). If there's no such code however, and the emoji's unicode character is inputted as normal text, the CSS override gets ignored and it loads from the EmojiOne font instead.

    Oh, so maybe Firefox will look at the character and say "Arial doesn't have this" and use EmojiOne automatically? Can you give a link to a page where you see this issue?
  • Oh, so maybe Firefox will look at the character and say "Arial doesn't have this" and use EmojiOne automatically? Can you give a link to a page where you see this issue?

    I thought of that being the issue but it does it on characters Arial does have, which makes it even more confusing. An example page where it doesn't work is the Wikipedia emoji page: https://en.wikipedia.org/wiki/Emoji#Unicode_blocks

    Everything in those blocks renders as EmojiOne

  • I see, Firefox must have a built-in preference for EmojiOne when you get into the symbol range of ordinary fonts.

    One possibility is to try to override this using the unicode-range property. Here's an example from one of my current styles ( https://userstyles.org/styles/141633/urlbar-visually-distinguish-characters-punycode ):
      /* Use Courier New for everything after "z" */
    @font-face {
    font-family: URLBarCustom;
    src: local("Courier New");
    unicode-range: U+07B-FFFF;
    }
    On Wikipedia, the font-family you would need to replace is sans-serif. This may turn out to be a very inconvenient number of rules you need to create...

    Alternately, how do you feel about brute force -- hiding Firefox's font file? Along these lines: https://support.mozilla.org/questions/1147536 Oh... but I'm not sure that helps with substitutions...
Sign In or Register to comment.