Is Emoji Webfont Possible?

Yes and no. With SVG glyph and filter feImage elements, you can embed bitmap image into SVG font:

<glyph unicode="&#E001;">
    <filter>
        <feImage xlink:href="data:image/png:base64,..."></feImage>
    </filter>
</glyph>

SVG glyph and feImage filter

According to current SVG specification, the glyph element can be a single path data specification within the d attribute, arbitrary SVG as content within the glyph, or both. And the content can have any number of filter that contains it’s primitive element: feImage, which is a filter effect that creates an image from a raster graphic.

This means, if we convert a picture into data URI scheme, and place it in feImage’s xlink:href attribute, the browser should be able to treat that SVG glyph element as image.

Then, we can use this SVG font as webfonts, and include in CSS @font-face, happy ending:

@font-face {
    font-family: "emojiWebfont";
    src: url("emojiWebfont.svg#label") format("svg");
}

Not in the real life

However, there’s no web browser engine can handle arbitrary SVG content as glyph children, even WebKit.

So, this is a no go, currently.

Webfonts support on iPhone OS

Mobile Safari only supports SVG fonts, which is only just a collection of glyph vector paths. Can’t said it’s good or bad, the screen resolution on iPhone is small enough for this lightweight svg fonts usage, fast and hinting-ignorable. However, iPad has way larger screen, the svg fonts only webfonts support will be insufficient for rich typographical web design.

Btw, if you use web service like Font Squirrel to convert font file into svg font, you can edit the svg file later by removing the unused glyph data to reduce the file size, so your iPhone can load the page faster.

Top