search

hfg-gmuend / openmoji

Open source emojis for designers, developers and everyone else!
http://openmoji.org
Creative Commons Attribution Share Alike 4.0 International
3.84k stars 213 forks source link

What is the recommended way to have openmoji as the main emoji font on web #501

Open anytimesoon opened 1 month ago

anytimesoon commented 1 month ago

Hello,

I would like to know what the recommended way of having openmoji as the main emoji font, while using a different font for regular alphanumeric characters. I have a chat app that gets user input, so it's impossible to know ahead of time where the emojis will be, so I can't wrap them in a span to give them their own styling.

Currently, I load the font with a liimted unicode range, which mostly works, but might become a little cumbersome to maintain:

    @font-face {
        font-family: 'OpenMojiFont';
        src: url('/font/OpenMoji-color-glyf_colr_1.woff2');
        font-weight: bold;
        unicode-range:  U+1F972, U+1FAE2, U+1FAE3, U+1FAE1, U+1FAE5, U+1FAE8, U+1F975, U+1F976, U+1F974, U+1F978, U+1FAE4, U+1F97A, U+1F979, U+1F971, U+1FA77, U+1F973, U+1F970, U+1FAE0, U+0080-02AF, U+0300-03FF, U+0600-06FF, U+0C00-0C7F, U+1DC0-1DFF, U+1E00-1EFF, U+2000-209F, U+20D0-214F, U+2190-23FF, U+2460-25FF, U+2600-27EF, U+2900-29FF, U+2B00-2BFF, U+2C60-2C7F, U+2E00-2E7F, U+3000-303F, U+A490-A4CF, U+E000-F8FF, U+FE00-FE0F, U+FE30-FE4F, U+1F000-1F02F, U+1F0A0-1F0FF, U+1F100-1F64F, U+1F680-1F6FF, U+1F910-1F96B, U+1F980-1F9E0;
        font-display: swap;
    }

Is there an alternative that someone can suggest? Or maybe have a full unicode range/list that is supported which could be added to a css like this?

RealityRipple commented 1 month ago

This doesn't actually cover every emoji, but I'd suggest using the two simple ranges U+2600-27FF and U+1F170-1FAFF.

P.S. : Of course, you'll want U+200D for ZWJ sequences and U+FE0F to force pictographs where applicable (I don't know which effect adding FE0E has, fixing or breaking non-pictographic support, but it's extremely rare to run into anyway) but those should be pretty self-evident if you know the basics.

anytimesoon commented 4 weeks ago

This seems to have worked, thank you. Much more manageable than whatever mess I had going on.