CSS Reference to Phone's Emoji Font

How can I use a diffrent style for emojis?

You cannot modify the rendering of emoji directly. Regardless of font-face, the user’s browser and OS determine how emoji characters are rendered.

But what you can do, is what Twitter and some other platforms do, which is to process the input text to replace emoji characters with any other image you would like.

Check out this article with more info, including a link to Twemoji, a handy open source library by Twitter to handle this very problem.

How to use an emoji font on a website?

Color fonts are quite new with several competing standards which are still evolving and being implemented in common text libs (Opentype 1.8 has just been released with another color twist).

They are unlikely to work today except in the very latest preview browsers, and even then the level of support is likely to vary and depend on the underlying system, since browsers do use the system text libs (with various levels of overrides).

Older software will just not recognize the Opentype extensions added to make those fonts possible.

Lastly, Noto Color Emoji is pretty much a prototype, it is likely early versions are not quite conformant to what has been standardised later, and even if they are, the way the color font standards are used is still likely to evolve as font producers and font consumers gain maturity on the subject.

Prevent font rendering as an emoji

It's possible to override the Emoji rendering of a psuedo element. I would recommend trying to use a special unicode character. U+FE0E (0xFE0E). Like so: content: "\2714 \FE0E";

content: "[enter your emoji unicode here] \FE0E";

I used this convert tool to get the right CSS unicode for the emoji to place inside the 'content': https://r12a.github.io/app-conversion/

About U+FE0E

This codepoint may change the appearance of the preceding character.
If that is a symbol, dingbat or emoji, U+FE0E forces it to be rendered
in a textual fashion as compared to a colorful image. The Unicode
standard defines some standardized variants. See also “Unicode symbol
as text or emoji” for a discussion of this codepoint.

Sources: https://codepoints.net/U+FE0E, https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

Example:

.test:before {  content: "✔";}
.test2:before {  content: "\2714 \FE0E";}

<!-- if your looking in Chrome or Firefox this will both look the same --><div class="test"></div><div class="test2"></div>

How do I use @font-face with the Noto Emoji font by character references?

1- Make sure your directory is correct.

2- You should add format of font src:

@font-face {
 font-family: "Noto Emoji Regular";
 src: url('NotoEmoji-Regular.ttf')  format('truetype');
}

3- 🖕; is not correct with Noto Emoji font. Try with: ℹ (ℹ)

For cross browsers, you have to convert to web fonts, example:

@font-face {
 font-family: 'Noto Emoji Regular';
 src: url('NotoEmoji-Regular.eot'); /* IE9 Compat Modes */
 src: url('NotoEmoji-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('NotoEmoji-Regular.woff2') format('woff2'), /* Super Modern Browsers */
   url('NotoEmoji-Regular.woff') format('woff'), /* Pretty Modern Browsers */
   url('NotoEmoji-Regular.ttf')  format('truetype'), /* Chrome, Safari, Android, iOS */
   url('NotoEmoji-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Emojis won't scale beyond 16px font-size on IOS 7

If this is still interesting for anyone (I forgot that this was still open) then the "solution" was to set the meta tag for iPhones to:

<meta name="viewport" content="width=320"/>

This ensures that the iPhone scales the content up to fit the 640 pixels (or more) the screen has, and the emojis with 16px size will now be twice as big. However, this will only scale them up to a reasonable size. It still doesn't fix it for the people wanting to control the font-size completely.

---

Related Topics