While attempting to use a groovy “star glyph” I discovered that Google Chrome was not rendering some extended unicode characters while all the other browsers I test were.

I found the solution on this post, which referenced a hilarious discussion on parsing html with regular expressions on Stack Overflow.

So instead of my groovy star for a bullet that shows in every other browser like this…

Google Chrome was rendering an unhelpful empty box…

It turns out the answer was simple and easily fixed. My font declaration was for Arial, Helvetica, sans-serif and Arial (not sure about Helvetica or the default fallback sans-serifs) doesn’t contain the unicode character I am attempting to display.

Changing Arial to "Arial Unicode MS" immediately fixed the problem.

Note that the extended unicode version of Arial is actually an OpenType font (with True Type outlines) See the wiki page on Unicode Typefaces for a list of common unicode font-family typefaces.

The fix described in the post I originally linked to showed how to fix the problem for viewing other people’s websites which was to open the Tools/Options in Google Chrome and change the default font style in question (in my case sans-serif) to a unicode font with extended characters. And if I see too many empty boxes around the internet while using Chrome I just might. Otherwise I am leaving it with the defaults because as a web developer I need to know what other people are going to see. Now that all browsers seem to have an inspector and other web development tools it would be really cool if they had work mode and play mode (like turning on debug mode) so I can have general browsing settings for testing and for really actually browsing the internet.

Happy typography!