A CSS snippet to replace the hardcoded Twitter emoji on Mastodon with the local font

mastodon-replace-emoji.css

/* NOTES:
 *
 * Obviously, for this to work, you will need to have an emoji font installed
 * locally. You will need to block e.g. static-cdn.mastodon.social/emoji in
 * your ad blocker of choice. I suggest uBlock for this.
 *
 * This uBlock filter will work around uBlock's "hide placeholders" option:
 * ||static-cdn.mastodon.social/emoji/*$empty
 *
 * Furthermore to load the background image, you'll need to upload it to your
 * Mastodon instance. You can then link it from your post's media attachment.
 * You can't use an external link because Mastodon uses a service worker that
 * fails on external links thanks to CORS.
 *
 * As of Dec 2022, the emoji bitmap needs to be compatible with emoji-data
 * 5.0.1. Ideally you should regenerate this file with the latest version of
 * your emoji font, while patching build_image.php to output 22x22 emoji. I've
 * done this for Noto Emoji release for Unicode 15.0 in the example URL below.
 */


.emoji-mart-emoji:not(.emoji-mart-emoji-custom) > span {
  background-image: url(https://files.mastodon.social/media_attachments/files/109/477/020/421/281/912/original/d7d18d7bc019902b.png) !important;
}

img.custom-emoji {
  margin-bottom: -3px !important;
}

img.emojione {
  vertical-align: initial;
}