Please have a look at this JSFiddle:
http://jsfiddle.net/tCeKm/
We are using a #font-face to embed the font Bitstream Vera Sans. On Firefox and IE, the font renders okay:
On Chrome 35 on Windows 7 however, there are some gaps between the Y character and the following one:
We're using the HTML5 Boilerplate CSS reset, so the differences are most likely a bug in Chrome or a problem with the font.
EDIT: In the Chrome screenshot (second image), the font appears to have a smaller weight. This is only because Stackoverflow scales the second image down since it has too much width.
Those "gaps" are missing because there is no kerning being applied to the font. You're likely using Chrome on Windows — Chrome on OSX will show your font properly kerned.
More info in this Typekit article:
Chrome on Windows does not support kerning at all, which is caused by their use of GDI for rendering text. Chrome will soon switch to rendering text using DirectWrite and should then also support kerning and other OpenType features on Windows Vista and above. Kerning is enabled by default in Firefox and Safari 7 (on both OS X and iOS).
Related
since some weeks ago my chrome is rendering bad the google font "open sans", about firefox, it was rendering it bad always,
it is rendering bad in all websites with open sans, and with any weight or size.
I have read something about change chrome://flags/#enable-direct-write but I have not that option
I have cleaned cache,
I have a screnshot showing how it looks in my screen and below how it should look like,
That screenshot was taken from here: http://104.236.102.187/htmls/open/open.html
currently the version of chrome is 52,
windows 8.1 pro
64bits
Thanks
I tested in latest Windows 10 (64-bit) on latest Firefox 48 and Chrome 52, and do not see like the screenshots above. And the Dev Tools shows Open Sans being loaded.
Have you also tried including the various font styles? Since your missing them from your CSS stylesheet href on your <link>.
It should be something like this so Google knows what font styles to deliver
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />
Google Web Font page has like 10 font styles for Open Sans
https://fonts.google.com/specimen/Open+Sans?query=open+sans
Look and see if the various font styles appear, if they do not it could be your graphics card or some kind of Windows 8 bug causing that kind of rendering.
UPDATE
Also check if ClearType is affecting the text in your browser. Try enabling and disabling it and see if you see a difference. In windows search for Adjust ClearType Text.
https://www.microsoft.com/typography/cleartype/tuner/tune.aspx
I have attached the image for what I am facing right now, there is a lot of difference between firefox for windows and firefox for mac, I have checked other browsers so far, Mac Firefox, Mac Chrome, and Windows chrome are showing the same results, but the firefox on windows is having different font.
I also have included the text properties by inspecting element via firebug.
Any idea why firefox for windows is having different font rendering? and How I can improve it. This issue breaks the whole layout for complex forms.
What I have heard, is that Firefox under Mac uses different font algorithms.
Try the following
html, body {
-moz-osx-font-smoothing: grayscale;
}
They are different browsers on different operating systems. Difference in font rendering is inevitable, and there's nothing much you can do about it.
I am unable to fix this, so my safe exit was using Arial Font. Verdana Font size 9 is like 10/20 and Arial is like 18/20 where first number is FF Windows and later number is Chrome Window
in Safari 5.1/Windows XP, the unicode arrow in the button element is not shown. <span> is working fine.
<span>▼</span>
<button>▼</button>
Screenshot:
http://cl.ly/image/1T0J1X10141A
fiddle:
http://jsfiddle.net/christianhaller/nTvjU/1/
Any hints to fix this?
further information: IE8 on the same OS has no problems with the unicode character
This is a font problem. It does not exist in Safari 5.1.7 on Windows 7, but I was able to reproduce it in Safari 5.1.7 in a virtual Windows XP. Instead of the triangle character, a small rectangle appears, a common indicator of a missing glyph.
Apparently, on Windows XP, Safari uses some fixed font (seems to be Microsoft Sans Serif) for button elements and fails to look for other fonts when it encounters a character that is not present in that font. Luckily, this can be fixed by specifying a font that does contain it. If you prefer to have button elements rendered in Microsoft Sans Serif in general, it suffices to specify a fallback font in CSS:
button { font-family: Microsoft Sans Serif, Arial }
Quite a few fonts contain the triangle character, so there are many options. And you might wish to make some of them the primary font for button elements, not just as fallback font.
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
Since FixedSys won't display in Chrome or Safari I make it switch to Lucida Console. It works for Chrome but for Safari I run into an issue. Unless Lucida Console is by itself, it WILL be to the font I said. If not -- then it won't work.
Have a look at this picture:
I don't know what font the first Hello world! is but it's weird. It's weird because the default font on my Safari is Times New Roman. I have checked. Also, it's not in conflict with any other style because I have tried it by itself and the problem persists.
font-family's fallback feature works based on installed fonts: if you have FixedSys installed, Safari will attempt to use it. You mentioned that FixedSys "won't work" in Chrome or Safari: it could be that it's interpreting FixedSys incorrectly or that your FixedSys is corrupt.
As Safari 4.0 final was released in 2009, and the current stable release of Safari is 5, it's very likely that there was a problem in Safari 4 beta's font rendering code.
If you have a font installed, there's no way in browsers that support CSS correctly (Safari, Chrome, Firefox, later versions of IE) to say "fallback to the next font even if you see that I have the first font installed". Instead, you'll either need to resolve your issues with FixedSys (that is, upgrade to a stable version of Safari to see if it fixes it) or remove it from the font-family list.
A few other notes:
Lucida Console is not installed on most Macs, so if you're trying to be cross-platform, you need to provide a fallback (like monospace).
The CSS spec requires multi-word fonts to be enclosed with quotation marks. Your CSS should look like: font-size: FixedSys, "Lucida Console"
Does it work if you include quotes around "Lucida Console"?