I'm using custom font with #font-face. But they're rendered with jagged edges in the browser.
I tried .woff & .otf, Chrome & Firefox; same results.
Funny thing is, that the same font on the same page in small text, looks much much better (see screenshot 2).
OK, I found the cause of the problem:
The big text was in a h1 element, which by default gets a font-weight: bold.
I had to unset it by putting font-weight: unset, & walla!!! looks amazing now 😀.
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...?
On a site I work on, we use SVG for the logo. I've noticed a few times that the logo occasionally doesn't load the correct font when it renders in Google Chrome. I haven't been able to replicate this anywhere else, but it has happened frequently enough that I'm concerned it could be happening to other Chrome users.
You can see the SVG here: https://jsfiddle.net/rmlumley/8n5Lrq9z/
I'm loading in the SVG via CSS as a background image for the h1 in this code:
<li class="home"><h1><span>Morgridge Institute for Research</span></h1></li>
When I load the SVG directly in the browser, it always works and loads in the correct font. That said, occasionally when it loads in on the page in Chrome - the font looks wrong. I've uploaded how it renders incorrectly.
Is this a known issue with Chrome or any suggested work-arounds so that this doesn't happen? Is there something inherently wrong with my SVG code?
Your SVG is not using any font other than the default browser font (normally Times New Roman). That's because the SVG is not specifying a different font.
You may be thinking that the following in the SVG is changing the font:
<style type="text/css">
#font-face {
font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}
</style>
But this is doing nothing. It should be something like:
#logo {
font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}
But even if you do that, the only users that will be seeing "Garamond", "Baskerville", "Baskerville Old Face" or "Hoefler Text", will be users that have those fonts installed on their computer. You may be seeing Garamond (if you have that font installed), but most people will still just be seeing Times New Roman or whatever they have their default font set to.
If you want to use another font, then you would need to fix your #font-face
declaration and use Data URIs to embed your font in the SVG.
But there is a much better solution to this problem however. And that is to convert your text to outlines (paths). Then all your font worries disappear, and you are guaranteed to have the correct representation of your logo font, in everybody's browser.
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 downloaded fonts from google web fonts to use my psd project it's okey so far.but in my html my google web fonts look different as you see below images;
my psd
and my html
font-size
font-family
line-height
font-weight
all same as photoshop but fonts look different...
and I added body
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
but nothing change..
by the way my font is Hind Fonts
All browsers will render fonts slightly differently regardless, font rendering is also is dependent on your OS.
Another thing that can effect how your fonts look is how the designer has set the text anti-aliasing in Photoshop. Text anti-aliasing is controlled here on your top menu bar (with text tool selected):
Below is the Hind font set with 5 different anti-alias settings:
Note how, in particular, the strong anti-aliasing setting changes the look of the actual font glyphs. Without seeing your actual code it is difficult to compare and diagnose any issue beyond what could be caused outside of Photoshop
You must keep in mind that every browser renders font differently. Photoshop has a lot more font functionality than a web browser. Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.
You can fix font rendering slightly using text-rendering. This
property provides information to the rendering engine about what to
optimize for when rendering text.
It's not defined in any CSS standard - it's just an SVG property.
However, Gecko/WebKit/Blink browsers let you apply this property to
HTML elements.
Some font files contain additional information about how the font
should be rendered and optimizeLegibility makes use of this
information
so you can use:
.yourText {
text-rendering: optimizeLegibility;
}
You can try and use options like font-stretch: normal; or font-weight:normal; maybe they will help you atleast a little.
Are you sure that you just didn't set the browser's view zoom to somewhat below 100%? It seams like that.
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.