Why does the font on the left side within the list look so chopy on Chrome? The used and rendered font-face is Source Sans Pro with a font-size: 16px and line-heigth: 24px.
I have double checked the zoom on chrome which is on 100%. When I zoom into the page, the font gets smoother. Also the text within the badges somehow looks strange.
What can I do, to make this font look smoother?
Update
After some trial and error I found the culprit, though I don't understand why it's causing the issues.
I have integrated the font using an #import statement like the following within my scss:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,300i,400,400i,700,700i&display=swap');
When replacing the import url with this...
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
... or when downloading the font and using it with a #font-face statement the fonts went smooth again...
#font-face {
font-family: "Source Sans Pro";
src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
}
Why is that? Also now the bootstrap classes font-weight-normal (400), font-weight-light (300) and font-weight-ligther (lighter?) all look the same.
P.S. This seems to be related: Google Webfonts and Anti-aliasing
Fonts on Windows always look less attractive than they do on macOs. That being said, there are 2 things i always have in my typography css to ensure I have maximum control over how it is rendered.
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
edit: Feel free to play around with values, you will get different results so find the one you prefer, this is my personal preference.
I'm trying to get my font look reasonably the same across mac Chrome, Safari and Firefox (will move on to IE later).
I've been playing with:
-webkit-font-smoothing: subpixel-antialiased;
The font almost looks the same, but safari and firefox it almost looks at least 1 weight thinner.
I also have tried:
-webkit-font-smoothing: antialiased;
And this for FF:
-moz-osx-font-smoothing: grayscale
Also I have this on:
text-rendering: optimizeLegibility !important;
This gets the fonts to look pretty much the same but it's not as smooth as subpixel antialiased.
Am I missing a property here? I know they are not going to look 100% the same across all browsers but you would think chrome and safari being both webkit browsers they would be the same.
I'm using Raleway from Google fonts if that's any help.
I usually use this approach with
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
or
-webkit-text-stroke: 0.5px
-webkit-text-stroke-color: same color as text;
I hope this helps. Thanks!
I recently came across this problem with the same conditions as you and same font type (Raleway from Google). Apparently, safari has some issues rendering the font face Google Fonts API sends when they include it in their code.
So in any other browser this #import url(https://fonts.googleapis.com/css?family=Raleway:900);makes a call for Raleway font weight 900. Not the case for safari.
SOLUTION:
Start by opening that security by making it a regular http. This is suggested here, #import url(http://fonts.googleapis.com/css?family=Raleway:900);
And then specify the font weight on the element.
h1{
font-weight:900;
}
If you are using LESS or SCSS, you will be able to do this much easier with a simple mixin, but that's another subject.
maybe the font-weight is light or lighter in your code
try changing font-weight to normal font-weight:normal; or font-weight:400;
When I've designed my web site in Adobe Flash Pro CS6, the font looks like this:
The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like these, respectively in IE, Firefox, and Chrome.
It appears thinner and pixelated in some areas. I've seen much smoother font rendering on OS X. How can I make the font appear smoother in these browsers? I'm assuming this is a problem with ClearType, which looks hideous with thin fonts like this one.
Here is the code I'm using to test, so answers can be tested before being posted:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
</head>
<body>
<span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
</body>
</html>
You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies etc etc.
This is something you shouldn't really care about. People who use IE are not going to switch to Firefox or Chrome or vice versa. They are used to the way fonts look and are not going to notice.
Browsers inconsistencies is a thing front end developers have to live with (sadly). Its great if they all look the same but that's not going to happen
Things you can try, you will probably need different fixes for different browsers.:
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
Edit 1: DirectWrite is now on chrome for windows which will improve the rendering.
Edit 2 (2017): System UI fonts
Another thing you can try is use system fonts for improved UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Readup - smashingmagazine
Readup - booking.com
Readup - medium
I find that in Google Chrome you can add -webkit-text-stoke to improve the appearance of fonts.
for example:
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
--
Note this answer was from 2014 and is probably not a good solution today.
text-rendering: optimizeLegibility applies kerning to the font, wich can improve readability, but only if the resolution of the display and font-size is high enough. It doesn't make the font any bolder if it was too thin before.
The problem here could be font-families that have one or more faces that are lighter than normal (font-weight:400) – like Googles Lato.
If you load all light to regular faces of Lato like this
#import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
I made the observation that most Windows browsers and Chrome OSX use font-weight:100 if you specify anything lighter than 400 – (or normal, regular). Changing the font-weight: to 200 or 300 doesn't render any different, although the inspector tools insist the machine is displaying e.g. font-weight:200. Which it isn't.
Removing the lighter weights (100 in my case) solves the problem, and lets me at least use font-weight:200, respectively. Rendering isn't absolutely identical across browsers but similar at least.
#import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);
This of course doesn't solve the actual problem not being able to access light font weights as specified.
There's no single fix for this, as far as I'm aware. It's multiple fixes implemented to suit each browser, except IE. Give these a shot:
For Chrome, and any other browser using webkit:
-webkit-font-smoothing:antialiased !important;
Place that in your html CSS, or for whatever elements you see fit. You can also add this along with the above:
text-shadow:1px 1px 1px rgba(0,0,0,0.005);
Experiment with different alpha values, but you should keep the shadow sizes as they are.
I'm unaware of anything else you can do, but this should address the biggest problem with Chrome at the very least (plus other webkit browsers).
I use this on all sites and it covers most issues with font rendering.
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
I ran into a similar issue recently, same font family and size looked differently on Chrome, safari and Firefox. The chrome and firefox look especially thicker. This might not be the best way but worked for me
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
Also, its worth a while to checkout different rendering engines.
CSS What are -moz- and -webkit-?
I think this is more a Windows problem than a browser problem. The same browsers render the same fonts much more smoothly on other operating systems such as Linux or Mac.
In Chrome, and by extension any webkit browser, you can use the following code to smooth your fonts:
-webkit-font-smoothing: antialiased;
or
-webkit-font-smoothing: antialiased !important;
Typically, I find that this doesn't do a whole lot. I think we'll just have to wait for Microsoft to do something about it.
You may be able to fix this using the css property text-rendering.
Example:
text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit
You would probably want to use text-rendering:optimizeLegibilty.
More information here: MDN Text-Rendering
Im going to prefix this with its a hack and i dont like it, but it works
transform: rotate(-0.0002deg)
It makes fonts noticeably smooth, albeit slightly thinner
It's late but did you ever try hint the font files?
Go transfonter site and upload your font files. Then the options area check the auto hint option.
I am using Open Sans and Open Sans Light font in my site.
And below is the googleapis font link which I am rendering from google fonts.
I want to use Open Sans Light and Open Sans font in some of the text.
If i choose open sans 300,400,600.
and use font name in the class and add font-weight:300 for light and 400 for regular
it doesn't work for ie7 and 8. It shows the big font on ie 7.
but by using font-weight related to the font styling works fine for other browsers.
Need help to fix this for ie7 and 8.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
With Google fonts you won't be able to solve this problem.
The problem is that IE7/8 understands only
font-weight:700 which it interprets as equivalent of font-weight:bold
and
font-weight:400 which it interprets as equivalent of font-weight:normal.
A solution to this is to serve a separate font file to IE7/8 which contains the desired font face weight - google fonts foes not offer this kind of fallback - but it is very nicely solved with Typekit, which than let's you use this kind of crossbrowser font face rule:
font-family: "proxima-nova-n6", "proxima-nova", sans-serif;
font-weight: 600;
The first declaration - "proxima-nova-n6" - provides a fallback for IE7/8 for a weight of 600.
If you want to solve this without paying for a service, you will have to create separate font files containing different font width - upload them to fontsquirell and generate the complete set of formats needed to cover all the browsers. Take care with licenses - not all font's are free to embed on web.
I am using one custom font. When I use font-weight: bold it is getting more bold in Safari web browser, but everything works fine in all other web browsers.
I have tried the following, but none of them worked.
-webkit-font-smoothing: antialiased;
and
text-shadow: #000000 0 0 0px;
If you're using a custom font this is likely happening because the font set doesn't proved a bold weight, which means your browser must synthesize it- this creates discrepancies between browser outputs.
This kind of behaviour can also be replicated if you try to use Tahoma or Lucida Grande with e.g. font-style:italic:, which neither font is supplied with.
If you're using Google webfonts (or other) you may want to check a bold version of the font is provided.
See this answer on SO for additional information such a the use of text-rendering: optimizeLegibility;