font-family works in IE but not Mozilla


I have the following code on a page:
<p style="font-family:wingdings;font-size:32px;font-weight:bold">J</p>

In IE6 this apears the way I would like it to as a "happy face" but in Mozilla or FireFox I just see a capital 'J'.

Any ideas on how to make this work for all browsers?
Who is Participating?

Improve company productivity with a Business Account.Sign Up

neesterConnect With a Mentor Commented:
I didnt test what i read.
But it does seem that Mozilla, and all gecko based browsers (as far as i know) have symbol fonts disabled by default.
I am not sure why, but that seems to be the case.

The only other solution would be to make it into a flash clip, which would allow you to use the font, and would also keep the embed very small...

Image replacement seems the only way to go though.
Sorry to say :(

Wait and see, maybe someone else can help out.
but from what i read it seems very unlikely.

^ that will explain your problems a little.
and show you a dodgy solution.

I would just say, use a picture instead.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

It basically says:
Symbol Fonts are by default - disabled in moz
SashoAuthor Commented:
I tried the proposed solution but that did not seem to make a difference.

I tried changing the files for both Mozilla and Firefox with zero success.

Any other suggestions other than using an image?
SashoAuthor Commented:
I am trying to figure out how to get unicode characters to work with CSS.

I can use this:
<p style="font-size:50px;font-weight:bold">&#x263A;</p>

And it works fine in IE and Mozilla but IE brakes as soon as I add this line to the header:
<link rel="stylesheet" href="styles.css" type="text/css">

Well I am not too sure.
Sorry this is the limit of my understanding here.

Its not CSS anymore :S
So i am a little lost beyond here
works fine for me ?

Can i see your code or can u upload it some-where ?
Sasho - your unicode representation is correct (actually the only way if you don't want graphics), but using an external CSS should have no effect on the specific rendering. I'm afraid I'm unable to duplicate your error here...

SashoAuthor Commented:
I'll post my CSS stylesheet, perhaps there is an error in it somwhere.
Failing that, you could always try removing the doctype :-)
SashoAuthor Commented:
That's funny Seanpowell. I tried that, but it made no difference :)
SashoAuthor Commented:
Here is the html I am using:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="phpBB2/templates/subSilver/subSilver.css" type="text/css">
<p style="font-size:50px;font-weight:bold">&#x263A;</p>

Here are the contents of subSilver.css
 /* General page style. The scroll bar colours only visible in IE5.5+ */
body {
      background-color: #E5E5E5;
      scrollbar-face-color: #DEE3E7;
      scrollbar-highlight-color: #FFFFFF;
      scrollbar-shadow-color: #DEE3E7;
      scrollbar-3dlight-color: #D1D7DC;
      scrollbar-arrow-color:  #006699;
      scrollbar-track-color: #EFEFEF;
      scrollbar-darkshadow-color: #98AAB1;

postition: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
z-index: 2;

/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px }
a:link,a:active,a:visited { color : #006699; }
a:hover            { text-decoration: underline; color : #DD6900; }
hr      { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline      { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

/* This is the outline round the main forum tables */
.forumline      { background-color: #FFFFFF; border: 2px #006699 solid; }

/* Main table cell colours and backgrounds */
td.row1      { background-color: #EFEFEF; }
td.row2      { background-color: #DEE3E7; }
td.row3      { background-color: #D1D7DC; }

  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
td.rowpic {
            background-color: #FFFFFF;
            background-image: url(images/cellpic2.jpg);
            background-repeat: repeat-y;

      td.Critical {color: black;background-color: #FF0000;text-align: center;}
      td.CriticalLeft {color: black;background-color: #FF0000;text-align: left;}
      td.High {color: black;background-color: #FA8072;text-align: center;}
      td.HighLeft {color: black;background-color: #FA8072;text-align: left;}
      td.Medium {color: black;background-color: #FFD700;text-align: center;}
      td.MediumLeft {color: black;background-color: #FFD700;text-align: left;}
      td.Low {color: black;background-color: #ADFF2F;text-align: center;}
      td.LowLeft {color: black;background-color: #ADFF2F;text-align: left;}
      td.Assigned {color: black;background-color: #99ff99;text-align: center;}
      td.AssignedLeft {color: black;background-color: #99ff99;text-align: left;}
      td.Closed {color: black;background-color: #99ff99;text-align: center;}
      td.ClosedLeft {color: black;background-color: #99ff99;text-align: left;}
      td.Open {color: black;background-color: #FFCC99;text-align: center;}
      td.OpenLeft {color: black;background-color: #FFCC99;text-align: left;}
      td.Pending {color: black;background-color: #66CCFF;text-align: center;}
      td.PendingLeft {color: black;background-color: #66CCFF;text-align: left;}
      td.Passed,td.Running {color: black;background-color: lawngreen;text-align: center;}
      td.RunningLeft {color: black;text-align: left;background-color: lawngreen;}
      td.Idle {color: black;background-color: lightblue;text-align: center;}
      td.IdleLeft {color: black;text-align: left;background-color: lightblue;}
      td.Failed,td.Disabled {color: black;background-color: orangered;text-align: center;}
      td.FailedLeft,td.DisabledLeft {color: black;background-color: orangered;text-align: left;}
      td.Overdue{color: black;background-color: orange;text-align: center;}
      td.Indicators{color: blue;font-size:12px;font-weight: 650;background-color: lightblue;font-family: Courier}      

/* Header cells - the blue and silver gradient backgrounds */
th      {
      color: #FFC086; font-size: 11px; font-weight : bold;
      background-color: #006699; height: 25px;
      background-image: url(images/cellpic3.gif);
},td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
                  background-image: url(images/cellpic1.gif);
                  background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;

  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/,td.catHead,td.catBottom {
      height: 29px;
      border-width: 0px 0px 0px 0px;
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
      font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
      background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow       { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right       { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft        { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop       { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2      {
                  font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
                  text-decoration: none; line-height : 120%; color : #000000;

/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover      { color: #DD6900; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu            { font-size : 11px; color : #000000 }
a.mainmenu            { text-decoration: none; color : #006699;  }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }

/* Forum category titles */
.cattitle            { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle            { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink            { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink       { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav                  { font-weight: bold; font-size: 11px; color : #000000;}
a.nav                  { text-decoration: none; color : #006699; }
a.nav:hover            { text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle                  { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link   { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover      { text-decoration: underline; color : #DD6900; }

/* Non PHPBB@ Links*/
.SV                  { font-weight: bold; font-size: 11px; color : #000000; }
a.SV:link   { text-decoration: none; color : #000000; }
a.SV:visited { text-decoration: none; color : #000000; }
a.SV:hover      { text-decoration: underline;}
a.SV:active      { text-decoration: underline;}

.Enable                  { color : #000000; }
a.Enable:link   { text-decoration: none; color : #000000; }
a.Enable:visited { text-decoration: none; color : #000000; }
a.Enable:hover      { text-decoration: none;}
a.Enable:active      { text-decoration: none;}

/* Non PHPBB@ Links*/
.Sort            { font-weight: bold; font-size: 12px; color : #FFC086; }
a.Sort:link   { text-decoration: underline; color : #FFC086; }
a.Sort:visited { text-decoration: underline; color : #FFC086; }
/*a.Sort:hover      { text-decoration: underline;color : #FFC086;}
a.Sort:active      { text-decoration: underline;color : #FFC086;} */

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name                  { font-size : 11px; color : #000000;}

/* Location, number of posts, post date etc */
.postdetails            { font-size : 10px; color : #000000; }

/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link      { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}

/* Quote & Code blocks */
.code {
      font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
      background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
      border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px

.quote {
      font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
      background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
      border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px

/* Copyright and bottom info */
.copyright            { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright            { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}

/* Form elements */
input,textarea, select {
      color : #000000;
      font: normal 11px Verdana, Arial, Helvetica, sans-serif;
      border-color : #000000;

/* The text input fields background colour */,, select {
      background-color : #FFFFFF;

      textarea.Running{color: black;       background-color: lawngreen;border:0px;}
      textarea.Idle{color: black;background-color: lightblue;border:0px;}
      textarea.Disabled{color: black;background-color: orangered;border:0px;}
      textarea.Overdue{color: black;background-color: orange;border:0px;}
      textarea.Open {color: black;background-color: #FFCC99;border:0px;}
input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
      background-color : #EFEFEF;
      color : #000000;
      font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;

/* The main submit button option */
input.mainoption {
      background-color : #FAFAFA;
      font-weight : bold;

/* None-bold submit button */
input.liteoption {
      background-color : #FAFAFA;
      font-weight : normal;

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
.helpline { background-color: #DEE3E7; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
Okay - you're just overriding it by using a specific font in the p tag.

So, like this:

p.smiley { font-family: sans-serif; font-size: 10px }

<p class="smiley" style="font-size:50px;font-weight:bold">&#x263A;</p>

SashoAuthor Commented:
A few questions:
Unicode is the same as sans-serif?
Inline declared style attributes get appended to whatever is already in the syle sheet? There is no way to override this behaviour?
SashoAuthor Commented:
Hmm it looks like you are saying the inline appends and ovverides...
SashoAuthor Commented: looks like the solution works for the &#x2639; character but when I try others IE just makes them boxes. Here is what the HTML looks like

In the CSS stylesheet I have the following line:
p.unicode { font-family: sans-serif; font-size: 10px }

Here is what the HTML looks like
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="phpBB2/templates/subSilver/subSilver.css" type="text/css">
<p class="unicode" style="font-size:40px;font-weight:bold">&#x263A;</p>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x2622;</p>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x2620;</p>
<p class="unicode" style="font-size:40px;font-weight:bold">&#x2639;</p>
sans-serif is generic, so it won't override the unicde character by specifying a font.
&#x263A; doesn't exist in Verdana, which is why you were seeing a square box.

Inline will usually override something set in an external css, based on specificity. The "cascade" part of Cascading Style Sheets really means exactly that: anything more specific will override anything less specific.

In this case, inline is further down the tree, and so takes precedence...

Sorry - missed your comment.

You can't represent those in unicode, here's a chart that covers what is viable:

and which font-families support which unicode variations:
SashoAuthor Commented:
When I go to this link: most of the characters are just a box in IE. With mozilla I see all the different characters.

The same is true with the second link( ) most rows are full of boxes when I look at it with IE.

Your mozilla must be different. None of those characters render on any of the 11 browsers on this windows machine...

So if it's for the internet, you simply can't guarantee that they'll be viewable.
>>most rows are full of boxes when I look at it with IE
exactly - the chart will let you know which ones are safe to use, and which ones aren't...
SashoAuthor Commented:
I thought unicode was designed to make sure you can guarantee that they'll be viewable.

I guess I'll have to give up on this battle and create images from those characters.
SashoAuthor Commented:
Actually I got most chracters to work by using:
p.unicode { font-family: Arial Unicode MS; font-size: 10px }

But when I went to different machines some IE browsers could not figure out this font either.
SashoAuthor Commented:
I went with the suggestion to use images.

Sean I realize you probably do not care about points, but I wanted you to know I meant to split the points, but clicked on the wrong thing.
I feel you gave me help understanding the way unicode works and why it is not uniform across all platforms.
Let me know and I can make a separate questions with points for you.
Not to worry at all - the thread is useful for future searchers.
I'm sorry that there's no definitive solution for you ...

Sorry to hear too!
I learnt a lot about unicode too.
I didnt realise its purpose before :S

Thanks sean.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.