Flawed rendering of web fonts on Chrome under Windows 7 - google-chrome

When using Google Web Fonts on Chrome under windows 7, the fonts seem to render incorrectly, while on a Mac OSX (on Chrome, Safari and Firefox) it looks fine. Is there a way to prevent this via CSS or HTML?
The site introducing this behavior can be found here (it might take a while until it loads).
Here's a snapshot showing this:

Alright so this has to do with the way Chrome renders fonts in windows. There is a tool you can use called MacType which changes the rendering engine that windows uses to render fonts.
You can download it here: https://code.google.com/p/mactype/
From everything that i have researched, with google web fonts on windows there currently does not exist a way to fix this issue.
Its simply by design how it works.
You can follow the issue on Chromiums Google Code site..
https://code.google.com/p/chromium/issues/detail?id=137692
heres a snip from the above link that goes in to more detail
As I understand it: the main problem is the fact that Chrome continues
to use the old Windows GDI for rendering fonts, and it looks poor. All
other modern browsers (except Opera) have switched to using
DirectWrite on Windows, resulting in much better font rendering,
leaving Chrome lagging.
If you look back at older versions of IE and Firefox you'll see their
font rendering a few years ago looked exactly the same as Chrome's
does today on Windows. People just didn't notice as much back then as
nobody was using web fonts; when you're using Arial, Verdana etc they
look OK because those fonts have been carefully designed and hinted to
work well with the GDI engine. Most web fonts have not.
for developers, one work around is to put SVG first, doubt this is proper though
-before--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

I found some solution here and it works for me
Have added a temporary fix with the following code...
$('body')
.delay(500)
.queue(
function(next){
$(this).css('padding-right', '1px');
}
);

Related

Roboto font in Chrome is not shown properly

I've been working for a client site and I have problem with rendering of Roboto font.
In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same.
Here is the example:
Left is Mozilla Firefox, right is Chrome
http://i.stack.imgur.com/dX4Lx.jpg
Do you have any idea what's wrong with it?
thank you
Well, it's such a shame, but I have had old version of Roboto installed on my PC.
Since I deleted, everything works fine again.
I should facepalm myself hard..
I have the same version and it's work.
Try to include font in CSS with this code
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
And set the font-weight: 300; for exemple and see if that works.
If you are using Adobe's Creative Cloud and you have Roboto set as a font, you may run into issues where all things in Chrome then get Roboto Bold. I disabled the font from Adobe Fonts and it fixed my issue, but in some Google products like GMAIL, Sans Serif is bolded and you can't turn off the bold. I don't know why and I can't find any good information on how to resolve that.
If you use #fontface evert browser use different font format so the complete css is like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
But as suggested using google fonts you should have no problems.
I had a similar issue. I noticed that all periods are square, not circle. Download a fresh copy of Roboto font here and reinstall it on your machine.
I had the same issue, for me what worked was calibrating my monitors and:
Go to chrome://flags/
Accelerated 2D canvas -> Enable
2D canvas -> Enable Reboot Chrome.
In my case, for a Hebrew site, the font-weight was set to 900 and the output was showing differently in Firefox and Chrome browsers even though I followed Google-Font's embedding rules properly:
//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
Solution:
I have just updated the font-weight to 700 instead of 900 and this fixed the issue.
https://stackoverflow.com/a/27383566/11417534 fixed this problem for me.
Just delete the protocol declaration (http:// or https://) from the font request.

Font looks screwy in Chrome

I found this answer here regarding graphic design:
https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This is exactly what my fonts are doing, but I'm trying to find out if there's a way to prevent this using html or css or anything web-based.
I'm using "platin" as my font. Do I just need to find a different font?
Any other thoughts on the topic?
If this is caused by using web fonts, I found this SO post (and the accepted answer) helpful: Google webfonts render choppy in Chrome on Windows
My solution was to use the Webfont Generator tool (http://www.fontsquirrel.com/tools/webfont-generator) to convert my font into the variety of web formats and copy their provided CSS into my stylesheet. I was using the Fauna One font from Google, so I had to download it from Google and then upload it into FontSquirrel.
The key is to put the SVG line above TTF, so that Chrome uses it first. Here's what worked for me:
#font-face {
font-family: 'Fauna One';
src: url('fonts/faunaone-regular-webfont.eot');
src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
url('fonts/faunaone-regular-webfont.woff') format('woff'),
url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}
(This is 99% the same as the CSS file generated by the Webfont Generator, just rearranged a bit).
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
#font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Another thing: This trick will cause the browser to download two versions of the font but that's a small price to pay for good looking text!
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.

Thin font not showing correctly on windows

I am trying to use "HelveticaNeueLTStd25UltraLight" on my website. On OSX, it looks perfect in every browser. On Windows, it's horrible:
Chrome:
IE:
I am using the following CSS (if it matters):
#font-face {
font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.ttf');
}
body{font-family:'HelveticaNeueLTStd25UltraLight'; font-weight:normal;}
/*** IE FONT ***/
#font-face {font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot');
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot') format('embedded-opentype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.woff') format('woff'),
url('../fonts/HelveticaNeueLTStd25UltraLight.ttf') format('truetype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.svg#HelveticaNeueLTStd25UltraLight') format('svg');
font-weight: normal;
font-style: normal;}
Can someone explain why this is? What can I do about it? If I must use another font, which fonts are safe to use?
Windows just has crappier font rendering in browsers than OSX or iOS does. Sometimes you can fix it by picking specific font sizes at which the browser antialiasing doesn't look too awful. There is also the text-rendering: optimizeLegibility CSS property but in my experience it often does more harm than good.
Pick a different font that is more optimized for web display. Google Web Fonts is a good place to start. They have lots of great modern fonts that are all optimized to be used as webfonts, and on top of that they provide the CSS etc - you just need to <link> to their external CDN CSS file in your <head> and bam you're good to go. "Lato" and "Raleway" are fonts I use in place of Helvetica Neue sometimes.
Also, it's almost certainly illegal to embed that font anyway since Helvetica Neue LT Std is a commercial font, so...
Every browser renders fonts differently using different methods that is why you are including so many different versions of the font, as each is used by a different browsers. OSX has one of the best font rendering engines, things look great, but look at in IE or FF or Chrome and things tend to be different. There isn't much you can do apart from trying a font that is a bit thicker.
You can see maybe if maybe font-weight: 500 helps.

