I'm using icons. On Chrome and Opera they look fine. But if I try Firefox they look pretty blurry if the font-size of icons is lesser than 20px, while after 30px they look smooth. Is there a way to fix this?For example the Firefox problem of images resizing resulting in blurry images can be fixed by rotating the image of a very small amount. Can something similar be applied to font icons?
To see how it looks, just go (using firefox) to any website with icons(like font awesome) and try resizing them to 20px and see how blurry they become.
The problem is coming from the font rendering that browsers use. Different platforms use different methods. Browsers opt to use the OS method or their own implementation.
The reason it looks better in Chrome is because Chrome doesn't subscribe to ClearType on Windows. IE and Firefox both do use it (to check this Start -> Adjust ClearType Text and toggle it on and off to see the difference). But Firefox on Mac and Linux won't use it there because it is a Windows only technology.
Chrome has the upperhand on this particular problem because it doesn't use ClearType it uses DirectWrite on all three platforms. This means that anything should look the same in Chrome no matter what OS you're on.
Why does this matter? Because you're not in control of the user's computer. You cannot force ClearType off, you cannot alter the user's ClearType settings. A user might change their ClearType settings anyway ruining any fine detailing you might do using text-shadow to make it work.
You might get better luck using cufon for this but it's by no means a sure thing.
The solution I'd go for is using images for these icons. That way I'll know for sure that no matter what you're using to view the icons, they will be the same for everyone.
A good fix for OS X is to use the text-rendering and smoothing properties.
body {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
This also works well when it comes to web fonts.
I have found that occasionally the font-style will be overridden when using google fonts and the font will appear bold. This combo has worked well for me.
.element {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal !important;
}
Related
http://img31.imageshack.us/img31/6730/4x1f.png
This is an example of the pixelated text when I set the font size to anything other than 80 or 65. Would anybody happen to know why the text gets pixelated like this?
Code to replicate this issue:
<div class="top_text">Hello! Please check back some other time, this website is in development.</div>
.top_text{
font-family: "Arial Black";
font-size: 38px;
}
Browser: Google Chrome
OS: Windows 8
It looks aliased, I would rather it be antialiased.
Google Chrome currently uses a really old text-rendering method, GDI, on Windows. Source. Firefox, IE (and most other applications you run) use ClearType, which has lots of features (like font hinting) which make text look more "anti-aliased".
Chrome devs are supposedly fixing it; if you believe the above link, the fix is due to be released soon. For now, however, most fonts will look badly-aliased in Chrome, except at specific font sizes.
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.
in most browsers the site I am creating is fine. But in Google Chrome the font I'm using has lots of cracks in it and doesn't render properly at all.
Chrome:
FireFox:
I've tried various fixes for it but am still unable to get it to how the site is on firefox. Here is my CSS for the font face:
#font-face {
font-feature-settings:'liga=0';
font-feature-settings:'liga' 0;
-moz-font-feature-settings:'liga=0';
-moz-font-feature-settings:'liga' 0;
-webkit-font-feature-settings:'liga=0';
-webkit-font-feature-settings:'liga' 0;
font-family:'ChampagneLimousines';
src: url('/Resources/CLB.eot'); /* IE9 */
src:url('/Resources/CLB.svg') format('svg'),url('/Resources/CLB.woff') format('woff'),url('/Resources/CLB.ttf') format('truetype');
font-weight:700;
font-style:normal;
}
A few things to try:
Get the official web font files for your font if possible
Otherwise use a tool like the font squirrel generator
Use the bulletproof font face syntax
Use the Chrome SVG font trick for smoother rendering in Chrome
Chrome renders better at certain font sizes than others. Try setting e.g. font-size: 16px then incrementing / decrementing 1px at a time to find a compromise
It could just be that your web font is badly hinted, so find an alternate one
Note that Chrome, Firefox and IE all use different font rendering engines, so they'll always look a bit different
You can follow these steps:
Control panel-> Fonts -> Adjust clear type.
I found this solution and it worked for me.
Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.
Im using it in font-weight:100;
here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?
Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/
FIREFOX
CHROME
SAFARI
I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/
However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.
I also faced similar issue, when I tried to use google fonts with font-weight:300 - its working fine in all browsers except safari.
I resolved this by adding below css property.
-webkit-font-smoothing: antialiased;
I was running into a similar issue that appeared exactly the same. I was using the CSS font-weight: lighter; while using this google font link:
http://fonts.googleapis.com/css?family=Lato:300,400
Somehow it was displaying as 100 weight! So, I now explicitly use the font-weight:300; to get what I want. I'm not sure, but I believe this likely has something to do with me having the font on my system, and google suggesting my computer uses the system font before downloading it again... Wouldn't have figured it out without this Q and A, thanks!
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 »