Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Emoji is solid black in latest Firefox #31

Open
o-t-w opened this issue Apr 24, 2018 · 11 comments
Open

Emoji is solid black in latest Firefox #31

o-t-w opened this issue Apr 24, 2018 · 11 comments

Comments

@o-t-w
Copy link

o-t-w commented Apr 24, 2018

I'm in the latest version of Firefox. The emoji are displaying as solid black.
The emoji is not displaying at all in Chrome, even though this format is now supported by Chrome.
@timdream
Copy link
Contributor

Could you give us more detail like OS version, the page you are testing on etc.?

@o-t-w
Copy link
Author

o-t-w commented Apr 24, 2018

macOS High Sierra. version 10.13.2
Firefox Nightly 61.0a1
Chrome Version 67.0.3395.0 (Official Build) canary (64-bit)
Its just a test page of HTML with a single emoji on it.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    @font-face {
      font-family: "twemoji";
      src: url("Twemojicolr.ttf") format("truetype");
    }

    * {
        font-size: 35px;
    }
    .twemoji {font-family: "twemoji";}

    </style>
</head>
<body>
    <p class="twemoji">🤯</p>
</body>
</html>

@timdream
Copy link
Contributor

And you downloaded the font file from the release page here? Or you build it yourself?

@o-t-w
Copy link
Author

o-t-w commented Apr 24, 2018

The latest TwemojiMozilla.ttf from the release page.

@o-t-w
Copy link
Author

o-t-w commented Apr 24, 2018

Just checked in Safari 11.0.2 and the font displays correctly.

@timdream
Copy link
Contributor

Have you spun up a localhost server, or did you testing it from file://? We have test page in-place in this repo where we could visually inspect the glyph and compare it against source SVGs, and it only worked on a localhost server. I can't remember why and I don't find anything online saying that you can't use file://, but it might be the cause here.

@o-t-w
Copy link
Author

o-t-w commented Apr 24, 2018 •
edited
Loading

I was running it just from file://

I have now set up node server to serve the page and am still getting the same problem everywhere except Safari

@TheEssem
Copy link
Collaborator

TheEssem commented Apr 24, 2018 •
edited
Loading

I can confirm the problem with Chrome on both Windows 8.1 and Windows 10, all versions.

@polarathene
Copy link

Try font-family: "Twemoji Mozilla";? At least on Firefox, if you don't have "about:config" emoji font set to "Mozilla Twemoji"(bundled with the browser and set as default), this is how you use that font in CSS declarations, not Twemoji.

@yisibl
Copy link

yisibl commented Feb 7, 2021

I rebuild the font and try this file.
twemoji-colrv0.ttf.zip

@CoelWu
Copy link

CoelWu commented May 31, 2021

@yisibl This works perfect for me! Do you have the modified source code? Thanks. 感谢大佬

I rebuild the font and try this file.
twemoji-colrv0.ttf.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@timdream @yisibl @polarathene @TheEssem @o-t-w @CoelWu