Possible Workaround for the "Red Heart Emoji" Issue

[jmahabal]

HI @rsms! Love Inter, thank you so much for creating it.

I was going to post this to #238 before the issue was closed, but this is the workaround we've been using to solve the problem at my current company. If you think the workaround is valid maybe it'd be worth adding as a comment for future users? And if there is a problem, would love to know so that I can stop using it 😅.

The downside is that we no longer get the Inter glyphs for those two characters, but this was an acceptable trade-off for us.

/*
  Note (11/15/21): Why are we using "unicode-range" here?
  The font we use across the application is Inter (https://rsms.me/inter/). Inter 
  has glyphs for characters like ⚠️ for their text-presentation version. However, 
  Chrome is using these glyphs whenever we show the emoji-presentation version 
  as well. The result is that users see an "Inter black heart" when they expect
  to see the "emoji red heart". While we wait for Chrome to recognize the 
  emoji-presentation character we can use CSS property "unicode-range", which lets
  us define which characters the font should apply to. For our case, we're excluding 
  the warning sign (U+26A0) and heavy black heart (U+2764) characters, and keeping 
  all others.
*/

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  src: local('Inter Regular'), url('/fonts/Inter-Regular.woff2') format('woff2'),
          url('/fonts/Inter-Regular.woff') format('woff');
  font-display: swap;
  unicode-range: U+0020-269F, U+26A1-2763, U+2765-FFFF;
}

[ihfandicahyo]

Follow up