Version 0.8.2
You can confirm from Listing emoji sample or p5.js sample.
This repository supplies Webfont version of Fluent Emoji from Microsoft.
By using this, You can use Fluent Emoji anywhere/anytime with any device(even with a non-Windows device)!
Here you can choose one of three types of Fluent Emoji.
Fluent Emoji Color
Fluent Emoji Flat
Fluent Emoji High Contrast
Now, there are .woff2 and .ttf fonts in this repository.
Add @import url('***.css') and font-family in your .css file as below:
@import url('https://tetunori.github.io/fluent-emoji-webfont/dist/FluentEmojiColor.css');
html, body {
...
font-family: 'Fluent Emoji Color';
...
}Here are the other options for font-family:
@import url('https://tetunori.github.io/fluent-emoji-webfont/dist/FluentEmojiFlat.css');
...
font-family: 'Fluent Emoji Flat';@import url('https://tetunori.github.io/fluent-emoji-webfont/dist/FluentEmojiHighContrast.css');
...
font-family: 'Fluent Emoji High Contrast';After @import url('***.css') in .css file as in the section 'General usage', call textFont() as below:
function setup() {
createCanvas(windowWidth, windowHeight);
textFont('Fluent Emoji Color');
}
function draw() {
background(0);
text('🐲🥳🎉👏🎊🍻', width / 2, height / 2);
}Note: The font might take a time to load, so if it does not work, try reloading it in your browser.
You can also use this fonts in the web based coding site like OpenProcessing.
See the samples below:
Download following ttf fonts and use them as you like👍:
Currently, this fonts have a lot of bugs and restrictions. Please refer to the following table and GitHub Issues for the latest status.
I am also super welcoming your confirmation. Please feel free to comment for your confirmation result in the issue thread: (#17)Confirmation results in each environment.
| Environment | Listing sample | p5.js sample | Ref: Noto Color Emoji | Note |
|---|---|---|---|---|
| 💻Windows 11, Chrome | ✅ | ✅ | ✅ | Windows 11 Home v10.0.26100, Chrome v131.0.6778.205 |
| 💻Windows 11, Edge | ✅ | ✅ | ✅ | Windows 11 Home v10.0.26100, Edge v131.0.2903.112 |
| 💻macOS , Chrome | ✅ | ✅ | ✅ | M2 Mac Sonoma v14.7.1, Chrome v131.0.6778.205 |
| 💻macOS , Safari | ❌ | 🤔 | ❌ | M2 Mac Sonoma v14.7.1, Safari v17.6(19618.3.11.11.5). Listing: lots of emojis are not shown or need many time to render. p5.js: Basically good but some characters are not displayed. correctly. |
| 📱iOS , Chrome | ❌ | 🤔 | ❌ | iOS 18.1.1, Chrome v131.0.6778.154. Listing: lots of emojis are not shown. p5.js: Basically good but some characters are not displayed. |
| 📱iOS , Safari | ❌ | 🤔 | ❌ | iOS 18.1.1. Listing: lots of emojis are not shown. p5.js: Basically good but some characters are not displayed. |
| 📱Android , Chrome | ❔ | ❔ | ❔ | Not tested yet. |
| 💻ChromeOS , Chrome | ❔ | ❔ | ❔ | Not tested yet. |
Here is my dev environment
- OS: Windows 11 Home
v10.0.26100 - Browser: Google Chrome
v131.0.6778.205 - Python:
v3.11.9
Basically, a fixed version of fluent-emoji submodule is used for this build. You can update the submodule as below:
$ git submodule update --remote
Submodule path 'fluentui-emoji': checked out '62ecdc0d7ca5c6df32148c169556bc8d3782fca4'Then, commit the change after git processing(a few minutes).
Execute build_woff2.sh with an fontType option.
./build_woff2.sh color- Options:
color,flatandhcforHigh Contrast
Then, you can get FluentEmoji***NNN.woff2 files and a FluentEmoji***.css file after long (about half an hour) time build.
Execute build_ttf.sh with an fontType option.
./build_ttf.sh color- Options:
color,flatandhcforHigh Contrast
Then, you can get a FluentEmoji***.ttf files after long (about half an hour) time build.
Now we can build with GitHub Actions! Just access to build workflow page and press Run workflow buttton with any Font Format/Font Type as you like. Built artifact will be attached in the result page as a Font zip file.
Important
For only making color ttf font, Please select macos-latest in runs-on property. Otherwise, it fails due to the time restriction(6 hours) of GitHub Actions. If fails even with the macos-latest setting, execute twice. The second time the cache will be used and the job time will be reduced.
Before a release, we can test with local server. If you execute the commands below,
$ chmod 777 ./test/confirmDist/prepare.sh
$ ./test/confirmDist/prepare.shtest folders tmp-ttf and tmp-woff2 under ./test/confirmDist/ will be made. These folders has 2 samples refering to the fonts in dist folder. Then, launch the index.html with liveServer in Visual Studio Code.
Check the result with the Listing emoji sample.
You can also update the JS list file sample/list/glyphs.js with the command below:
python makelist.py
Copyright (c) 2024 Tetsunori Nakayama. MIT License.
Tetsunori Nakayama
All of SVG font assets and other images. (Huge thanks and 💕 to Microsoft !!)
fluentui-emoji by microsoft. MIT License.
Conversion scripts.
fluent-color-emoji by GCMarvin. The Unlicense.
For a sample code p5.js by Processing Foundation. GNU Lesser General Public License v2.1.