Menu
I'm using font-face and my font looks awful in Firefox for mac.
I've tried -webkit-font-smoothing: antialiased and font-smoothing: antialiased.
Here are two screenshots:
Because of the retina screen the images turned out pretty large, so they look a bit zoomed in.
Here is the URL to the website, if you want to look at any code.
Anyone have a good solution for this problem?
598
Adding A Line Adding a line to your font is the easiest way to add width to a font that doesn't offer a bold option. By adding a line, you will be able to achieve a bold look for both print, and cut. You can also use the adding a line method to cut out your thicker lettering.
To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, but the strong tag indicates that the text is of particular importance or urgency. You can also bold text with the CSS font-weight property set to “bold.”
Bold. 800. Extra Bold (Ultra Bold) 900. Black (Heavy)
Good news: it's probably not your fault. Bad news is, I'm not sure there's much you can do.
I looked at the site on my PC and it looked fine. I viewed the site on Safari on my macbook pro (w/ retina) and it looked great (other than the logo, which I assume is a raster graphic).
Firefox (version 17) looks bad (just like your screenshots). I disabled the style on the element, and even the default font looked terrible. Then I noticed that FF itself (the text on the tabs, for example) looked poorly aliased.
I then opened one of my own websites and it looked bad even though it uses Helvetica. This site looks bad (see my screenshot of the question below). Even my SVG images (which look beautiful on an iPad) look badly rendered.
My guess is that the problem lies much deeper than the font. I've noticed this with other apps on a retina display. I believe Chrome has the same issue.
A very recent beta (version 18) is slated to address these problems and appears to fix the issue completely, though the font still looks slightly different between browsers (you may now be able to tweak it with CSS)
Firefox users are usually good about updating, so this shouldn't be a problem for much longer.
189
The question is old but if anyone still looking for solution here is your answer: @font-face: bold in FF is bolder than in Chrome
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
