search

nolanlawson / emoji-picker-element

A lightweight emoji picker for the modern web
https://nolanlawson.github.io/emoji-picker-element/
Apache License 2.0
1.27k stars 80 forks source link

`--emoji-font-family` CSS property not working correctly on Windows #396

Closed imattferreira closed 6 months ago

imattferreira commented 6 months ago

Hey, what's up?

Recently, I've started implementing the emoji-picker-element for a design system written in ReactJS. For a better experience between the platforms that the design-system primarily support (Windows, Android, iOS and macOS, all in your web versions) I decided to use Apple Emojis instead of native emojis.

To configure the Apple Emojis for the emoji picker, I have using the --emoji-font-family CSS property with the value "Apple Color Emoji". But for some reason, in Windows devices are rendered native emojis instead of the Apple Emojis, but I already verified in the DevTools and the property are overriding the default value with the correct.

image

In addiction with this setting, I've configured the emoji picker with the v15 as emoji version, pt-BR as i18n and https://cdn.jsdelivr.net/npm/emoji-picker-element-data@1.6.0/pt/cldr/data.json as dataSource.

Here is a minimal reproduction in codesandbox with the way I have using the library.

I appreciate for the help.

nolanlawson commented 6 months ago

--emoji-font-family is designed for cases where you are bringing your own font file (e.g. your own WOFF2 file). It will not work in situations where you are trying to use the built-in fonts instead, unless those fonts are available cross-platform. Apple Color Emoji is only available on Apple devices, not Windows devices.

If you want to use the Apple font everywhere, you would need to find a way to package up the Apple font as a WOFF2 file and include that on your web page (and also get permission from Apple since there are copyright issues involved :slightly_smiling_face:).

For reference, please see the example which uses a custom Twemoji WOFF2 font.

nolanlawson commented 6 months ago

Closing, please reopen if I misunderstood the question!