I'm using the latest chrome (47 I think) and I know there is some kind of font smoothing / anti aliasing in chrome for a couple of chrome versions now.
But my webfont looks pretty humble compared with other browsers.
Images are better than words sometimes, so look yourself
So my question is: Is there any way to fix this issue? I'm looking for a solution I can include per css/js - I don't want to tweak my browser or similar.
I use Lato as font and include it per CSS with a font size of 16px (actually 1.6rem) and a weight of 300
#import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
Here a short pen
Related
I have a website, in which the fonts are appearing good in safari, but broken in Chrome and Firefox. I couldn't find which rule is overriding my font settings. Please help.
This page is live at http://alterknitnewyork.com/drop-off/
In safari, it is taking the settings from uaf.css but in chrome and firefox they are scored-out. I have no idea why it is broken. Even I tried to apply the font inline with !important tag, but no success.
It looks like you have two #font-face declarations for the "same" font. One is in MyFontsWebfontsKit.css which references a font as "Elizabeth-Italic". The other declaration, in uaf.css is referencing a font as "Elizabeth Italic". These are two distinctly different fonts.
Assuming you want the italicized font, just set the font-family to "Elizabeth-Italic" and you should be good to go.
I'd recommend removing any of the CSS files you don't need (particularly #font-face declarations), it will lessen the number of HTTP requests and make the site a bit snappier overall.
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
I'm using an #font-face CSS rule to use a custom font (Old Sans Black) on my page. However, the font comes out completely out of alignment vertically. It looks fine when I install the font locally instead of using #font-face.
The issue occurs in Firefox, Chrome, and IE (although it looks better in IE :| ). Here's a screenshot of what it looks like:
http://i.imgur.com/mcCzj.png
Any help is very much appreciated!
Yeah. I've seen a question recently that was basically the same. I used to use Font-Face and after having things like that happening I started using Cufon. I can't believe I used to think it was hard to use. Compared to font-face, the quality is so much better. You should check it out.
Look at the difference:
http://mesonprojekt.com/blog/cufon-vs-font-face-a-visual-comparision
For a site we're developing we've been using Lato from Google's WebFonts API. It works perfectly in every browser (even IE), except for one very important case: Firefox 3.6 on Windows XP (haven't tested in Win 7 yet). The font loads and is displayed, but the characters look awful, like antialiasing completely malfunctioned.
My googling has found hits about problems with webfonts in FF4 due to a bug in the browser, but I can't find anything about 3.6. Is there something we can do to fix this?
The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.
As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.
There seems to be a difference between Google webfonts and the same font downloaded from Font Squirrel, see this (unrelated...) question.
So I would try and use the version they have at Font Squirrel to see if that solves the problem.
Mac Firefox (3.6.3). Font looks sharp in Chrome, Safari, IE8 (not as good as other 2, but less fuzzy than Firefox). Any work arounds? How can I determine which of the source files Firefox is using? Can I force it in the CSS to choose something else?
Some fonts (especially free ones) are only designed to render in certain base sizes and can render oddly otherwise. What looks pixelated at 16px might anti-alias cleanly at 17px. Experiment by raising or lowering the font-size by a few pixels and see if you get better results.