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
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 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.
The fonts are being rendered crisply to a fault, such that the edges are all jagged. Being a minimalist site, I'm trying to get everything perfect.
How do I fix this? http://individual.utoronto.ca/andrewlouis
Font rendering is browser-specific and operating-specific.
There's very little you can do to control how the fonts are rendered, and what you see in your browser is not how other users will see it in theirs.
This article is a bit old now, but it does explain the differences very well between the various browsers and how they render text.
And here's a question over on Webdesign.stackoverflow that asks how to make fonts render the same across all browsers: https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers
The answers given there might help you, but the basic answer is that there's not much you can do about it.
For much better / smoother text in Chrome and Safari, try the CSS:
-webkit-font-smoothing: antialiased;
It appears however that -moz-font-smoothing was once available to use, but is no longer available. Fonts do tend to be smoother in Firefox anyways it seems.
Try:
font-smooth css property. See docs: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
Also here: http://www.cssportal.com/css-properties/font-smooth.htm
See Font Rendering Differences: Firefox vs. IE vs. Safari
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
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