Emoji font not working

Glitch Help
1

I was on the web when I found this cool emoji font. I tried to install it but then when I type an emoji into the website it was just a blank character. Then I thought maybe it was just the font so I cut it out. The emojis were still blank. I realized you can’t put emojis into glitch in the first place. I downloaded my code to view in my code editor and it worked perfectly. Is there a way to add emojis to glitch? Please let me know.

Here is my code below

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
@font-face {
  font-family: EmojiFont;
  src: url("https://cdn.glitch.global/ff7fa0f1-70cf-41a4-a7ce-7b54edb33523/NotoEmoji-VariableFont_wght.ttf?v=1656123708909");
}

body {
  font-family: Quicksand, EmojiFont;
  text-decoration: none;
}
2

Hello! It works for me on glitch.

image
image1351×673 66.1 KB

(https://important-determined-bronze.glitch.me/)

3

What did you put in your html file?

4

Oh I think you need to wrap your emojis in a span with a class/anything-else, eg., “emoji” and then refer that class in the CSS with the font family, like this:

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
@font-face {
  font-family: EmojiFont;
  src: url("https://cdn.glitch.global/ff7fa0f1-70cf-41a4-a7ce-7b54edb33523/NotoEmoji-VariableFont_wght.ttf?v=1656123708909");
}

body {
  font-family: Quicksand;
  text-decoration: none;
}

emoji {
font-family: EmojiFont;
}

here is a <emoji>✨✨✨</emoji>

(this is only need if your current font has support for emojis and text)

6

I did it but it doesn’t work still :frowning:

8

from the emoji keyboard ( win + .)

9

I figured out that I can’t type emojis directly into the code but I can type them, copy and paste it, then it will work. Thanks for trying everyone! :slightly_smiling_face:

10

Yes that’s what I said! I hope your problem is solved

12

Yes I asked him where he copied emojis from since you copy emojis from the Google font site

13

Normally I copy emojis from window’s emoji board and it works.
Windows + dot

14

That is literally what I just did

15

Normally what I do is just use the emoji clipboard, but I don’t use an emoji font. And sometimes, because I like Microsoft’s emoji style, I just go to emojipedia.org and get an image

16

Why was this flagged?

17

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.