Geek Answers Handbook

How do you prevent Chrome (or the Internet browser in general) on your Android device from replacing custom Unicode characters for Emojis?

Hello Stackoverflow - To do what I ask, it is more clear, I will consider in detail.

I use the following characters in the rotation transformation: ☎ and ♦ and ✔ (☎ and ♦ and ✔ respectively) .

On my Android device (smartphone, LG G4), it replaces these text characters with non-text emojis images that are not formatted using my conversions or font size styles.

I want to force the browser to use regular characters in the font that I put on my website (using @ font-face with the .ttf file included). On desktop computers, I have no problem displaying my selected characters as intended.

Your help is greatly appreciated, as I would rather not force me to replace my text. Thanks.

+5
source share
1 answer

You must enable the webfont with support for the characters you want to use.

To include the icon font in 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 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 }

Then you can add your character as follows:

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

If you don’t know the webfont that your character supports, you can easily create it yourself using the Icomoon App . See also my open source Emoji icon font for an example Icon font with 650 characters, which I created using the Icomoon app.

If you plan to use the Icon font (or any other icon font), I would recommend that you edit the font in the Icomoon app to remove all characters except the ones you need, as this will significantly reduce the size of your file!

Additional Information:

+2
source

More articles:


All Articles