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...
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.
I'm new to code and sort of stumbling around at this point - Please bear with me.
I found a query in this forum for someone trying to edit font type, and tried their fix, but it didn't help with my specific issue.
I didn't know that I should only do edits at the end until recently, so I've already done quite a bit in the stylesheet(hope that's what it's called). I've already edited the font sizes for my sidebar menus and titles, but I can't seem to find a way to fix the rest. The font that needs fixing is the body of all pages, FAQS, about section, product descriptions, etc.
I'd like to keep it responsive to all devices, but really on my phone it doesn't seem near as tiny as it does on a regular computer screen. I haven't tested it on a tablet, but I'm assuming it's tiny there, too.
Should I go back and change all my previous work to continue? I hate to do things incorrectly, but I've done so much work that I'd hate to undo.
Here's my mess. Silver Frame Soap Works
I am really sorry if you think i didn't got your point but as far as i got your problem. The solution is you should give the font family in the body element in your main style sheet and make it !important if it is not applied.
As
body{
font-family: arial !important;
}
it'll overwrite the other font-family already given. And if the font you are applying is not in the list of commonly available font families then import it by pasting link from google fonts in your css file. This will help you to import the font : https://developers.google.com/fonts/docs/getting_started
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";
Just started using this technique and am having strange results on the PC side. Virtually every browser I preview this site in on a PC makes the font look totally horsey. Example:
On the Mac:
http://dropbox.smallparade.com/howto-mac.png
On a PC:
http://dropbox.smallparade.com/howto-pc.png
Anyone have experience with this issue? Is there a resolution? Does it have anything to do with how the fonts were created? Appreciate any help I can get. I used the font-face generator over at fontsquirrel.com.
That's a Hinting problem.
When you generate your font-face kit (like in FontSquirrel), you need to specify Hinting on the Expert options.
Choose Expert, and under Rendering, select:
Apply Hinting - Improve Win rendering.
probably you can specify font-size in px for example
font-size:11px/11px;
this might help you because i have faced same problem and i solved it like this only
I had this same issue, and just like Rinkalkumar I'd suggest specifying font-size.
But I've also found out that some fonts in some sizes simply render ugly.
So you may wanna try adjusting size few px +- just to check is this the issue.
Font face support isn't perfect yet, so if this proves to be an issue, you
may wanna try http://cufon.shoqolate.com/generate/ - it involves javascript
but has proven to be great when you want fonts render consistently across browsers/platforms.
ttfautohint will rebuild the font's hinting for you.