I already did the “base64 method” (you know what i mean…) to import the Webdings and Wingdings fonts to my game, but the fonts fall short of icons actually. I want to use Unicode icons the same way, but since they don’t belong to a “font” per se -as far as I understand-, I don’t know how to import them.
With the aforementioned fonts, I just converted the font file to “base64” code and pasted it on the stylesheet, preceded by “@font-face{font-family:‘Webdings’; src: url(data:application/font-woff;charset=utf-8;base64,”.
How can I do it with the Unicode icons then? Do I have to go character by character? What is the correct “prefix” to paste them on the stylesheet? How should I display them on the passage later, putting the character code or copy-pasting the icon?
In basic, you don’t need to import anything just to use emojis. That said, emoji representations will differ somewhat between systems and devices if you don’t specify your own emoji font. Only you can decide if that’s acceptable to you.
Regardless. For any emoji, just paste in the character or reference its code point, using whatever syntax is dictated by whatever you’re doing.
With that method, it happened to me that some of the emojis won’t display, depending on the browser. If I import a font with the base64 method and use the raw character with it, would it be displayed everywhere as the same thing then?
If you find a 3rd-party font that supports all of the Unicode emoji you want to use, then using that font when displaying the emoji should allow them to both display and in a consistent manner.
Most default Unicode emoji-bearing fonts come from the operating system, so browsers generally don’t have a lot to do with it. I have to say generally, because Chrome was a notably bad actor with emoji support in the past—though even it has finally caught up.
The likeliest reasons for missing emoji are:
The emoji is too new. As with anything, you probably shouldn’t expect wide support of newer emoji as system updates take time to filter down to end users, whether we’re talking about desktop operating systems or mobile devices.
The emoji has not yet been added to the system’s default emoji font, for whatever reason. E.g., Microsoft has yet to add any of the national flag emoji to Windows’ emoji font.
PS:Emojipedia does provide lists of emoji by platform (bottom of the main page) and Can I Emoji? shows system+browser support for mainstream systems.
I have downloaded a font (“Symbola”) that can display much more Unicode emojis than regular fonts. I made a base64 code with it and imported it to my game. Now it works as a font in my game, even though I didn’t install it on my operating system.
But when it has to display emojis that other fonts can’t, it just won’t. I copy-pasted the raw emoji from the pdf that has all the font characters, and it just displays the typical blank square. I even tried the code for html for that character (“skier”):
@@font-family:'Symbola'; ⛷ ⛷ @@
But it doesn’t work either. The other emojis, the ones that are displayed by the other fonts that I can try, those work fine.
In other words, imported 3rd-party fonts that support unicode emojis don’t seem to display the emojis they should. I don’t understand where this limitation may come from.
EDIT: There’s more to it: In my game, unicode characters are displayed exactly the same by any font, the same as they are seen in the Twine text screens, while those by the “Symbola” font should be a lot different. They all look exactly like they are shown as I paste them in the Twine interface, so I guess the Twine font must be overriding the emojis somehow. The regular characters are displayed as they should in the “Symbola” font, only the emojis change.
First. I’d be leery about pasting anything whose Base64-encoded size is over 4 MiB into a Twine 2 project. The current version of the Symbola OTF (version 13.00, March 2020) clocks in at approximately 3.15 MiB unencoded and 4.2 MiB Base64-encoded. Twine 2 itself is really not designed to handle that size of content. I’d look into Twee notation and a Twee compiler if you want to embed content with that kind of size.
Back to your issue. Something has apparently gone wrong in your testing because it works for me, as seen in the following image where I display “skier” (U+26F7), “tent” (U+26FA), and “fuel pump” (U+26FD). For contrast, I show them in both the default font stack and Symbola.
(captured from a SugarCube Twee project compiled with Tweego)
As you can see, the Symbola font versions are displaying exactly as they should with glyphs from the font.
I can’t say what’s gone wrong on your end without knowing more. Can you provide a copy of your project that we may look at?
I just did a new blank story, imported the font and displayed the same characters as you in the starting passage. This is the result:
I tried to upload the story but the uploader won’t let me put html files.
I think it’s quite possible that I did some mistake in the proccess of importing the font to my story, so please tell me how you did it, step by step (the websites you used, even the one where you downloaded the font), so I can do the same on the blank project. If nothing changes then, it would clearly be a Twine issue.
As I noted in my post, I used Tweego—it knows how to embed various kinds of fonts, so I didn’t have to do anything manually. If I were to do it manually, I have a Base64 utility that I’d use to get the encoded font data, which I’d then paste into a @font-face CSS rule—example below.
If you’re simply Base64-encoding the OTF font, then once you have the Base64-encoded font data, your @font-face CSS rule should look something like the following:
EDIT: Here’s a ZIP archive of a CSS file containing a Symbola @font-face CSS rule, which already includes the Base64-encoded font. Try copy-pasting that. Symbola.css.zip (1.9 MB)
