Not showing numbers on input like 1 , 2, 3 using this font family. about twemoji-colr HOT 13 OPEN

@rajeevnathverma143 I had this issue too, and it was caused by using twemoji as the first font rather than the last in font-family.

Changing (in my case)

html {
  font-family: 'Twemoji',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

to

html {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif,'Twemoji';
}

fixed it for me (I simply moved twemoji to the end of my fonts).

from twemoji-colr.

Placing system fonts before twemoji will indeed fix this particular issue, but sadly for some characters will produce inconsistent results: for example "Segoe UI" family on windows claims it supports flags, but have no "picture" composites for them, so for example in Chrome you'll see sans-serif "CH" instead of white cross in red square for flag of Switzerland(🇨🇭), plus few characters need explicit either "Segoe UI Emoji" or variation selector 16 usage in Firefox, because otherwise they are rendered in boring outline from "Segoe UI Symbol" (But these are most probably different issues than invisible digits.)

Testcase for invisible digits (and some other inconsistencies)

data:text/html;charset=utf-8,<style>@font-face {
 font-family: twemoji-mozilla;
 src: url(https://xem.github.io/unicode13/Twemoji.ttf);
}
body::before {
 font-family: twemoji-mozilla;
}
body::after {
 font-family: Segoe UI;
}
body::before,
body::after {
 content: '🦖A1B2C3🇨🇭🖐🖐\FE0F';
 display: block;
}
</style>

Uses ttf hosted at @xem's page https://xem.github.io/unicode13/emoji.html (it is the same as current release and the file in /fonts/ folder in Firefox installation directory). You can check "Default rendering" details there to spot more inconsistencies, and/or copy & paste above snippet into URL bar to see probably something like this (after zoom):

Rendered outcome in Firefox Nightly, Win 10 b1709:

In the second line Switzerland flag is OK because it is actually rendered with built-in "Twemoji Mozilla" fallback; for some reason in this case it takes priority over Segoe. First hand without variation selector is "bland", second is from Segoe UI Emoji. (Also note this version of windows have old version of Segoe, newer Windows version have emoji support.)

And In Google Chrome, Win 10 b1709:

In the second line Switzerland flag is not composed to picture, but both hands are in Segoe UI Emoji.

Both outcomes lack digits in the first "twemoji" lines and have wide blank spaces instead. This shot of Firefox dev-tools Font pane shows these blanks are really from (remote) twemoji:

(You can see the System one listed last: that makes the flag in the second line.)

from twemoji-colr.

Viable hotfix seems to be specifying unicode-range: U+00A9-E007F; so that it does not involve unsupported characters. Using @RoelN's excellent https://wakamaifondue.com/beta/ reveals that besides digits 0..9 (U+0030-0039) also characters # (U+0023) and * (U+002A) are claimed and blank:

@font-face {
  font-family: twemoji-mozilla;
  src: url(https://xem.github.io/unicode13/Twemoji.ttf);
  unicode-range: U+00A9-E007F; /* @see https://github.com/mozilla/twemoji-colr/issues/56 */
}

U+00A9-E007F is just a crude superset sans offending glyphs that includes gaps from the precise range. Not an expert, but I think it should work fine, because glyphs that are not claimed to be supported by the font-face file will fall back through the font stack anyway.

	/** 
	@note [1] fix for characters "#", "*" and "0123456789"
	commented out because they are are currently blank
	@see bug https://github.com/mozilla/twemoji-colr/issues/56
	original range generated by https://wakamaifondue.com/beta/
	*/
    unicode-range: /* [1] U+0023, U+002A, U+0030-0039, */ U+00A9, U+00AE, U+200D,
        U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-2199, U+21A9-21AA,
        U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2,
        U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E, U+2611,
        U+2614-2615, U+2618, U+261D, U+2620, U+2622-2623, U+2626, U+262A,
        U+262E-262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F-2660,
        U+2663, U+2665-2666, U+2668, U+267B, U+267E-267F, U+2692-2697, U+2699,
        U+269B-269C, U+26A0-26A1, U+26A7, U+26AA-26AB, U+26B0-26B1,
        U+26BD-26BE, U+26C4-26C5, U+26C8, U+26CE-26CF, U+26D1, U+26D3-26D4,
        U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705,
        U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728,
        U+2733-2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757,
        U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934-2935,
        U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297,
        U+3299, U+E50A, U+FE0F, U+1F004, U+1F0CF, U+1F170-1F171,
        U+1F17E-1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201-1F202,
        U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250-1F251, U+1F300-1F321,
        U+1F324-1F393, U+1F396-1F397, U+1F399-1F39B, U+1F39E-1F3F0,
        U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E,
        U+1F550-1F567, U+1F56F-1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D,
        U+1F590, U+1F595-1F596, U+1F5A4-1F5A5, U+1F5A8, U+1F5B1-1F5B2,
        U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1,
        U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5,
        U+1F6CB-1F6D2, U+1F6D5-1F6D7, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB-1F6EC,
        U+1F6F0, U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F90C-1F93A, U+1F93C-1F945,
        U+1F947-1F978, U+1F97A-1F9CB, U+1F9CD-1F9FF, U+1FA70-1FA74,
        U+1FA78-1FA7A, U+1FA80-1FA86, U+1FA90-1FAA8, U+1FAB0-1FAB6,
        U+1FAC0-1FAC2, U+1FAD0-1FAD6, U+E0062-E0063, U+E0065, U+E0067,
        U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;

from twemoji-colr.

I don't understand why the digits and punctuation marks can't be just add to the font file? Their lack is very problematic. I found two methods to use Emoji in the browser, but either is perfect and have some problems.

First one I change the default font in the browser to Twemoji Mozilla. In some pages digits and punctuation is shown as blank space. It also doesn't work on some input areas, but that's not very important. Can be fixed with css, but that creates the same problem as from method 2.

In the second I use css, but that changes fonts on some pages. Just if there was a way to not change fonts on sites, but still allow them to use their own.

Could someone help me with that?

from twemoji-colr.

@maxoku why would an emoji webfont include non-emoji chars? Also, if the font did it, it would have to pick a font for these glyphs (Arial? Times new roman? other?)
IMO this file is optimal if you use it with the CSS unicode-range trick.

from twemoji-colr.

@xem

why would an emoji webfont include non-emoji chars?

To be complex and work properly in every situation? It contains letters already, so why not the rest of essential symbols like digits?

IMO this file is optimal if you use it with the CSS unicode-range trick.

Could you show me that trik? Nothing I try would work.

from twemoji-colr.

The comment above yours shows a code snippet.
Here's a link where you can see it live: https://codepen.io/xem06/pen/GRvLEoJ

from twemoji-colr.

@xem But that's not working, I'm trying it now.

from twemoji-colr.

Css code for family font work, but I don't want it to change fonts on sites. Is there a way that it wouldn't bypass fonts from sites?

from twemoji-colr.

If I understand correctly, you want to see all the emoji from all the websites of the world render their emoji using Twemoji instead of the default system's emoji. I don't think you can achieve that using CSS, or a browser extension. But if someone here knows a solution, I'm interested.

from twemoji-colr.

@xem but it does work, problem is it has side effects.

In method 1 where I change default browser font to Twemoji Mozilla is not showing digits. Css code can help, but it changes font on some sites. If I could only affect text that uses only default browser font and set family font to Arial and Twemoji Mozilla for it then it would be perfect. Now when I try to do that some sites with their own fonts start to use Arial, but I don't want that.

In method 2 where I just set bunch of fonts including Twemoji Mozilla at the end it also affects sites with their own fonts.

I just want to have emojis and don't change fonts of websites, is it too much to ask?

from twemoji-colr.

maybe! (but I hope I'm wrong)

from twemoji-colr.

There wouldn't really be any problem if the font just had digits and punctuation.

from twemoji-colr.