8
On Windows operating system while using emojis the source used by browsers usually is the Segoe UI Emoji
Note: in Firefox it has its own "emoji system", I believe it uses the
Twemoji Mozilla: - https://github.com/mozilla/twemoji-colrWhat makes Firefox have its own emojis, without relying on operating system support
It is possible via CSS and external sources to customize the emojis of a page?
This is without using images and the like, the idea is to actually use the emojis Unicode
1
Yes! There’s a way.
As you probably already know, each source brings us a different kind of emoji.
You can search which source matches the kind of emoji you want and do it:
@font-face {
font-family: FonteNoto;
src: url("https://cdn.rawgit.com/googlei18n/noto-emoji/07ad7f0f/fonts/NotoEmoji-Regular.ttf");
unicode-range: U+1F600-1FFFF;
}
/* no código acima você chama a fonte */
.fonte01 {
font-family: Noto;
}
/* nesse acima você define a fonte da div. */
then when you apply, you use it like this:
<div class="fonte01">Noto Emoji Color: </div>
credits to brother @fernandosavio who in link did this test and brought knowledge to us.
Thank you dear Bianca, but I’m looking for a technical answer on the CSS language and its feautures, so I need you to clarify, this range U+1F600-1FFFF for all emojis? Solve any emoji? Including all current ranges http://unicode.org/emoji/charts/emoji-versions.html?
@Guilhermenascimento, emojis with ZWJ are not in this range, as they are "letters composed" of several emojis separated by "zero-length space joiner"
Browser other questions tagged html css html5 css3 css-font-face
You are not signed in. Login or sign up in order to post.
@hugocsl is, the same as "Firefox" does internally, where it switches emoji sources in the operating system to its own sources, thus managing to support even systems with "little support"
– Guilherme Nascimento
@Guilhermenascimento, had even mounted a response, but I believe it was not quite what you asked for. What you want is something like that?
– João Pedro Schmitz
@Joãopedroschmitz yes I saw your answer and the link you posted now, but what I want is CUSTOMIZE and not WEAR in specific locations or specific actions, as in iOS, FF and Windows if you look at the same emojis do not appear the same visually, the idea is to customize the look of the "Unicode emojis", I’m talking about Unicode and fonts and not how to use CSS. I ask questions like this to create content, it is enough that they vary visually in different operating systems: https://emojipedia.org/grinning-face/
– Guilherme Nascimento
I tried using
@font-facebut I couldn’t, my idea was to put within the rule afont-family: "mesmo nome da font emoji local"and then putsrc: url('http://site/seuEmojiCustomisado.ttf')but in the tests I’ve done here locally I haven’t been able to come up with a result...– hugocsl
@hugocsl I’ll give you a hint, search for Unicode control Character or Unicode codepoints, i will not formulate an answer yet because I want to give chance to everyone and so "warm up the site".
– Guilherme Nascimento
@Joãopedroschmitz the same as I said to the hugocsl above. Let’s warm up the site :)
– Guilherme Nascimento
Damn, very cool question! And searching for the answer made me learn something new today!
– fernandosavio