CSS reference to phone's Emoji font?

Question

I want to use this specific emoji in my web page 🔍 - 🔍

On Android, the browser recognises the Unicode glyph as an Emoji, and displays.

On the desktop it renders as a Unicode fallback character - a little square with numbers in.

So, using Symbola, Quivira, or any other font with the right symbols, I can fix that.

@font-face {
    font-family: 'quiviraregular';
    src: url('fonts/quivira.woff2') format('woff2');
}

body{
 font-family:sans-serif,quiviraregular;
}

However, now Android displays the symbol from the font, not the Emoji.

Is there any way to set the font-family declaration so that Android (and iPhone) will use their in-built colour Emoji and all other browsers will use the provided symbol font?

Answer 1

Modernizr has a (non core) feature detection for emoji support. If you create your own build of Modernizr with cssclasses and emoji you can use the .no-emoji class that's added to the html tag to have a different font-family.

body {
    font-family: sans-serif;
}

.no-emoji body {
    font-family: sans-serif, emojisymbols;
}

I've created a jsFiddle that shows a green background if you have emoji support, and a red background and Kenichi Kaneko's EmojiSymbols font if haven't got emoji support. Unfortunately I could only see the EmojiSymbols font work on Windows 7 + Firefox, but this might give you a start.

Update based on comment

To see that it is possible to detect a specific character is supported lets take a look at Modernizr's feature detection source code for emoji support:

define(['Modernizr', 'createElement', 'test/canvastext'], function( Modernizr, createElement ) {
  Modernizr.addTest('emoji', function() {
    if (!Modernizr.canvastext) return false;
    var node = createElement('canvas'),
    ctx = node.getContext('2d');
    ctx.fillStyle = '#f00';
    ctx.textBaseline = 'top';
    ctx.font = '32px Arial';
    ctx.fillText('\ud83d\udc28', 0, 0); // U+1F428 KOALA
    return ctx.getImageData(16, 16, 1, 1).data[0] !== 0;
  });
});

it works by creating a canvas element, rendering the 🐨 koala emoji and checking the red color channel value of a specific pixel, which I'm assuming exists in every rendition of this emoji.

You can extend this function to check if all emoji in a parameter list are supported, and if not use the emoji font fallback. I think that the best solution would be to render every emoji in the same canvas and to check if there is at least one pixel colored inside the bounding box of each emoji. I'm not sure how a unsupported emoji is rendered, it might be needed to detect this.

P.S. As I would assume that specifying the default font from which the emoji come before the fallback emoji font should be enough to solve this, am I correct in assuming that these emoji don't exist in a default font?