CODEWITHSUNDEEP
htmlcssunicodefonts
MachineElf
MachineElf

Reputation: 1281

missing/replaced arrow glyphs in HTML fonts

This is a minor presentation thing that has bugged me for ages: http://gyazo.com/e5bed138e234fef7f570bd36edee3edd.png

Checkout how the left and up arrows inserted with → and ↑ are the wrong size and style (this is Monaco in Apple Webkit). From my understanding this is because the font doesn't support these glyphs so it's falling back to another one. But why?? It happens with lots of standard fonts, I can't believe that Monaco doesn't have left and up unicode arrow glyphs.

Anyone else come across this and if so is there any kind of solution or workaround? Couldn't find one on Stack Overflow yet!

Update: I'm using glyphs because you can do cool things like fade the colours, and it's lightweight - they are like a free graphics library. As suggested by Thirty dot using sans-serif is the best to go with, it's good in Webkit but Firefox still looks wrong. I'm not sure the exact unicode values that entities such as ← and ↑ point to but I'm guessing in some browsers they are mismatched. Shame.

Upvotes: 0

Views: 1230

Answers (1)

thirtydot
thirtydot

Reputation: 228162

Workaround:
Use images to represent the buttons instead. It's not important that they're text, is it? Specifically, use a CSS Sprite so that all the buttons are contained inside one image.

Another Idea:
You could try font-family: sans-serif on just the buttons. sans-serif usually defaults to a safe font with many different symbols available. Hopefully, this font will have all the glyphs you require. You should also check you're using glyphs from the "same area" of Unicode.

Also, line your buttons up properly: at the moment, they like this: enter image description here

Upvotes: 1

Related Questions