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";
Related
I have a website that uses a font with ligatures, and for some reason, ONLY in IOS (in both Safari and Chrome), there is a large gap showing between certain letters (see image). I've been told that this issue might be being caused by the way the ligatures are being rendered, but I'm not really sure where to go from there.
You can view the problem on the website at: http://kaizenmedia.co/coda-signature-edibles/.
Apologies in advance, because my typography vocabulary is very limited so I'm not sure that I'm articulating the problem clearly.
Does anybody know why this might be happening and how I might be able to troubleshoot? Any help or ideas is much appreciated!
I think this is an iOS font-kerning issue which appears from time to time with, as you mentioned in your question, font with ligatures. I turned on the web inspector and tried debugging connecting my iPhone to Mac and found that and words that have 'fl' together face this issue. I tried replacing 'Truffles' with 'fluffy', 'flies', 'floop' etc. and the problem persists. I haven't tested if any other letter combination faces the same problem.
I notice that you have text-rendering: optimizeLegibility !important in your code-signature-edibles.css. Try changing it to text-rendering: optimizeSpeed, at least for this particular selector.
Normally i never get this problem, but this time, i really don't know what was going on... Hope someone can help me.
I did look lots of tutorials and hacks to fix the font render problems in Chrome but with no success.
This is my website:
http://server.developweb.com.br/site/
The font is Helvetica, but i did try with Open Sans and got same problem.
The font was rendered like if was low resolution... cant use antaliases css hacks... it do not work...
What it can be?
Ps. The problem doesn`t shows up in MacOSX. Just on Windows...
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.
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.
Hey everyone, I'm working on a site and any special characters ("’" "…") turn into garbage at any font size over 19px. I'm using fonts I defined with #font-face, and the garbage disappears when I use a fallback font. This is Firefox 3.6.13.
I've tried defining the fonts in the page with a font: declaration rather than a font-family: declaration (see here) but it doesn't work.
I can use the standard straight quote and skip the special characters, but have you seen a straight quote in a heading at 40px? Ugh.
Anybody seen this bug, and any suggestions to fix it server-side?
Perhaps you will simply have to use another font?
After some more research, I (sort of) figured out what's going on. Firefox 3+ will automatically "optimizeLegibility" for any fonts over 20px (look up CSS "text-rendering" property).
For whatever reason, the fonts I am using don't render correctly when Firefox applies this value. If I specifically declare:
body { text-rendering: optimizeSpeed; }
Suddenly the problem disappears. Obviously this might bother someone who likes the effect of "optimizeLegibility" (it's definitely a nice effect), but if you can't change font-faces and you're getting garbage in your headings, I hope this helps.