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.
Related
Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.
Im using it in font-weight:100;
here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?
Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/
FIREFOX
CHROME
SAFARI
I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/
However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.
I also faced similar issue, when I tried to use google fonts with font-weight:300 - its working fine in all browsers except safari.
I resolved this by adding below css property.
-webkit-font-smoothing: antialiased;
I was running into a similar issue that appeared exactly the same. I was using the CSS font-weight: lighter; while using this google font link:
http://fonts.googleapis.com/css?family=Lato:300,400
Somehow it was displaying as 100 weight! So, I now explicitly use the font-weight:300; to get what I want. I'm not sure, but I believe this likely has something to do with me having the font on my system, and google suggesting my computer uses the system font before downloading it again... Wouldn't have figured it out without this Q and A, thanks!
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 working on a tag-could style menu on a website: http://web12.leankursus.dk/
It works in chrome, (currently) has some minor problems in firefox and some larger problems in IE (9). The main problems seems to be that IE doesn't make the font as bold as Firefox and Chrome. The font need to look like it does in FF or Chrome, but I am unsure what you do when the browser just displays it diffrently
Hope you can help me.
EDIT: Screenshot of the page in IE9 and Chrome: http://i.imgur.com/1fgwX.jpg
EDIT2: Ah! I've realized I was running IE9 in compatibility mode. Turning that off fixes it in IE9. However - is there any way to make the font work in at least IE8 ?
IE8 and lower don't support .ttf files for the #font-face clause. Use .eot files for IE.
There are some problems with getting it to work in different browsers simultaneously though. Read, for instance, this.
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
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
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.