Open
Description
Currently the emojis are custom styled with the Noto Emoji font.
When the page is loaded the emojis are wrapped in a span with class emoji and then the css styling is applied.
In _layouts/default.html
<script>
document.addEventListener('DOMContentLoaded', () => {
const emojiRegex = /([\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2702}\u{1F004}\u{1F0CF}\u{1F191}-\u{1F251}\u{1F1E6}-\u{1F1FF}\u{200D}\u{2620}\u{26A7}\u{FE0F}\u{1F308}\u{1F38C}\u{1F3C1}\u{1F3F3}-\u{1F3F4}\u{1F6A9}\u{E0062}-\u{E007F}\u{1FA00}-\u{1FAFF}])/gu;
document.body.innerHTML = document.body.innerHTML.replace(emojiRegex, '<span class="emoji">$1</span>');
});
</script>In _sass/mold.scss
.emoji {
font-family: 'Noto Emoji', sans-serif;
font-weight: 400;
}Find a way to do this without JS. One option could be to do this emoji-span-wrap during static site generation step, but find a css only way.