Last Updated: September 29, 2021
·
10.25K
· mfornos

Display Emoji glyphs intermingled with arbitrary text

Nowadays Emoji glyphs has become pervasive in mobile communication contexts, are fun and carry out a great karma, so we'll try to display these fancy ideograms intermingled with arbitrary text in a frictionless font-based way, although relying on an experimental CSS descriptor named unicode-range.

The recipe

1) First of all, declare the font-face to be applied to characters (or Unicode code points) outside Emoji blocks:

@font-face {
  font-family: emoji;

  /* Fonts for text outside emoji blocks */
  src: local('Droid Sans Mono'),
       local('Lucida Console'),
       local('Arial Monospaced'),
       local(Arial);
}

In this case we defined a monospaced font family.

2) Now is time for the fucking bulletproof bits (i.e. declaring the real Emoji family compatible with native fonts):

@font-face {
  font-family: emoji;

  src: local('Apple Color Emoji'),
       local('Android Emoji'),
       local('Segoe UI'),
       local(EmojiSymbols),
       local(Symbola),
       url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
       url('font/Symbola-Emoji.woff') format('woff'),
       url('font/Symbola-Emoji.ttf') format('truetype');

  /* Emoji unicode blocks */
  unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}

Um... okay, you may have noticed some remote font files from unknown origin. Let's accept a quick explanation in discharge. These fonts are based on Symbola truetype and were generated using Fontforge with the following script:

#!/usr/bin/fontforge

/*

==================
Keeps Emoji Glyphs
==================

Usage:

$ chmod +x emoji.pe
$ ./emoji.pe

alternately

$ fontforge -script emoji.pe font.ttf emoji-font.ttf

*/

Open($argv[1]);
SelectNone();

SelectMore(0u1F300, 0u1F5FF);
SelectMore(0u1F600, 0u1F64F);
SelectMore(0u1F680, 0u1F6FF);
SelectMore(0u2600, 0u26FF);

SelectInvert();
Clear();

Generate($argv[2], "", 4);

3) After hard work we expect some reward, might be sugar cubes or cold beer, but due the limitations of the medium I just provide an HTML page to test that it works for you:

<html>
<head>
    <meta charset="utf-8">
    <title>Emoji Test</title>
    <link type="text/css" rel="stylesheet" href="emoji.css" />
    <style>
     .test {
        font-family: emoji;
     }
     .test:hover {
        color: #D9432E;
     }
     body {
        font-size: 2.5em;
        -webkit-font-smoothing: antialiased;
        line-height: 1.4;
        color: #2A2323;
        background-color: #EFEFEA;
        margin: 5%;
     }
    </style>
