I'm using the very useful CSS property -webkit-font-smoothing: antialiased in webkit browsers to ensure nice fine text on headlines etc. Is there an equivalent property in Firefox?
Font in WebKit with -webkit-font-smoothing: antialiased:
Font in Firefox:
As you can see the text in Firefox is fatter than in Webkit. Without -webkit-font-smoothing: antialiased, the text looks the same in Webkit as in Firefox.
Firefox 25+ (2013-10-29) supports a new macOS-only nonstandard CSS property -moz-osx-font-smoothing effectively similar to the WebKit’s -webkit-font-smoothing.
So this code should provide consistent results in Firefox and WebKit:
.example {
-moz-osx-font-smoothing: grayscale; /* Firefox */
-webkit-font-smoothing: antialiased; /* WebKit */
}
Problem is -webkit-font-smoothing: antialiased, which disable standard sub-pixel font smoothing.
Try read this
At one point firefox had a font-smooth, but it's been removed and as far as I know is not included at all in the current track. I did some googling and didn't see any indication that there will be any change to that.
As an alternative you could try a workaround like: http://www.elfboy.com/blog/text-shadow_anti-aliasing/.
Firefox has the behavior you're after by default, as far as I know, so there's no need to request it explicitly...
Related
Am using the following code to display H1 items in a special font.
#font-face {
font-family: 'Serif-semi-bold';
src: url('http://www.jaguarseascouts.org.uk/wp-content/themes/molesey/fonts/TheSerifSemiBold-Plain.ttf'); /* IE9 Compat Modes */
}
Displays fine in IE, Firefox etc but looks very grainy and poor in Chrome.
Why would this be?
Many thanks
Most modern browsers use .woff fonts, so you may want to include that one too. On the other side, Chrome usually does a really bad job as rendering fonts.
There are ways to clean fonts in most browsers now.
Insert this into your CSS and this will help most fonts:
html {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
}
If that particular font is problematic, you can download it, upload it and convert it at fontsquirrel.com - it will give you code and multiple different font formats after conversion.
On my last website, the text is perfect naturally on chrome and firefox without touching font-smoothing or anything else.
But on Mac / Safari 7 the text appears well then turns immediately thinner (too much thinner / not nice to read).
After doing some research [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
and some tests playing with
-webkit-font-smoothing
It looks like Safari display the text first with :
-webkit-font-smoothing: subpixel-antialiased;
Then just after you got the flickering effect, when it is turning font to :
-webkit-font-smoothing: antialiased;
So it seems to me that I had no choice but to force
-webkit-font-smoothing: subpixel-antialiased;
to make my website consistent on all browsers.
I am using font-face Avenir Std Roman.
Some explanations to that Safari problem ?
Any better solutions ?
Could my font be part of the problem ?
Thanks.
So I fixed my problem with applying:
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Now my font is consistent on every browsers.
try both
{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
Just use this:
link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"
Instead of this:
link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
problem solved for me this way!
Using -webkit-font-smoothing: subpixel-antialiased worked a little bit, but there was still too much of a difference between Safari, Chrome, and Firefox. I realized trying to make the font thicker in Safari wasn't going to work, so instead I made the font lighter in other browsers and then used a slightly thicker font weight. What ended up normalizing the font weights across browsers for me is this:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Try this:
transform: translateZ(0.1px);
Webkit browsers on Mac has known problem with antialiasing 2d and 3d text elements differently. Giving the 3d property to the element usually fixes the problem.
Using Google WebFonts ("Oswald" in this case), I have found that my fonts are rendered bolder than they should be. I have solved this problem in webkit based browsers using:
-webkit-font-smoothing: antialiased;
but in Firefox I cannot find the declaration that controls this. I have heard of using a text-shadow hack to fix this, but I would prefer not to use this as it will undoubtedly change the geometric properties of the fonts.
Here is what it looks like in webkit (Chrome):
This is the blocky horrible rendering thanks to Firefox:
I know there is a way to achieve this in FireFox, because I found this font on font-combinator.com, and it renders properly on font-combinator using Firefox. Here is what it looks like on Firefox through font-combinator.com:
After browsing through the css used to create font-combinator, I found this declaration: text-rendering: optimizelegibility;, but this does not work when applied to my element.
I have also tried:
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
How can I get Firefox to antialias my fonts so that they look right when displayed? Can you find the declaration, or combination of declarations that makes them display properly on www.font-combinator.com?
I am using an relatively old version of FireFox (16.0.2) because this machine has an old version of OSX installed.
This is a Firefox on OSX problem only...
I just answered this question: How to antialias SVG text in Firefox with a possible solution form your problem.
I think you could use the following attribute:
-moz-osx-font-smoothing: grayscale;
This will be released with firefox 25 (a nightly build can be found at http://nightly.mozilla.org/)
Have you tried declaring a numerical font-weight instead of just 'normal' or 'bold'? There's a lot of differences in rendering of webfonts in different browsers.
Try setting {font-weight: 400;} for normal text and {font-weight: 700;} for bold.
Here's my problem: I'm using font-face for the menu of my website, but Firefox on Mac displays it too bold
On a PC, everything works well, the font is perfectly sized and looks like it should
Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.
I've tried the "text-shadow hack", i tried using the font-weight property (which pretty much doesn't do anything).
And now, some code!
#font-face {
font-family: 'KnockoutHTF48FeatherweightRg';
src: url('font/knockout-htf48-featherweight-webfont.eot');
src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg') format('svg');
font-weight: normal;
font-style: normal;
}
For Safari:
body{
...
-webkit-font-smoothing: antialiased;
}
Left if FF on Mac and right is FF on PC (the good version)
Thanks!
FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.
thread here
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
you can use,
font-weight:normal !important;
for fix the visualization error on firefox Mac.
This affects firefox browser ONLY.
#-moz-document url-prefix() {
.classname {
font-weight:normal;
/* or any other option */
}
}
Enjoy!
There is trick explained http://dave-bond.com/css/font-too-bold-on-a-mac/
basically is to apply opacity: 0.99; to those texts...
Every font supports different weights. Some can be really thing, others can't.
Mac and PC will render the same font differently. It's a core operating system thing, and basically, there's nothing you can do about it. :(
Most consistent results can be achieved using something like Google Webfonts or TypeKit.
One of the thinnest fonts standard on Mac is Helvetica Neue.
Also worth noting that font-weight supports values 100,200,...800,900.
I've found that making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.
Found this on CSS Tricks and this freaking works.
add this to the stylesheet:
-moz-osx-font-smoothing: grayscale;
I'm using a script that uses Webkit transformations, and in Safari I can see the type jagged, not clear — like in an old pc browser.
The type is good in Chrome and Safari Mobile. What could it be? Do I have to set anything on CSS?
thanks
I am not sure what the problem is... but, you can always force antialisasing with this:
html
{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
the 'text-rendering' function is optional, it only affects Windows and Linux.
Learn more »