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.
Related
I have problems with the fonts on my website to have skarp fonts on both mac and pc. The fonts look sharp on Mac, but on PC the fonts are very dull and thin.
Is there something specific in CSS I can do to avoid the problem with PC?
Screenhshot from mac
Screenshot from PC
It is difficult to answer this question, because there are a lot of different factors which influence font rendering.
The font itself. Is it a screen font, by means of hinting and other special optimisation for pixel based display. The font you have showed in the image looks very thin, what is always problematic in small sizes.
Font rendering is done by the OS, not by the browser, so there are always differences in the final displayed rendering.
In my experience, 98% of such cases appear if one tries to use a print font in relatively small sizes. If the font is thin in cut, problems grow.
To overcome those issues, I recommend to use screen optimized fonts (aka webfonts), those can be provided for free from google fonts etc. or bought. If it still does not look good, try bigger sizes and if that is not option, it might be the wrong font of choice.
Use Font rendering (https://davidwalsh.name/font-smoothing):
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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 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 used Google font called http://fonts.googleapis.com/css?family=Merriweather:400,700,700italic on my website it looks good on Firefox and IE but not at the safari and Google chrome..... Please view the Image....
Image
I want it to be working on each of the browser without any pixelate issue
Requesting your best suggestion...........
Thanks
Just try this:
{
-webkit-text-stroke: 0.6px;
}
You cannot possibly control how a browser like Chrome renders fonts. You just have control over choosing the best font at best font-size.(Some fonts looks good only at certain font sizes - the font you are using looks good from 50px onward it seems. EDIT:Ah that is a different issue)
If you / your client is so specific you can even get help from some custom rendering like
Typeface.js
Cufon
which uses canvas/flash to render fonts. Using it extensively can cause performance issues or slowness.
There used to a font-smoothening, but I guess no longer supported, you can try it though -webkit-font-smoothing property has no effect in Chrome
you can smooth fonts by using
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
read more: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.