How do you prevent Chrome (or phone internet browsers in general) on an android device from substituting non-standard Unicode symbols for Emojis?

Question

Hello Stackoverflow—to make what I'm asking about more clear, I'll elaborate.

I'm using the following symbols in a rotation transformation: ☎ and ♦ and ✔ (☎ and ♦ and ✔ respectively).

On my android device though (smart phone, LG G4), it replaces these text symbols with non-text picture emojis that do not format with my transformation or font size styles.

I want to force the browser to use the regular symbols in the font that I have supplied on my website (using @font-face with an included .ttf file). On desktops, I have no issues at all displaying my selected symbols as intended.

Your help is greatly appreciated as I'd rather not be forced to make an image substitute of my text arrangement. Thank you.

Answer 1

You should include a webfont with support for the characters you want to use.

To include an icon font in your CSS, use the following code :

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.emoji {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

You can then include your symbol like this:

<span class="icon">&#9742;</span>
<span class="icon">&#9993;</span>

If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for 650 symbols, which I created with the Icomoon App.

If you plan on using my Icon font (or any other icon font), I would recommend that you edit the font in the Icomoon app to remove all symbols except the ones you need, as that would reduce your filesize significantly!

---

More info:

• Create webfont with Unicode Supplementary Multilingual Plane symbols