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;
}
Related
I'm trying to build a web page and need some kind of fairly distinct cursive font (not too crazy, but still distinguishable from standard print). However, when I look at this page in Firefox: https://www.w3.org/Style/Examples/007/fonts.en.html
My browser renders all of them in an approximately standard font--none of them look nearly cursive enough. Since this is just an out-of-the-box installation of Firefox, I imagine this is how it will render on most users' screen if they're using the same.
Is there any way to force render a more cursive font for someone using standard Firefox?
As was mentioned earlier, the font in that example varies depending on device, not browser.
When you set a non-specific font-family in your stylesheets, e.g. font-family:sans-serif; or font-family:cursive; what font that actually gets used will depend entirely on that visitors operating system and what fonts are installed there.
In that link it shows you various system fonts that may or may not be installed, with system defaults as a fallback, with a picture next to each showing what it should look like if your system has that font. This will differ from person to person. It gets quite complicated when you consider that sometimes the fallback fonts can even vary between OS versions.
So for more complete control, many developers turn to webfonts. I use a lot of Google fonts for my websites; https://fonts.google.com/
There are different ways of using a webfont, but I find this way simplest;
/*put imports at the top of your stylesheet*/
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h2 {font-family:"Lobster", cursive;}
<h2>I'm A Webfont</h2>
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 am having a font issue with Arial Narrow. Because of this project, I must use Arial Narrow.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari.
Could anyone help me fix the problem? Or is it just the way the browser renders the font and there is nothing I can do?
Firefox or Safari
Chrome
.content { font-family: 'Arial Narrow', Arial, sans-serif; font-size:13px; }
jsfiddle to see what I see.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari
That's just how the web is.
Consider yourself as someone who is suggesting the typography--but not dictating it. You're suggesting that a certain font be used at a certain size.
Beyond that, though, other factors come in to play...
how does this particular browser render fonts?
how does this particular OS render fonts?
does it obey the kerning pairs?
does it implement font smoothing?
how does it implement font smoothing?
what is the browser default sizes?
did the user change the default sizes?
did the user zoom in perhaps?
or zoom out?
or resize the browser?
or open on a different device?
etc.
Or is it just the way the browser renders the font and there is nothing I can do?
Well...you probably COULD do something...maybe run javascript to measure the line widths and then re-calculate the font size to adjust the width or letter-spacing but in the end, it's all going to be a lot of extra code that may or may not actually 'fix' anything, may make things worse, and is really fighting the nature of how type works on the web.
Don't drive yourself nuts. Convince yourself right now that it's never, ever going to be perfect. It's not going to be the same between different browsers, nor is it necessarily going to be the same on the same browser on different operating systems (i.e. Firefox on Windows 7 vs Firefox on Windows 8 vs Firefox on Ubuntu vs Firefox on Mac vs Firefox on Android). End-users are very quick to fixate on stuff like this ... they need educating, it's way over most of their heads.
The font selection is always subject to the browser and also the underlying font engine in the operating system. There's really no clean way around it unless you are rendering the font yourself somehow and pushing vector or bitmap graphics into the browser.
For your single-line conundrum, consider using the ellipsis features of CSS.
http://quirksmode.org/css/user-interface/textoverflow.html
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;