On one page, I'm using a custom web font (using @font-face) for icons. Each character in the set has an appropriate Unicode value.
In WebKit-based browsers (Chrome, Safari, Android), one of the glyphs isn't shown. Instead, the default glyph or a diamond with a question-mark inside of it is shown.
In Firefox, Opera, and even Internet Explorer, the characters are all rendered properly.
Except for Safari (Windows), this problem only occurs when I insert the Unicode characters via the content CSS property. If I insert the character directly into the HTML using a character reference, it renders properly.
For example, when the Unicode characters are inserted as CSS content ...
/* CSS: */
span.css_font_icon:before {
display: inline;
font-family: "Ghodmode Icons", "Webdings", sans-serif;
content: '\002302 \01F4A1 \00270D \002139';
}
<!-- HTML -->
<span class="css_font_icon"></span>
... they all show in Firefox, Opera, and Internet Explorer, but the second one (\01F4A1) doesn't show in any Webkit browsers on Linux, Windows, or Android. Instead, it shows the default glyph (on Android browsers) or a diamond with a question-mark inside of it (Chrome (Windows), Safari (Windows)).
Inserting the characters using HTML unicode character references ...
/* CSS: */
span.html_font_icon {
font-family: "Ghodmode Icons", "Webdings", sans-serif;
}
<!-- HTML: -->
<span class="html_font_icon">⌂💡✍ℹ</span>
... works fine in Firefox, Opera, and Internet Explorer. Chrome (Windows), and Android Webkit browsers also show the symbol from the HTML character reference, but Safari (Windows) shows the default glyph.
I've condensed the original code into a small page that reproduces the problem: http://www.ghodmode.com/testing/unicode-insertion/
Have I stumbled into an unusual WebKit bug, or am I doing something wrong?
I don't have a current iOS device to test this on, so comments describing the behavior on iPhone / iPad are also welcome.
