Wingdings font family does not seem to work on Firefox and Opera

html css firefox opera font-family
niko picture niko · Oct 22, 2011 · Viewed 48.8k times · Source

I was using the Wingdings font in the CSS for some symbols like a pencil and a home icon.

It worked on IE, Chrome and Safari but not in Firefox and Opera. I googled it but did not find any better solution.

Why doesn't it work in Firefox? I do need to use those icons, is there any way to use Wingdings in Firefox?

Answer

mddw picture mddw · Oct 22, 2011

Mozilla and Opera are standard-compiliant. Wingdings is not standard (what a surprise coming from Microsoft) because not mapped to Unicode, and so should never be used on a website.

However, do not despair, most symbols are available in Unicode : check http://www.alanwood.net/demos/wingdings.html

Important addendum (october 2014) : As of Unicode v7, released on June 16, 2014, all characters from Webdings and Wingdings have been added to Unicode. See the comment below.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
How to remove the arrow from a select element in Firefox

I'm trying to style a select element using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearance property, but for some reason …

Read More
Preventing an image from being draggable or selectable without using JS

Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox, without resorting to Javascript? Seems trivial, but here's the issue: Can be dragged and highlighted in Firefox: …

Read More