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

Asked 22/10, 2011 at 20:59 Answered 22/5, 2012 at 17:44

Solved html css firefox opera font-family

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?

Fagaly answered 22/10, 2011 at 20:59 Comment(0)

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.

Opalescent answered 22/10, 2011 at 21:11 Comment(5)

As of Unicode v7, all characters from Webdings and Wingdings have been added to Unicode ([1], [2]). – Varian 3/10, 2014 at 16:22

I don't understand what Alan wood's page is talking about, and I can't find anything on the w3c site that talks about "standard" fonts. wingdings seems to validate OK using the w3c css validator. Obviously if someone is using a device which doesn't have a specific font installed, the browser will substitute a different font, but that's not what the OP is talking about. – Ovenbird 23/10, 2015 at 7:26

Is there a tool to convert Windings to standard Unicode characters? – Anam 14/12, 2015 at 12:20

@Ovenbird By "non-standard" they actually mean "not standard-compliant". As in the font does not comply with the Unicode standard. For instance, the byte 0x74 in UTF-8 should display a capital letter J. But wingdings instead displays a smiley face. Why is this a problem? Because fonts are supposed to degrade gracefully in cases where the user does not have the target font installed. If a font doesn't comply with the standard, it doesn't degrade gracefully. Anyone who doesn't have Wingdings (a Microsoft font) installed on their machine will just see garbage text instead. – Jeunesse 1/12, 2016 at 15:32

Even if correct, this does not answer the OP’s question: Why is it not displayed in Firefox? – Leet 28/7, 2021 at 7:32

You could use unicode characters such as

✎

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

Harryharsh answered 22/10, 2011 at 21:5 Comment(6)

Note: Make sure to use a supported font. This doesn't work in 95% of the fonts installed on my machine. – Usually 22/10, 2011 at 21:16

Correction: According to the site's local font tester it's not supported much, but Firebugging those fonts inline to this page seemed to work - in fact I can't get it not to work, so that's a mystery to me. – Usually 22/10, 2011 at 21:24

Wesley: per CSS font-matching rules unknown glyphs in the currently selected font cause the grapheme to be rendered using a different font. – Sams 23/10, 2011 at 12:55

@gsnedders: That's great to hear, can you point me to a reference for that by any chance? – Usually 25/10, 2011 at 4:34

@gsnedders: Thanks a lot! Even more reason to specify a generic font family like serif. – Usually 25/10, 2011 at 19:43

Set the font-size to something larger than the font you'd use in combination with CSS ::after or ::before and content though do not do this universally for every Unicode character as they vary greatly in rendered size. – Hoogh 9/9, 2015 at 12:19

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 =  = &#xF050; (HTML) = \F050 (CSS).

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

Psychro answered 22/5, 2012 at 17:44 Comment(1)

This is technically correct and helps to understand the nature of the problem, but according to the Unicode standard, Private Use characters should not be used in information interchange except by private agreements. In this case, if the font actually used is different from the one declared in CSS, a generic symbol of undisplayable character is shown (or sometimes whatever character some other font happens to have assigned to the same code postion). – Hanhana 4/12, 2012 at 8:39

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

Fineberg answered 22/10, 2011 at 21:6 Comment(1)

This is from 2005, is it still relevant? Is there any helpful advice in the article for OP? – Usually 22/10, 2011 at 21:13

@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

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

Retortion answered 22/10, 2011 at 21:3 Comment(0)

You can use Gimp or other graphic-software and make some GIFs of the needed icons from the Wingdings font.

Anthea answered 22/10, 2011 at 21:3 Comment(0)

✎

Recommended topics

Hot tags