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.
Related
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 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;
}
I've read that OSX and Windows have two very different algorithms for rendering fonts. As such, it's a common issue that web fonts look "heavier" when viewing them in OSX than they do in Windows.
For example, this is the same font, on the same site, in the same browser, but on different operating systems:
Here's Arial exhibiting similar differences:
Is there any way of altering the rendering of fonts in either Windows or OSX so they look closer to each other? Or is there some other technique to deal with this difference?
That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.
A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.
Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).
-webkit-font-smoothing: antialiased;
I'm converting a Photoshop image to HTML, and I noticed that when I set the font size to 11px it gets blurry, but in Photoshop it still looks fine.
So after playing around I discovered that if I set the font type option to smooth instead of none, Photoshop also makes the font blurry.
So, how can I make the font sharper using CSS so that it mirrors Photoshop's font rendering? I'm using Arial as my font. Here's my CSS right now:
.user_status {
color: #666666;
font: Arial;
font-size: 11px;
display: block;
margin-top: 10px;
}
Thank you all for you awesome answers, it helped me a lot, i wish i could chose more then 1 answer as the correct one...
Most browsers use the system's font rendering libraries, so most fonts will render slightly different on different operating systems. However, you can try using the 2 css3 properties listed below:
-webkit-font-smoothing: [ auto | initial | none | antialiased | subpixel-antialiased ]
This property only works with webkit browsers, like Safari and Chrome. See http://maxvoltar.com/archive/-webkit-font-smoothing for more on this.
font-smooth: [ auto | never | always | <absolute-size> | <length> ]
This is part of the W3C's CSS Font module specification. You can view the whole thing at http://www.w3.org/TR/WD-font/#font-smooth-prop . I am not sure whether any browser supports this property, yet. YMMV.
Unfortunately, there isn't much you can do. Browsers don't have the advanced anti-aliasing settings that Photoshop does, where you can set the font smoothing mode to sharp, smooth or crisp (which I love). You would have to make the font bigger or smaller, and it depends mostly on the browser how the text is rendered.
Unfortunately, you don't usually have any control whatsoever over how fonts are rendered by the browser. A new CSS3 property, font-smooth, may afford some control, but not the kind you're looking for.
Some alternatives might be to use JavaScript and images, rendered manually or server-side, to achieve the effect you desire. You might also be able to use sIFR (Scripted1 Inline Flash Replacement) to substitute in a small Flash movie clip that allows you to anti-alias the font however you please, but Flash is hardly ubiquitous and it's not a very efficient nor elegant solution.
So, if you absolutely need this functionality, I would suggest making transparent PNGs with Photoshop and using background-image and text-indent: -9999px to replace the text with the image.
Another point you might want to think about is, should you really be using a font size of 11px? That's rather difficult to see and you might prefer simply choosing a larger font size.
1 I might be wrong on this acronym.
In webkit you can set:
-webkit-font-smoothing: none;
This would approximate your Photoshop antialiasing: none.
See a demo here: http://jsfiddle.net/jv5W8/