hi been trying to find a solution for to make fonts look as nice as they do in safari 5.1.7
in chrome v34
in chrome (and IE and FF) they are all jagged, but in safari they are nice and crisp!!
heres example
chrome
http://screencast.com/t/CpJDoManNbQg
safari
http://screencast.com/t/9nYGOh7N
if you dont notice this aliasing difference between the major browsers or think its worth complaining about then pls dont reply
why dont all browsers have the same font rendering as safari?!
its so much nicer and easier to read!
its 2014 for goodness sake!
so as designers we can produce websites that look like printed material
anyway!
i stumbled across this site just before
and on chrome the text appears very close to how it does on safari
eg there is way more anti aliasing than before
http://action.sumofus.org/a/Facebook-app-taps-phones/3/2/?sub=fb
EDIT here another site with clean anti aliased fonts on chrome!
https://www.dartlang.org/
can someone tell me how its been done?
or how else to smooth the jaggys?
ive trawled here trying everything and nothing seems to work!
thanks in advance for any help you can provide!
Chrome has a problem with rendering fonts, even those from Google Fonts.
One way I've found is adding this to your css:
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
As you can see more here:
http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/
It seems more like one is bold, or different weight- safari being heavier. I see this all the time, usually i test the difference between ie/ff/chrome sometimes to compensate i add a few more font weights with cufon and make ie lighter.
One thing I always add to my class for better font rendering is this.
-webkit-font-smoothing: antialiased;
Try it out and see if there is any improvement.
Related
I am using 'Coolvetica Regular' for my headings. It works ok on different browsers on my PC, but on mobile it looks weird on every mobile browser that is based on Chromium (Chrome, Edge, Kiwi).
And by weird I mean that letter-spacing between words isn't handled correctly on mobile. This font was also used on this portfolio website and I didn't see this problem there.
What should I do to fix this problem? Is there any way to only add letter-spacing to mobile Chromium-based browsers?
I'm assuming you're referring to the font. You need to note that not all browsers are created equally. If you want consistency cross-browser then I might suggest sticking with a simpler font such as sans-serif. Now, in my opinion, the fonts don't seem to differ too much to raise concern. Remember, the first font in quotation marks is what the browser is going to attempt to render first. If it cannot, it will move to the second option. Chrome and Edge are probably the most versatile browsers.
This is the best solution I could come up with. I saw this question on StackOverflow and tried to implement it for my own scenario. On the desktop, it worked correctly and could differentiate between Chrome and Firefox, but on the mobile, it didn't differentiate between Firefox and other Chromium-based browsers.
Overall I'm happy with the result and I don't think this issue worths the time and effort as #Rene suggested in a comment above.
Here's what I added at the end of my CSS to fix this issue:
h1, h2 {letter-spacing: 0;}
#media screen and (max-width: 480px) {
.selector:not(*:root), h1, h2 {
letter-spacing: 0.04em;
}
}
I use #font-face on Tumblr, with Base64 encoding done with Fontsquirrel web generator so it can work in Firefox, too, and it was working fine for a few months. However, lately, text is blurry, but no everywhere and I don't know what triggered this. I don't think it's latest Firefox update, because it worked fine for some time as I said.
This is how it looks:
and this is "live preview".
So as you can see font is okay on some places but blurry in others.
Any ideas how to fix this?
I think it might be your font. Here's a screenshot from IE11 on Windows 7:
You can see a coloured highlighting effect around the text in different places, consistent with your Firefox screenshot. I think that's caused by bad font hinting for ClearType.
If you normally use Chrome on Windows, it might look "okay", because Chrome uses GDI+, an old, ugly font-rendering method. Firefox and modern IE use ClearType, which typically looks much better.
Disclaimer: I'm not an expert on typography, so I may be wrong.
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
I found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.
Photoshop — What I want it to look like:
Yuck — Chrome (and Safari) on Mac using an #font-face kit from fontsquirrel.com:
Chrome (and Safari) on Mac using Google Fonts (basically identical):
GOOD —Chrome on Windows (fontsquirrel):
GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)
Chrome on Mac using fontsquirrel, with opacity:0.999;:
Does anyone have any ideas on what is going on here, or what I might be doing wrong?
I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.
I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).
I hope this helps!
try
html { -webkit-font-smoothing: antialiased; }
If you look at the footer on this page here in Safari, then look at the same footer on any other page, you'll see a difference in font rendering. It looks the the font smoothing is being applied twice to me.
If I turn off the Google map, then the font rendering returns to normal, so I'm confident the map is at the root of the problem.
I am applying a transparent font shadow to all text to fix some #font-face rendering issues (artefacts mainly), but this problem is present with or without text shadow.
It's a Mac only problem.
Has anyone else come across this problem? Is there a known cause and/or fix?
I've been tearing my hair out with this for the past few hours. You can fix it by adding
-webkit-font-smoothing: antialiased;
to the offending selectors.
I hope this can save someone else the time and stress it caused me.
This was also the problem for me, THANK YOU for figuring it out!!!!
It differed slightly for me in that I had to add -webkit-font-smoothing: subpixel-antialiased; to the text that was the wrong thickness to be able to fix the problem.
Now works like a charm :)
I test them on chrome and safari on PC and they both looks almost the same , remember browser rendering are not exaclty the same and also you are using some no web safe fonts like "Baskerville LT W01 Upright", "Baskerville", "Caslon 540 LT W01 Roman", "Caslon 540", "Georgia", "Times";