Wingdings Font Family Does Not Seem To Work On Firefox And Opera

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

Solution 1:

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.

Solution 2:

You could use unicode characters such as

✎

http://www.fileformat.info/info/unicode/char/270e/index.htm

Solution 3:

The Wingdings characters can be accessed in a Unicode-compliant manner, via the "Private Use Area" (codepoints U+E000 to U+F7FF). These character codes are reserved for any font-specific symbols not part of the regular Unicode character set, and indeed Wingdingds maps all of its symbols to the subrange U+F021 to U+F0FF.

For instance, the triangular flag, which is mapped to P = 0x50 in legacy encoding, can be accessed via U+F050 =  =  (HTML) = \F050 (CSS).

I'm not sure about other browsers, but it does work in Firefox 12.

Solution 4:

To quote a website:

There was an endless debate between the people that said Mozilla should support the symbol font in its default configuration because that is a valuable ability and standards lawyers who said no, because they believe that support violates the HTML standard. So far, the obstructionists have prevailed.

http://hutchinson.belmont.ma.us/tth/Wfonts.html

Solution 5:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

more here http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

simple solution in your HTML

<styletype="text/css">@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>