See Edit below
Edit2 I created a fiddle to reproduce the problem and as it seems in jsfiddle the problem is allways there: https://jsfiddle.net/h1b2wn5L/ (just in chrome)
Sometimes the font I use for a webproject looks strange. The font is called Istok Web and I load it from google fonts: https://www.google.com/fonts/specimen/Istok+Web
I created 2 pictures. One with the problem:
And one after a simple reload of the page:
As you can see the Tand E have like a bold top and in a normal Text T and E stands out.
I have no clue where this is coming from and its also gone after a simple reload. What could it be? I also can't say if this also happens in other browsers or not, as I work with crome and I don't know how to reproduce the problem.
Edit I found out how to reproduce the problem. The problem comes when I switch to mobile view in the Developer Tools. And it stays when I switch back to normal view. So I guess its not a big problem, but I am curious why this happens.
This is due to aliasing problems.
You can use some alternatives for webkit browsers using -webkit-font-smoothing: antialiased; but you won't be able to reproduce this fix in Firefox.
You could go for a workaround using text-shadow, as described here: https://www.elfboy.com/blog/text-shadow_anti-aliasing/
Web browsers do caching most of the time (and web servers, depending on its configurations), When you refreshed the page it reloaded page resources and brought the correct font from google. Also, maybe the font was not loaded perfectly in the first time.
However some fonts do look bad in some browsers, and pay attention to font size some work better in even numbers and some in odd numbers (e.g. 13px vs 12px). Make experiments then choose.
you can try the following CSS rules to enhance the font as well (no guarantee to work, but makes no harm):
html {
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing: grayscale !important;
}
Related
On this website I'm working on, I'm using this script font that has a lot of detail in it. The client pointed out that all the text using that font looks more bolded than it does in the design, losing a lot of detail. After a lot of digging I found that when the font is over 163px, it looks normal and you can see all the detail. But as soon as it goes 1px under that, it gets "bold", and I can't figure out why.
I've tried setting font-weight to 100, no change. I tried -webkit-font-smoothing: antialiased;, since I'm on a mac and I read that sometimes macs render text more boldly if you don't do this, but... That didn't change anything either.
I created a codepen to show my issue, but then I realized that #font-face doesn't support external URLs so you guys won't be able to see the font in action anyway. Here's a screenshot though, you can see the very plain html/css and the effect I'm seeing:
https://www.dropbox.com/s/x3xs931l962524b/Screenshot%202019-10-16%2012.08.18.png?dl=0
Everything 163px and over looks normal, everything 162px and under looks bold. but whyyyy??
Edit: Apparently this is ONLY happening on some Macs in Chrome specifically. Could just be chrome rendering dumbness...?
I'm working on a web project and one of the fonts in particular (Rosewood Std Fill) is appearing chunky when rendered in the browser. See chunky version below rendered in Chrome and regular version rendered in Illustrator. I apologize they are different sizes.
In any case the font weight and style are both set to "normal". I'm not really sure what steps to take to try to resolve this situation.
Chrome has very poor default AA. Try adding the following CSS to your text.
-webkit-font-smoothing: antialiased;
or
-webkit-font-smoothing: subpixel-antialiased
They have different results depending on whether your background is light or dark. Try them both to see which looks better in your situation.
I've got a font for a website that I'm loading via #font-face. However, in Safari, it shows up at different weights on different pages, even though inspector shows all styles to be identical.
I've tried setting the font-weights (and anything else I can think of) explicitly, but nothing seems to affect it.
You can see for yourself the variation below:
Has anyone seen this before? or know how to fix it?
Try using -webkit-font-smoothing:antialiased;. This will force safari rendering method then safari will render the font using this method only, instead of automatically switching it.
I had this problem one time, when I implemented a CSS-only slideshow, and the site title rendered bolder when a specific image was shown.
Be aware of that some texts will look bad with this.
i heavily use Google Fonts and custom fonts, as Google Chrome has a bad habit of rendering them poorly, which is a shame because everything else works so well with Google Chrome, is there any way i can (preferably using css) render the fonts to an 'Apple Safari' standard?
Thanks,
This is an ever confounding question. (see: https://superuser.com/questions/354006/google-chrome-never-renders-fonts-properly-no-smoothing-etc. See also: http://productforums.google.com/forum/#!topic/chrome/oXILHkVG75M)
It's a Windows 7/Vista ClearType issue. AFAIK Safari, FF and IE render text differently or use their own text rendering routines. Basically, it used to be that you could add a small shadow to set an internal Chrome rendering flag, and the text would look decently better, but it still looks pretty bad. That no longer works. As far as I can tell it's a bug in Chrome that hasn't been fixed.
I'm still looking for a work-around myself, but I think we're pretty much out of luck
Have you had a look into -webkit-font-smoothing ? I regularly use Google Fonts and #font-face kits and have had success with some of the 'chunkier' fonts using the 'subpixel-antialiased' and 'antialiased':
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
Perhaps try each and see if either makes a difference to what you're seeing?
There's a post on MaxVoltar that gives a reasonable explanation:
http://maxvoltar.com/archive/-webkit-font-smoothing
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.