I am currently using Helvetica Neue on a website that I am developing. Over the past few months, I have noticed that the Helvetica Neue font renders extremely bold in Google Chrome. When viewing the same site in Firefox, everything looks much better, and as expected.
Here's a comparison screenshot for reference:
The CSS rule for this portion is fairly straightforward:
#top-bar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 30px;
color: #ccc;
font-size: 80%;
line-height: 30px;
}
#top-bar a {
color: #eee;
}
Can anyone explain why the font looks so different in the two browsers? It almost looks like Chrome is rendering a heavier font weight, even though font-weight: normal has no effect. This is not unique to this site, either. Any site (including Bootstrap Docs) that uses Helvetica Neue suffers this on my PC (and others running Chrome). Everything looks fine on a Mac.
Is there a solution? Some technique to mimic FF's rendering of the font in Chrome, for example?
This is because Firefox supports the hardware-accelerated DirectWrite API (part of Direct2D) to render fonts and Chrome doesn't. See for example:
Chrome Issue 25541
Chrome Issue 124406
Even if you switch off hardware acceleration in Firefox, the results are different because both browsers use different font rendering backends.
Related
The font looks distorted on different browsers except chrome.
At first I had two google web fonts attached, Montserrat and open sans. it looked great on chrome, but when I checked it on firefox and safari the montserrat font looked all crappy and distorted, after looking up for more than an hour I found nothing useful so to make things work I removed montserrat and adjusted open sans in place of it (I know),
so now open sans looks good but only in small size as soon as I increase the size of the font it gives that same crispness that it gave to montserrat, which I dont want!
I like it the way chrome displays,
What should I do please help.
Your sites never to look the same in different browsers or operating systems, they are using different architecture all have different conception on what is preferred.
Also don't bloat your css by tweak your css to adapt variety of classes for different browsers
But you can try with code below:
font{
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?
I tested my pages in browsers for awhile as I've been designing. and I've noticed the header tags <h1> through <h6> are not being rendered correctly in safari...like there's a missing font. I'm running twitter-bootstrap and for some reason I cannot fix this problem.
I honestly think its my computer fonts and not the browser.
If I disable optimizelegibility in CSS it works fine in Safari, however, every other computer I've tried it on works just fine.
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #222222;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: inherit;
font-weight: bold;
color: inherit;
text-rendering: optimizelegibility; /*Causing problems */
}
I don't even have helvetica Neue on my windows computer, I have all the Neue LT fonts, however.
UPDATE
Okay I used font frenzy and revert my fonts back to windows installed phones. I never had Helvetica Neue only Helvetica Neue LT.
I got it to display normal, but this raises a good question. Are people with these fonts install going to have the same issue as me?
Should I attempt to use fontface to fix this? How honestly could I make this so no everyone would have the same problem as I did.
Is this essentially the same question? Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?
And the answer (from link):
Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with #font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.
This link here also has an interesting comment thread on the issue: http://code.google.com/p/chromium/issues/detail?id=39017
This works fine in Firefox and IE9
font-family: "Arial Rounded MT", Arial, Helvetica, sans-serif;
But not in Chrome, Safari, IE 8 & 7 and Opera. In those browsers it defaults to just Arial.
Is there a way to use the arial rounded mt font in those browsers?
Note: I am testing this on the same computer which has the arial rounded mt font installed.
Try using it's postscript name - though it's off spec, some browsers will use it anyway (I know for sure Safari does, not sure about the others).
In this case, the ps name is ArialRoundedMTBold, so try:
font-family: ArialRoundedMTBold, "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
If you're going to use un-web friendly fonts then other users who visit your website will not see the fonts unless they are installed on their computer as well.
You are best by looking into using either...
Font Face
Or
Cufon
...as these will allow all visitors to your website to see your custom fonts.
I am having a little issue with a font in Chrome. I think it's the way I'm specifying it. I have:
font-family: "Myriad Pro", Tahoma, Arial;
That works well in FF, IE and Safari, but Chrome just shows me weird symbols.
Using font-family: Tahoma, Arial; works well for all the browsers, including Chrome. But I need Myriad Pro at least for IE, FF and Safari, how can I achieve this?
Thank you!
Myriad Pro is NOT a web font. Because of this, Myriad Pro is not available in all browsers (also, not all computers have the font installed), you are going to end up with a lot of visitors who will only see Tahoma.
Try using #font-face. I recommend FontSquirrel's #font-face Generator. All you have to do is upload your font, then it generates the files and CSS you need to get a pretty consistent looking font in nearly all browsers, even IE6!
Remove Myriad font from stack in css. Refresh your page. Then add this font back to your stack again and refresh your page. I don't know why, but it worked for me.
Are you on a mac? I found this: http://www.mactalk.com.au/56/83001-font-issue-google-chrome.html
"Myriad Pro", Tahoma, Arial;
should it not be
"Myriad Pro", Tahoma, Arial, sans-serif;
This also might be case of the browser for some reason not being able to access the Font. Happened before for me on Opera, it would only be able to access a few fonts, but none of the special fonts I tested that other browser could see just fine. Updates \ reinstall never resolved it for me, but after upgradin from Vista to 7 the problem went away.