Add a custom font to be served by the gitmoji website

carloscuesta / gitmoji

An emoji guide for your commit messages. 😜

https://gitmoji.dev

MIT License

15.74k stars 799 forks source link

Add a custom font to be served by the gitmoji website #626

Closed kevin-dedaniya-rcrm closed 1 year ago

kevin-dedaniya-rcrm commented 3 years ago

Original title: Adhesive Bandage(🩹) emoji not working properly on Ubuntu 18.04

vhoyer commented 3 years ago

Yeah, this also happens for me, does anyone know a font that has support for this emoji?

carloscuesta commented 3 years ago

😱 Based on the spec it was added on 2019, so there should be some font that includes that as an emoji 😓

vhoyer commented 3 years ago

Yeah, personally, I have a problem with emoji fonts on my system, so the gitmoji site does a fallback through the fonts and, for me, uses the Noto Color Emoji, and apparently, this file does not have the adhesive bandage emoji... :confused:. (I also didn't find any font that could render this emoji either, but I think I don't know how to search for it ...)

vegerot commented 3 years ago

Should a requirement for a new gitmoji to be added to the spec require a certain availability of the emoji on common fonts in OSs?

For example, if the default font with Ubuntu 20.04 LTS (gnome) does not support it, should that disqualify the proposed gitmoji? (this gitmoji would not apply in that case)

carloscuesta commented 3 years ago

Previously I was very up-to-date on the Emojis releases and I rejected some proposals due to incompatibility or being to new. However I did not thought about this for that specific case 😓 .

I don't think the rules should be based on the default font of any system. We should base the criteria on the emoji support that GitHub and GitLab have, because under the hood they convert emoji characters to an image:

Screenshot 2020-11-24 at 16 50 33

vhoyer commented 3 years ago

Ok, I have to say that I simply updated my browser and now I have support for the missing emoji :eyes:

vhoyer commented 3 years ago

actually, more than that, I also redownloaded Noto Color Emoji file and reinstalled onto my fonts and restarted my computer, I'm not really sure what part of it was a solution to this, but there it is.

Hey, @carloscuesta, what do think if we ship a fallback font for emojis alongside the website?

carloscuesta commented 3 years ago

We can try to serve a fallback font at the website, or just try the image fallback, I will take a look into it. However emojis not being rendered on the website is not a "big deal" compared to introducing emojis that are not supported by GitHub.

vhoyer commented 3 years ago

Or even a default emoji font, this way we can choose colors with good contrast between the default font and the emoji background, which is not happening here, for example:

card	card with the emoji text selected

carloscuesta commented 3 years ago

Yes! Not a big fan though to depend on external fonts as the main resource for perf reasons but will take a look into it.

carloscuesta commented 3 years ago

I'm still considering options for this! I've found a font (which is not released yet) that we're going to implement it as soon as they came out!

Just for reference, here's what I found – https://sensa.co/emoji/ I think it is really beautiful 😍 . Signed up for the waitlist a week ago

As soon as they release the font I will work on this issue 😊

carloscuesta commented 3 years ago

They released a version of the font however it's missing a ton of emojis that we currently have on the website 😅

vhoyer commented 3 years ago

shame :( should we wait more or maybe choose another font?

carloscuesta commented 3 years ago

Not sure to be honest, 😅 after thinking about it for some time, I don't know if using different emojis on the website vs the ones that are used in GitHub is a great idea, as it can cause some kind of confusions

vhoyer commented 3 years ago

how about this then? https://github.com/github/g-emoji-element

carloscuesta commented 3 years ago

Yeah I remember I saw it, but I think I discarded it because they don't have SVG support?

vhoyer commented 3 years ago

Why we need svg support? does those images have fixed tiny size? like 25x25?

carloscuesta commented 2 years ago

Hey! Mainly for quality and performance 😊

connorjs commented 1 year ago

Unsure if we still want to improve this, but I re-found this issue, so I can share thoughts following my latest open source emoji exploration.

TL;DR - OpenMoji or JoyPixels (free license)

But +1 to the "website maybe should use native emoji given native viewing on e.g. GitHub

carloscuesta commented 1 year ago

Thanks for bringing this up!

I believe that your point is quite fair and given that there's no usage of any font in GitHub sticking to the native one might be the best for our users

It woulf be confusing for me to have different emojis if we used a custom font.

I'll close thin issue 😍