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...?
Related
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.
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;
}
I am trying to make text overflow being hidden in a td element on the page
using a custom dingbat font.
For some reason when I set overflow:hidden; the text simply disappears.
When I remove the font-face declaration, it works as expected.
I also notice that the font itself is shifted down in markup, which is not the problem for me, but it feels like a browser has hard time rendering it?
Here is the live preview.
Update:
As suggested by Stephen Thomas I tried running this example on different machines, and on Windows Vista it looks great on all major browsers (as far as I can tell). And it works for him on Mac OS. But it doesn't work well for me on Linux :s.
Also this custom font is shifted down on many browsers.
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 have a few headings which use the Vollkorn google font. I noticed that only in Firefox and Chrome that with the default bold weight and normal font style, the actual text gets pushed beyond the bottom boundary of the element. When I switch it to italic, it goes back up to normal. This doesn't happen when the font has a normal weight.
I've made a very bare HTML file which shows this behavior but the problem only exists for me, I sent the file to someone else and it was just fine with those two browsers.
I have tried to reproduce this on jsFiddle with no luck.
http://jsfiddle.net/5WDJU/1/
a
Here is the code on Pastebin, I pasted jQuery into it for simplicity.
http://pastebin.com/yXzHqKrD
Here is a screenshot to show the issue on my computer.
I also tried to reproduce this by going to the google font website and toggling the styles with Firebug but it was working fine.
Am I missing certain styles that would correct this like on jsFiddle and on the font website? Even so I don't understand why it wouldn't occur on the computer of the person I sent the file to. Is this a potential pitfall of google fonts?
Maybe this is a lineheight or padding problem. Try "inspect element" in chrome or safari (right-click) and view which styles are active on the input form.
Did you try adding reset css? http://meyerweb.com/eric/tools/css/reset/
After some more searching, I have managed to find two instances of the same problem occurring to other people. I don't believe this is an issue with the CSS anymore but I'm not sure whether the issue is due to Google's actual font or how Firefox and Chrome decides to render this particular font.
Here are the two links.
http://code.google.com/p/googlefontdirectory/issues/detail?id=37
http://productforums.google.com/forum/#!topic/chrome/QofmpbyZ7sQ
My solution which was taken from the first link was to download the bold non-italic font from FontSquirrel and embed it into my site.