Hacker News new | ask | show | jobs
by jasonkester 3941 days ago
Any idea why the suits all render as smiley faces in Chrome/Mac?

Inspecting the cards, you can see that they are using the unicode character for spade/heart/etc. But in the browser itself you get nothing but smileys.

Perhaps the font they're using doesn't have those code points?

Edit: Yes, that's the case. Font is not specified, so it comes in as "inherit" by default, using whatever the browser feels like. On Mac Chrome, that must use smileys to represent unknown characters. Switching the document font to Arial in CSS fixes the issue and makes the cards look like cards.

3 comments

> On Mac Chrome, that must use smileys to represent unknown characters.

You're seeing the Last Resort fallback font, which shows a symbol representative of the codepoint range, and the range's name, so you can identify what type of font you need. Since the suits are in the smiley block, you see a smiley. If you had no Latin alphabet font, you'd see an A.

https://en.wikipedia.org/wiki/Fallback_font

Fixed now..
Font should be Open Sans.. I have Chrome/Mac and it's working :/
Why spend the time and effort pulling a custom font across the wire if you're only going to use symbols that exist in the web safe fonts included with the browser?

Seems kinda wasteful.

I think the reason for this is to prevent cross browser bug you seemed to be experiencing in the parent comment.
Open Sans is used everywhere in the page. Also the buttons on top..
Fixed!