</head>
<body>
<pre class="test">
You can mix text with em๐Ÿ˜ถji glyphs, like this one ๐Ÿ’“, 
WITHOUT wrapping ideograms into any HTML tag. ๐Ÿ’•
</pre>
<pre class="test">
People -------------------------------------------------------------------------
๐Ÿ˜„๐Ÿ˜ƒ๐Ÿ˜€๐Ÿ˜Šโ˜บ๐Ÿ˜‰๐Ÿ˜๐Ÿ˜˜๐Ÿ˜š๐Ÿ˜—๐Ÿ˜™๐Ÿ˜œ๐Ÿ˜๐Ÿ˜›๐Ÿ˜ณ๐Ÿ˜๐Ÿ˜”๐Ÿ˜Œ๐Ÿ˜’๐Ÿ˜ž๐Ÿ˜ฃ
๐Ÿ˜ข๐Ÿ˜‚๐Ÿ˜ญ๐Ÿ˜ช๐Ÿ˜ฅ๐Ÿ˜ฐ๐Ÿ˜…๐Ÿ˜“๐Ÿ˜ฉ๐Ÿ˜ซ๐Ÿ˜จ๐Ÿ˜ฑ๐Ÿ˜ ๐Ÿ˜ก๐Ÿ˜ค๐Ÿ˜–๐Ÿ˜†๐Ÿ˜‹๐Ÿ˜ท๐Ÿ˜Ž๐Ÿ˜ด
๐Ÿ˜ต๐Ÿ˜ฒ๐Ÿ˜Ÿ๐Ÿ˜ฆ๐Ÿ˜ง๐Ÿ˜ˆ๐Ÿ‘ฟ๐Ÿ˜ฎ๐Ÿ˜ฌ๐Ÿ˜๐Ÿ˜•๐Ÿ˜ฏ๐Ÿ˜ถ๐Ÿ˜‡๐Ÿ˜๐Ÿ˜‘๐Ÿ‘ฒ๐Ÿ‘ณ๐Ÿ‘ฎ๐Ÿ‘ท๐Ÿ’‚
๐Ÿ‘ถ๐Ÿ‘ฆ๐Ÿ‘ง๐Ÿ‘จ๐Ÿ‘ฉ๐Ÿ‘ด๐Ÿ‘ต๐Ÿ‘ฑ๐Ÿ‘ผ๐Ÿ‘ธ๐Ÿ˜บ๐Ÿ˜ธ๐Ÿ˜ป๐Ÿ˜ฝ๐Ÿ˜ผ๐Ÿ™€๐Ÿ˜ฟ๐Ÿ˜น๐Ÿ˜พ๐Ÿ‘น๐Ÿ‘บ
๐Ÿ™ˆ๐Ÿ™‰๐Ÿ™Š๐Ÿ’€๐Ÿ‘ฝ๐Ÿ’ฉ๐Ÿ”ฅโœจ๐ŸŒŸ๐Ÿ’ซ๐Ÿ’ฅ๐Ÿ’ข๐Ÿ’ฆ๐Ÿ’ง๐Ÿ’ค๐Ÿ’จ๐Ÿ‘‚๐Ÿ‘€๐Ÿ‘ƒ๐Ÿ‘…๐Ÿ‘„
๐Ÿ‘๐Ÿ‘Ž๐Ÿ‘Œ๐Ÿ‘ŠโœŠโœŒ๐Ÿ‘‹โœ‹๐Ÿ‘๐Ÿ‘†๐Ÿ‘‡๐Ÿ‘‰๐Ÿ‘ˆ๐Ÿ™Œ๐Ÿ™โ˜๐Ÿ‘๐Ÿ’ช๐Ÿšถ๐Ÿƒ๐Ÿ’ƒ
๐Ÿ‘ซ๐Ÿ‘ช๐Ÿ‘ฌ๐Ÿ‘ญ๐Ÿ’๐Ÿ’‘๐Ÿ‘ฏ๐Ÿ™†๐Ÿ™…๐Ÿ’๐Ÿ™‹๐Ÿ’†๐Ÿ’‡๐Ÿ’…๐Ÿ‘ฐ๐Ÿ™Ž๐Ÿ™๐Ÿ™‡๐ŸŽฉ๐Ÿ‘‘๐Ÿ‘’
๐Ÿ‘Ÿ๐Ÿ‘ž๐Ÿ‘ก๐Ÿ‘ ๐Ÿ‘ข๐Ÿ‘•๐Ÿ‘”๐Ÿ‘š๐Ÿ‘—๐ŸŽฝ๐Ÿ‘–๐Ÿ‘˜๐Ÿ‘™๐Ÿ’ผ๐Ÿ‘œ๐Ÿ‘๐Ÿ‘›๐Ÿ‘“๐ŸŽ€๐ŸŒ‚๐Ÿ’„
๐Ÿ’›๐Ÿ’™๐Ÿ’œ๐Ÿ’šโค๐Ÿ’”๐Ÿ’—๐Ÿ’“๐Ÿ’•๐Ÿ’–๐Ÿ’ž๐Ÿ’˜๐Ÿ’Œ๐Ÿ’‹๐Ÿ’๐Ÿ’Ž๐Ÿ‘ค๐Ÿ‘ฅ๐Ÿ’ฌ๐Ÿ‘ฃ๐Ÿ’ญ

