load twemoji dynamically as colr or sbix; fix monospace#3008
Conversation
| // we programatically add the right fontface. | ||
| let font; | ||
| if (await isColrFontSupported()) { | ||
| font = new FontFace("Twemoji", "url('../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2')", {}); |
There was a problem hiding this comment.
You should be able to require the font path like we do for images in JS, and that will allow you to keep the cache busting.
bwindels
left a comment
bwindels
left a comment
There was a problem hiding this comment.
looks good, would just consider excluding FF from the check.
|
|
||
| // we programatically add the right fontface. | ||
| let font; | ||
| if (await isColrFontSupported()) { |
There was a problem hiding this comment.
This check doesn't work on FF with content blocking enabled (enabled by default in Tor browser IIRC), even when giving the permission to extract canvas data. So it's going for the SBIX font without really needing.
We could sniff the user agent to exclude FF from the check, as it has supported COLR fonts since version 26, according to colorfonts.wtf?
|
addressed the comments so we can get this in the RC asap. Can you have another look @jryans ? |
|
The big emojis appear a bit clipped atm in Chrome on Linux: |
|
Tested on FF and Chrome with added changes and without riot-web webpack config PR, working fine. |
jryans
left a comment
jryans
left a comment
There was a problem hiding this comment.
Great, thanks for working on this! 😁 I have also tested with Firefox, Chrome, and Safari on macOS.
I suppose Windows and Electron on various platforms would be nice to know about, but can be tested after merging I think.
| } | ||
|
|
||
| // Firefox has supported COLR fonts since version 26 | ||
| // but doesn't support the check below with content blocking enabled. |
There was a problem hiding this comment.
I am curious what actually goes wrong with the content blocking, but it doesn't seem worth digging into right now...
Co-Authored-By: J. Ryan Stinnett <jryans@gmail.com>
3 participants
This uses a stripped down fork of https://github.com/RoelN/ChromaCheck/blob/master/chromacheck.js to determine whether your browser can render COLR fonts or not. If it can, it dynamically loads twemoji as COLR, failing that sbix.
The sbix version of the font was created by converting the colr one using TransType.
This also makes monospace fonts consistent as Inconsolata, to avoid inconsistencies from depending on system fonts.
If Twemoji fails entierly, we explicitly fall back to Apple or Noto emoji if we have them installed to avoid half-assed emoji in Arial, Helvetica, Courier etc taking priority.
should fix element-hq/element-web#9651 and element-hq/element-web#9765