Last Updated: September 29, 2021

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.