#font-face url pointing to local file

I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use #font-face like this:
#font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other #font-face usage works perfectly fine in all browsers.
Btw, in Chrome, I get a warning:
Resource interpreted as Font but transferred with MIME type application/octet-stream
What can I do to cleanly include a locally stored font which is not installed on the OS?
Edit:
I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!
2nd Edit:
I got it to work in all browsers except firefox:
#font-face {
font-family: 'OpenSymbol';
src: url('file:<path>/openSymbol.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSymbolEOT';
src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
...
and then
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O
Btw, firefox has problems because of security issues: See here
You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:
Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
Safari on iOS 10.3.1 (iPhone)
Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)
This goes in the css:
/* Add the decaration on top */
#font-face {
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..
No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012).
No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0
Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.
It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...
According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with #font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.

FixedSys & Terminal Fonts

How come the font FixedSys and Terminal ONLY work on FireFox and not on any other major browser?
What's the deal? Is it because they are system fonts or am I missing something?
Thanks
I know this is old, but I converted http://www.fixedsysexcelsior.com/ to a Webfont a while back.. the files are here:
http://jollo.org/archive/doir/fixedsys
css usage is:
#font-face {
font-family: 'FixedsysExcelsior301Regular';
src: url('fsex300-webfont.eot');
src: url('fsex300-webfont.eot?#iefix') format('embedded-opentype'),
url('fsex300-webfont.woff') format('woff'),
url('fsex300-webfont.ttf') format('truetype'),
url('fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing:aliased;
font-smooth:never;
}
Firefox does have a little bit of trouble rendering it in some instances.. but this appears to be a bug with many webfonts (fonts appear blurry when the browser is a certain size, normal when another size.
How come the font FixedSys and
Terminal ONLY work on FireFox and not
on any other major browser?
What's the deal? Is it because they
are system fonts or am I missing
something?
The fonts do not depend on browser, they should be applied if they are present on the client machine. If you can view it in FF, they should be viewable in other browsers as well. The FixedSys font is shipped with Windows and is available (Not sure about other OS). Make sure that you can differentiate it or there could be some other problem. Using reset CSS may also help.
Those fonts aren't available everywhere (for example Linux). If you want to display monospaced text, use monospace as fallback. It defaults to the standard monospace font of the system.