Nature -------------------------------------------------------------------------
๐Ÿถ๐Ÿบ๐Ÿฑ๐Ÿญ๐Ÿน๐Ÿฐ๐Ÿธ๐Ÿฏ๐Ÿจ๐Ÿป๐Ÿท๐Ÿฝ๐Ÿฎ๐Ÿ—๐Ÿต๐Ÿ’๐Ÿด๐Ÿ‘๐Ÿ˜๐Ÿผ๐Ÿง
๐Ÿฆ๐Ÿค๐Ÿฅ๐Ÿฃ๐Ÿ”๐Ÿ๐Ÿข๐Ÿ›๐Ÿ๐Ÿœ๐Ÿž๐ŸŒ๐Ÿ™๐Ÿš๐Ÿ ๐ŸŸ๐Ÿฌ๐Ÿณ๐Ÿ‹๐Ÿ„๐Ÿ
๐Ÿ€๐Ÿƒ๐Ÿ…๐Ÿ‡๐Ÿ‰๐ŸŽ๐Ÿ๐Ÿ“๐Ÿ•๐Ÿ–๐Ÿ๐Ÿ‚๐Ÿฒ๐Ÿก๐ŸŠ๐Ÿซ๐Ÿช๐Ÿ†๐Ÿˆ๐Ÿฉ๐Ÿพ
๐Ÿ’๐ŸŒธ๐ŸŒท๐Ÿ€๐ŸŒน๐ŸŒป๐ŸŒบ๐Ÿ๐Ÿƒ๐Ÿ‚๐ŸŒฟ๐ŸŒพ๐Ÿ„๐ŸŒต๐ŸŒด๐ŸŒฒ๐ŸŒณ๐ŸŒฐ๐ŸŒฑ๐ŸŒผ๐ŸŒ
๐ŸŒž๐ŸŒ๐ŸŒš๐ŸŒ‘๐ŸŒ’๐ŸŒ“๐ŸŒ”๐ŸŒ•๐ŸŒœ๐ŸŒ›๐ŸŒ™๐ŸŒ๐ŸŒŽ๐ŸŒ๐ŸŒ‹๐ŸŒŒ๐ŸŒ โญ
โ˜€โ›…โ˜โšกโ˜”โ„โ›„๐ŸŒ€๐ŸŒ๐ŸŒˆ๐ŸŒŠ๐Ÿ’ฉ

Places -------------------------------------------------------------------------
๐Ÿ ๐Ÿก๐Ÿซ๐Ÿข๐Ÿฃ๐Ÿฅ๐Ÿฆ๐Ÿช๐Ÿฉ๐Ÿจ๐Ÿ’’โ›ช๐Ÿฌ๐Ÿค๐ŸŒ‡๐ŸŒ†๐Ÿฏ๐Ÿฐโ›บ๐Ÿญ๐Ÿ—ผ
๐Ÿ—พ๐Ÿ—ป๐ŸŒ„๐ŸŒ…๐ŸŒƒ๐Ÿ—ฝ๐ŸŒ‰๐ŸŽ ๐ŸŽกโ›ฒ๐ŸŽข๐Ÿšขโ›ต๐Ÿšค๐Ÿšฃโš“๐Ÿš€โœˆ๐Ÿ’บ๐Ÿš๐Ÿš‚
๐ŸšŠ๐Ÿš‰๐ŸšŽ๐Ÿš†๐Ÿš„๐Ÿš…๐Ÿšˆ๐Ÿš‡๐Ÿš๐Ÿš‹๐Ÿšƒ๐ŸšŽ๐ŸšŒ๐Ÿš๐Ÿš™๐Ÿš˜๐Ÿš—๐Ÿš•๐Ÿš–๐Ÿš›๐Ÿšš
๐Ÿšจ๐Ÿš“๐Ÿš”๐Ÿš’๐Ÿš‘๐Ÿš๐Ÿšฒ๐Ÿšก๐ŸšŸ๐Ÿš ๐Ÿšœ๐Ÿ’ˆ๐Ÿš๐ŸŽซ๐Ÿšฆ๐Ÿšฅโš ๐Ÿšง๐Ÿ”ฐโ›ฝ๐Ÿฎ
๐ŸŽฐโ™จ๐Ÿ—ฟ๐ŸŽช๐ŸŽญ๐Ÿ“๐Ÿšฉ๐Ÿ‡ฏ๐Ÿ‡ต๐Ÿ‡ฐ๐Ÿ‡ท๐Ÿ‡ฉ๐Ÿ‡ช๐Ÿ‡จ๐Ÿ‡ณ๐Ÿ‡บ๐Ÿ‡ธ๐Ÿ‡ซ๐Ÿ‡ท๐Ÿ‡ช๐Ÿ‡ธ๐Ÿ‡ฎ๐Ÿ‡น๐Ÿ‡ท๐Ÿ‡บ๐Ÿ‡ฌ๐Ÿ‡ง
</pre>
</body>
</html>

We're done. If there's someone interested we can extend this little protip to some exciting ideographic language like Blissym.

Thank you for your time.

Related protips:

Common fonts for Windows & Mac