display issue in firefox

[casperovergaard]

I'm having major difficulties in outputting these lovely font-face icons in firefox. Basically the letters are being outputted - not the imagery. I've read up on Firefox's handling of @font-face, and I've tried replacing every single quotations (') with double quotation (") - but without luck. Are there any knowledge of how to get this issue resolved?

[memoht]

I had these working with Safari and was serving them up from s3. Then, I went to Firefox and IE9 and saw the letters. I have done some reading and apparently Firefox and IE9 require the fonts to be served from the same domain (though there are workarounds I think). I am using Rails 3.2.5, so I moved the fonts off of s3 and into a fonts folder under assets. Then, I did the following and it now appears to work in Safari, and Firefox 13 and IE9. Not working in IE8. So maybe that is progress. Ok, below is also using some Sass so be aware of color variables I used. I based this on this question/answer at StackOverflow

@font-face { font-family: 'FoundationIconsGeneral'; src: asset-url('foundation-icons-general.eot', font); src: asset-url('ffoundation-icons-general.eot?#iefix', font) format('embedded-opentype'), asset-url('foundation-icons-general.woff', font) format('woff'), asset-url('foundation-icons-general.ttf', font) format('truetype'), asset-url('foundation-icons-general.svg#FoundationIconsGeneral', font) format('svg'); font-weight: normal; font-style: normal;

}

.glyph { cursor: default; font-size: 24px;

a { color: lighten($tungsten, 30%); &:hover { color: $orange; } } } .glyph.general {font-family: 'FoundationIconsGeneral'; }

[Firestorm-Graphics]

fonts are fine for me on firefox osx lion, firefox 14 beta osx lion, safari osx lion, opera osx lion and chrome osx lion.

the only issue i have is if i apply a hover in css to a font firefox and opera seem to turn it red and active, bit weird

[hatefulcrawdad]

Are you guys still seeing this issue in the latest set? The icons definitely don't look as pretty in Firefox as in other browsers, but that is their fault for having horrible text rendering. But we do want to make sure you guys can use them in all the browsers. Let us know if you are still seeing any FF issues.

[dolarsrg]

The problem is the crossdomain css font support in Firefox: http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox

[hoverlover]

I'm seeing problems with Firefox as well. I'm on FF version 20.0:

I'm serving assets from S3 using a subdomain, for example assets.mysite.com. Is this what others are seeing?

[hoverlover]

Nevermind. I got it fixed by doing the CORS thing in S3.

[sondre-m]

I'm seeing the same as hoverlover above here. Not sure what you meant by the "CORS"-thing? Its on a wordpress blog, so the folder setup is:

domain/wp-content/themes/Foundation/style.css <- the css domain/wp-content/themes/Foundation/fonts/[the font files]

the css declaration:

@font-face { font-family: "GeneralFoundicons"; src: url("../fonts/general_foundicons.eot"); src: url("../fonts/general_foundicons.eot?#iefix") format("embedded-opentype"), url("../fonts/general_foundicons.woff") format("woff"), url("../fonts/general_foundicons.ttf") format("truetype"), url("../fonts/general_foundicons.svg#GeneralFoundicons") format("svg"); font-weight: normal; font-style: normal; }

(there are also a 'fonts' folder in the domain folder from testing)

It works in every other browser I've tried (safari, chrome, safari on iOS) but not in Firefox. Does anyone have any idea what I've done wrong? the site is here: http://www.underkultur.no/

edit: underkultur.no points to sondremoland.com/underkultur. If I access sondremoland.com/underkultur it works, if I use the domain, it doesn't. Any workaround?

[adamthedeveloper]

To Answer the "CORS Thing" question, in the S3 management console, I had to add a CORS configuration on my bucket - similar to the following - your mileage may vary:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://my.domain.com</AllowedOrigin>
   <AllowedOrigin>https://my.domain.com</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
  <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
  <ExposeHeader>x-amz-request-id</ExposeHeader>
  <ExposeHeader>x-amz-id-2</ExposeHeader>
 </CORSRule>
</CORSConfiguration>