I got this weird result when using Lato font in Internet Explorer 8 (it looks fine in current Chrome and Firefox). The problem is missing horizontal strokes on letters. Screen below:
The problem is visible only when using font-size 13px and few other smaller ones (e.g. 11px).
I use official webfonts files from Lato's site (http://www.latofonts.com/) and CSS #font-face syntax (below I include only one declaration for regular font):
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: normal;
src: url("lato/LatoLatin-Regular.eot"); /* IE9 Compat Modes */
src: url('lato/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("lato/LatoLatin-Regular.woff") format("woff"), /* Modern Browsers */
url("lato/LatoLatin-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
}
Suprisingly it works alright in IE8 when linking to Google Fonts version instead by including:
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
The result becomes:
What's the reason of this problem? Is there a way to fix it? Why does Google Fonts render differently than official webfont files? In what ways does Google process the original fonts?
I have the same problem, but due to my webpage viewers I found out, that different browsers (like FF) on different computers are showing missing horizontal strokes. The error might be connected with the fact, that the creator of the font just published 2.0 version. Google still has previous one. They are changing it, although latin characters aren't available by another error (see the discussion bellow on http://www.latofonts.com/lato-free-fonts/ ).
Related
I'm using Materialize CSS coming with the Roboto 2.0 font. Font looks horrible in Chrome 43 and Firefox 37. Surprisingly with IE it looks very good (full resulution):
Same happens with other fonts like Lato and Open Sans and also on my work computer (same videocard and OS, if matters). Is there something wrong in my setup (Windows 7 x64 + NVIDIA GTX 780 1920x1080 display)?
Nope, nothing wrong. There are a few things at play here that could impact how things are rendered.
The state of Web Fonts and #font-face is that browsers have varying support of various file types and those file types may render differently inside of the browser.
Commonly, you'll see these types:
.eot
.woff
.woff2
.svg
.ttf
Browsers don't typically just support one of these types, they'll support a few and so the order in which they're listed in the #font-face rule determines which file type is used. To add to that, these files have varying sizes for the same fonts so that has to be considered.
Chrome in particular renders .woff poorly it seems and if you're linking directly to fonts.googleapis.com css to use web fonts you're at Google's discretion as far as which font is used/loaded and the service seems to prefer .woff/.woff2 for file size reasons.
You can read a lot more about this in detail at places like CSS Tricks, MDN, and other Blogs. Using custom web fonts still isn't as easy as it should be but services like TypeKit help with some of the heavy lifting.
Now all that is just dealing with varying file types for fonts. There are still plenty of CSS properties that can impact how a particular font displays in a browser, both vendor specific and general use.
Finally, we can't take the Operating System out of the equation, as operating systems have their own Font rendering engines. Here's a good article from TypeKit about some of those differences.
TL;DR - No, it's not likely your Graphics Card (although that can obviously play a part in it). It's most likely the font file type being used in the browser. Seems that opting for .woff2 then falling back to .eot (IE) and .ttf will produce better quality than .woff or .svg.
Hope that helps!
Have you tried specifying font smoothing/rendering?
It generally makes a big difference in my experience.
body {
/* Better Font Rendering */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
It's font OS rendering issue. The simple solution is to use google font like:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Or the complex solution, but often the best, is to use #font-face with every type of file format for every browser.
#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 */
}
In case anyone stumbles across this, it's a problem with the version of Roboto bundled with Materialize. A solution has been posted here https://stackoverflow.com/a/36803177/906360
I created a couple icon fonts with IcoMoon.
They work fine in all other browsers but some reason they are completely opaque in all versions of IE tested (8-11). Bootstrap's icon fonts look fine so it's something I must be doing or not doing.
You can see it in the upper left corner here: http://voicethread.com/new/myvoice/#browse
How it looks in different browsers:
My guess is there is an issue with the way that IcoMoon created the font files.
I'm having trouble rendering in Chrome, IE, and FF (respectively):
It appears the font is being delivered to the site okay:
Here are the relevant portions of your CSS file, which wouldn't hurt to include in the question:
#font-face {
font-family: 'vt-icons';
src: url('fonts/vt-icons/fonts/vt-icons.eot?ovc75f'); /* IE9 Compat Modes */
src: url('fonts/vt-icons/fonts/vt-icons.eot?#iefixovc75f') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/vt-icons/fonts/vt-icons.woff?ovc75f') format('woff'), /* Modern Browsers */
url('fonts/vt-icons/fonts/vt-icons.ttf?ovc75f') format('truetype'), /* Safari, Android, iOS */
url('fonts/vt-icons/fonts/vt-icons.svg?ovc75f#vt-icons') format('svg'); /* Legacy iOS */
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'vt-icons';
}
.icon-vt-logo-solid:before {
content: "\e600";
}
.icon-study: before {
content: "\e601";
}
If you try another content type like "\e601", it works fine. So I'm guessing it's the build for that specific item.
You can confirm this by downloading a font-viewer like FontForge and opening the .woff file:
It shows the same problem, so it's unlikely to be the browser.
If you double click on the icon, you'll see the exact vectors used to create it:
What's happening is that the circle and the VT logo are both rendered on the "fore" layer. Everything inside the circle is filled in, rendering the "VT" fill invisible. You easily see this by changing the shape of the circle and seeing the VT come out from "behind" it.
I'm not sure what the difference in circles was, but the twitter circle seems to be properly cancelling out the inner shapes. So you can copy and paste that circle into your other icon to get this:
Then just export and upload to your host
Just for good measure, I saved the changes, exported some of the relevant font files, and added them to GitHub so you can download them.
Until you add to your own host, this'll work:
#font-face {
font-family: 'vt-icons';
src: url('http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f') format('woff');
unicode-range: U+E600-E626;
}
Working Version! Yay!
By the way, You can also try adding a unicode-range for #font-family declarations so the browser only needs to download the characters it absolutely needs, like this: unicode-range: U+E600-E626;
Further Reading
http://css-tricks.com/snippets/css/using-font-face/
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
http://fontforge.github.io/en-US/
I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated.
What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn't change anything.
I've also tried:
-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;
Hoping that either would help the text render more smoothly.
Right now i've run out of ideas and i would hate to change fonts. Does anyone have an idea how i can solve this problem? I've been using the Adobe Browserlab to test the rendering, seeing as how i only own a mac. The link to the site is: www.symvoli.nl/about
Thanks in advance!
Edit April 11th, 2013:
Chrome 35 Beta seems to have finally solved this issue:
Update August 2014
Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.
Problem
The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.
But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692
Update Oct 2013 (Thanks to #Catch22)
Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'MyWebFont';
src: url('webfont.svg#svgFontName') format('svg');
}
}
First approach solution:
The Fontspring bulletproof syntax modified to serve the svg first:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
}
Further reading:
CSS properties that affect type rendering
Smoother Web Font Rendering in Chrome for Windows
How to Bulletproof #font-face Web Fonts
-webkit-text-stroke: 0.5px;
use it only on large text, since it will affect your page performance.
A fix has been suggested here by calling the .svg file first, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
I've tried a number of solutions and finally came up with one that works with newer versions of Chrome which don't fall for changing the order of the files:
Essentially, I moved the TTF file into a Mozilla specific section.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff');
}
#-moz-font-face {
font-family: 'MyWebFont';
src: url('webfont.ttf') format('truetype');
}
Answer by Tom & font-spring didn't do it for me for some reason. This fix by Sam Goddard did though :
After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the #font-face kit, and doesn’t like being called last. Below is the standard call for #font-face using CSS:
// font-face inclusion
#font-face {
font-family: 'font-name';
src: url('path-to-font/font-name.eot');
src: url('path-to-font/font-name.eot?#iefix') format('eot'),
url('path-to-font/font-name.woff') format('woff'),
url('path-to-font/font-name.ttf') format('truetype'),
url('path-to-font/font-name.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.
// Usage
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: ‘font-name';
src: url(‘path-to-font/font-name.svg’) format(‘svg’);
}
}
It could just be the font your using "asap" doesn't render all that well at certain sizes. I changed the size of your h1 from 3.5em to 50px and it looks a little better. May not be the perfect solution but I have noticed that a lot of google webfonts can be unpredictable
I develop in Firefox. My experience is that FF displays ttf fonts very well without any extra rules (beyond the #font-face calling the url for the font file). Chrome, however, is a different story. Even with with the -webkit-font-smoothing: antialiased; rule it still displays any font quite raggedly. Safari doesn't seem to have that problem, so it's not inherently Webkit that can't render a font cleanly, it's a Chrome problem.
I haven't tried adding the -webkit-text-stroke: 0.5px; rule, but will.
Of the answers above I really like Tom Sarduy's answer best. Aside from a good description of the problem, he gives a great #font-face stack to use to cover all the major browsers.
Another link reference for web font rendering in chrome -
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
Had the same thing guys. Good in all browsers except chrome - even IE10 and 9 were fine. Dreamwaeevr CS6 also uses a similar version of fontsprings code, but has the svg at the end. Change it round for SVG before woff and ttf and all in the world is good. Tom is bang on with hos example there, in fact past that into your code and map paths to the fonts you need, and you're in business!
It seems that Google might serve different woff files depending on the browser and OS.
I found that if I download the font from IE, it's about 10k bigger than if done on Safari from the Mac for a particular font. 43k vs 33k. Also, the IE version seems to look fine on the Mac, but the Mac version doesn't seem to work fine on the PC. The Mac version looks the worst in Mozilla Firefox on the PC.
Try this:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic
SourceSansPro-Regular.woff PC version 27k
SourceSansPro-Regular.woff Apple version 24k
i have tried many ways:
-loading the svg with font-face
-webkit-font-smoothening
...
after
-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);
the rotating was smoother but the main problem hasnt gone.
For me the solution was adding:
-webkit-text-stroke: 0.5px;
https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/
This post explains a little about google chromes experimental functions. Apparently enabling the "DisableWrite" option fixes the jagged fonts. This is obviously a fix PER machine and not on a full scale.
I'm sure I'm not the only one that this has plagued, but I can't seem to find a solution.
#font-face works wonderfully in Firefox, Chrome, Safari with TTF fonts.
as so:
#font-face{
font-family: "Apple-Chancery" ;
src: url(images/Apple-Chancery.ttf ) format("truetype");
}
However, I understand that to be used in Microsoft, the font has to be in EOT format, so I converted it using http://ttf2eot.sebastiankippe.com/
And my code looks like this:
#font-face{
font-family: "Apple-Chancery" ;
src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */
}
but it's not working in Internet Explorer. I've tried putting two difference lines for src: I've tried using a different converter, different font, and all no go. I'm using IE8.
Also, to use multiple custom fonts, do I need multiple #font-face blocks or I use line them up font-family, src, font-family, src, etc.?
How about using font squirrel to generate all your files and your code?
This may help you,
#font-face {
font-family:"Apple-Chancery";
src: url('../font/Apple-Chancery.eot'); /* IE9 Compat Modes */
src: url('../font/Apple-Chancery.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Apple-Chancery.woff') format('woff'), /* Modern Browsers */
url('../font/Apple-Chancery.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/Apple-Chancery.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight:bold;
font-style:normal;
}
This page may be useful to you: http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx
In particular, this line:
In Internet Explorer 8 and earlier versions, only one URL value is supported.
I think what you're trying to do may not work right until IE9 is available. It'd be worth getting a copy of the beta (assuming you're running something newer than Windows XP) to test and confirm this.
You need to put the IE (eot) one on a separate line, before the other ones.
The correct declaration is:
#font-face{
font-family: "Apple-Chancery" ;
src: url(images/Apple-Chancery.eot); /* IE */
src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */
}
But that's probably not enough to cover all the cases, you're missing svg font type for older chromes, etc.. I'd recommend using the font-face generator from fontsquirel.com, choose the Easy option then check out the generate css file and copy/paste the code and converted font files
I second the use of Font Squirrel.
You could also take a look at my post Adventures with #font-face which might help you.
Simpy upload your font on font2web it creates a css file and a demo HTML file.
Hope this help you
I've used http://www.fontsquirrel.com/ to create a #font-face kit.
It works fine, but the result on windows is different from the result on mac.
On windows the font seems to have a wrong anti-aliasing:
this is the result on Mac with FF, Chrome or Safari (all updated to last version).
this is the result on Windows with FF or Chrome.
As you can see, the result is not the same. On Windows the font is thicker and rougher.
How can I solve this?
I too have been plagued with this on Chrome and I think I've just found the answer!
Chrome didn't like the default fontsquirrel.com generated CSS.
#font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
font-weight: normal;
font-style: normal;
}
To fix, i moved the SVG line:
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')
to the top of the list. Now I see anti-alias fonts! I guess Chrome wants to be first...
/* THIS WORKS FOR ME */
#font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope it works for you too. Enjoy!
I'm surprised no one mentioned this. Applying a slight -webkit-text-stroke does the trick for me whatever the format (extension) of the font you are using. Some recommend a -webkit-text-stroke: 1px but to me it alters the font look too much (make it too strong). But a 0.5px one makes the stroke almost unnoticeable and it turns on the antialiasing:
-webkit-text-stroke: 0.5px;
Put it in your css definition for html tag and you're done!
This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.
To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.
IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.
(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:
text-shadow: 0px 0px 1px rgba(0,0,0,0);
but I seriously wouldn't recommend it.)
One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe command-line tool.
There is also a font called Vegur that looks like Myriad Pro but is legal to embed in a website.
Hope that helps!
I've done a little research, and I've found a hack that I think makes a difference. Put this in your CSS with your font variables:
-webkit-transform: rotate(-0.0000000001deg);
As well, I find that a full-on black (#000000) doesn't help matters either. Using a very dark seemed to help me.
Changing setting in Windows or a browser itself is not a solution. When you use #font-face, you want the font to look nice on every screen in every browser, not just in yours.
The trick with
text-shadow: 0 0 1px rgba(255,255,255,0.1);
or
-webkit-transform: rotate(-0.0000000001deg);
doesn't work anymore in Chrome 16.0.912.63 m, Windows Vista.
I couldn't find a way to overcome this issue though.
This is code im using to fix "Chrome rendering problem":
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.eot');
src: url('fonts/fontname.eot') format('embedded-opentype'),
url('fonts/fontname.svg') format('svg');
}
/*if mozilla*/
#-moz-document url-prefix() {
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.ttf') format('truetype');
}
}
:) it works for me...FINALLY!
-webkit-transform: rotate(-0.0000000001deg);
Update: No longer working in Chrome 15.0.874.106 m. Though it does work in IE9 and Firefox – >Zequez Nov 4 at 15:28
UPDATE: This is working (at least for me) in Chrome 15.0.874.121 m.
IE9 and Firefox shouldn't need it, or be targeted by it since the selector specifies -webkit-.