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.
Related
I am using a custom font that I implemented into my website using the #font-face css selector and provided the different formats of the fonts for the different browsers, up to this point firefox, chrome IE11 and opera render the font approximatly the same.
but when it comes to giving a font-weight: 900; Only Chrome succedes in rendering a bold enough font,
firefox and IE rendering is close to what chrome renders at 500 or 600
is there a work around to acheive the same result in the other browsers without having to implement a bolded version of the font in all different formats ???
firefox rendering
chrome rendering
The best way to keep font weights consistent is making sure that font comes with a bold weight font file. If your font files don't come with your desired weight then the Browser & OS will try to manually style the font which results in, as you've seen, different rendering.
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
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.
Hi,
I am wondering if there's a way to somehow force Chrome (Safari and Opera included) to render the fonts that are loaded by #font-face better? I'm not sure if it's only these two fonts, but I sincerely doubt it.
The top snapshot is the rendering of the text in Firefox 8. The one below is from Chrome(16). Now, this wouldn't bother me as much if it was rendering awfully in IE, too--but in IE it renders quite wonderfully (similary to FF).
So, I did try a few things:
Tried applying text-shadow. It made it seem a little better, but still pretty awful.
I tried using -webkit-font-smoothing: antialiased, but that didn't seem to have any effect at all.
Now, I could stop being an annoying perfectionist and simply use an image for the logo (since the smaller text doesn't render that badly, but still bad, mind you) and be done with it.
I don't really like that solution, but I will accept it if there is no other.
Thanks!
https://stackoverflow.com/a/9041280/1112665
If your code is from font squirrel it may be as simple as just rearranging the order of some of your css.
I'm seeing almost the exact opposite on OS X. Chrome, Safari are fine and Firefox isn't displaying right.
Chrome 18.0.1003.1 dev:
Safari 5.1.2 (7534.52.7):
Firefox 9.0.1:
Opera 11.60 Build 1185:
Internet Explorer 9.0.8112 (under Parallels VM):
It looks like Windows 7 #font-face problems are quite common, and there are a lot of inconsistencies in general:
#Font-Face Windows Woes (flynsarmy.com - 2010/05/29)
#font-face gotchas (http://paulirish.com/ - 2010/05/05 )
Font-face embedded fonts look fuzzy in Windows 7 browsers
#font-face rendering in Windows 7
You can also ensure the SVG format is being used primarily. The upshot to this is the font will render perfectly in Opera/Chrome, the down side is that I have found line-height issues arise.
Use a chrome specific media query and replace the font with the SVG version exclusively.
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.