Trying to create a custom Emoji font

[lostcarpark]

I'm trying to create a custom Emoji font for use on a website.

The font contains SVG colour glyphs imported from Inkscape, and monochrome fallbacks.

So far I have been unable to get the colour glyphs to be displayed in any application, but I'm mainly interested in getting it working in web browsers.

Here is the result I'm getting in Firefox on Linux (but the results are very similar across most operating systems and browsers):

I'm including the font with the following CSS:

      @font-face {
        font-family: "Lego Emojis";
        src: url(Lego_emojis.otf);
      }
      p {
        font-family: "Lego Emojis";
        font-size: 2rem;
      } 

On the first line, the monochrome emojis are getting used. The second emoji is not in the font, so the browser default is used.

On the second line, I have directly embedded the SVG in the HTML, which displays the correct image, but does cause the file size to grow quickly!

So I can think of three possible causes:

1. I'm generating the font files incorrectly.
2. I'm defining the font incorrectly in my CSS.
3. Browsers don't support this.

Any advice greatly appreciated.

I'm using Birdfont 6.7.1.

[johanmattssonm]

Thank you for the report. Please send me the SVG files and the .birdfont file (.bf). I will only use your files for debugging purposes. Address: ***@***.***