Please see the above image. I'm using the icon font 'FontAwesome' on my website. In the website header, I'm using them for navigation icons. Each of these icons are links, that have the 'fa' and 'fa-2x' classes attached.
I'm not overruling any default font sizes or rendering modes for FontAwesome, so this is a clean state. All screenshots are from Windows 8.1, testing several browsers. Here are my findings:
Firefox: perfect rendering, optimal balance between legibility and anti-aliasing
Chrome: font rendering too thick and harsh, hurting legibility
Safari: reasonable legibility, yet a bit too thin and harsh
IE10: Very close to FF, acceptable as-is
Opera: Same as Safari
Mu ultimate goal would be to have ideal rendering across browsers, as per the Firefox example. A perhaps more realistic goal is to beat Chrome into submission, as it presents the biggest issue.
Font-Awesome by default has this applied:
-webkit-font-smoothing: antialiased;
I've tried setting this to the other text rendering modes, yet none seem to make a meaningful difference, the same is true for setting the text-stroke property, even at 0 the 'thickness' problem remains. That problem is best seen from the 'members' icon.
You can see the rendering live at www.jungledragon.com
Any clues/tips on how to improve rendering quality and consistency?
That's old issue I can see, but I had similar problem with FontAwesome and discovered that weight of these icons can be different depending on font-weight attribute (that's a font, after all).
So, my problem was that narrow holes in icons becomeing invisible in my app and the solution was setting the font-weight attribute to normal in CSS.
For my liking, icons in Chrome version of your issue are just "overweighted" that way.
Related
Here is an example:
First - how it looks in Chrome, second -in Firefox (hardly readable).
CSS:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 13px;
Can you please provide an example, how I can make this element's font bold only if browser is Firefox?
When I test 13px Arial, it looks slighty lighter in Chrome than in Firefox, rather than the other way around as in your case. Stay tuned to variation across browser versions, platforms, and settings, as regards to font rendering.
Usual browser detection techniques could be used in JavaScript to check whether the browser claims to be Firefox and modify CSS code accordingly. But this would be a shot in the dark, partly due to the variation mentioned, partly because there is really nothing you can do to fix the assumed problem. Bolding tends to change the overall appearance of text, not just slighly thicken strokes, and bolding often reduces readability.
Ways to avoid creating problems like this: Do not set font size to something as small as 13px. Especially for small font sizes, use black (or something very dark) on white (or other very luminous) background, instead of the opposite, and in particular avoid making the color contrast too small.
it seems firefox can only take 2 background url in css... if it has a 3rd the font makes that blurry/pixelated effect. NEVER THE LESS.... i found that its true on a windows XP. the same firefox on a windows 8 works fine. (I was surprised) i might think it has something to do with the "use hardware if available" option in forefox.
Try removing a background "image" or "color" from one of the table's CSS.... if its solved then... firefox sucks.
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.
I found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.
Photoshop — What I want it to look like:
Yuck — Chrome (and Safari) on Mac using an #font-face kit from fontsquirrel.com:
Chrome (and Safari) on Mac using Google Fonts (basically identical):
GOOD —Chrome on Windows (fontsquirrel):
GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)
Chrome on Mac using fontsquirrel, with opacity:0.999;:
Does anyone have any ideas on what is going on here, or what I might be doing wrong?
I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.
I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).
I hope this helps!
try
html { -webkit-font-smoothing: antialiased; }
I have a page that is multi lingual and I have an issue with the Japanese version only.
For some reason in IE8, when I hover over an element, a sibling's font-size will increase/decrease.
Even stranger, is that this doesn't happen on every hover, sometimes I cannot reproduce straight away, I need to keep hovering over different elements in the same area of the page. Eventually this bug will rear its ugly head.
This bug only occurs on the Japanese page, all other languages seem to be fine.
This could be happening on other versions of Internet explorer, I haven't tested on all.
To clarify, I have not got any font-size changes on any :hover rules.
I work for a Japanese site and recently came across this issue. After spending more time than was reasonable, I found the answer from these detailed write-ups in Japanese:
http://freesoft.tvbok.com/sonota/ie8-fontsize.html
http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/thread/70d700f4-0bda-48b1-9476-d31993b7cbf4/
The top link includes the ways to deal with it. For those who can't read Japanese I will summarize:
The problem only affects IE8 showing pages using the MS P Gothic font (generally the default Japanese font on Windows) at a font-size that is between 9px and 11px. Unlike many IE bugs, it has nothing to do with floats/margins/line-height/etc. As Oldie has pointed out, the bug is not consistent, sometimes it happens right away and sometimes it takes a few hovers, and it seems to enlarge/shrink the text randomly.
The three primary solutions are as follows:
Set the font to MS Gothic or some other Japanese font using font-family style.
Change the font size to be anything outside the 9px ~ 11px range (Under the default IE8 font settings, 1em sized text will not be affected, but slightly smaller text (eg, 0.8em) will be affected).
Force IE8 to display the page as if it was IE7 by adding the following in the header:<meta http-equiv="X-UA-Compatible" content="IE=7" />
I went with #2 because MS Gothic looked jarring next to all the other MS P Gothic text, and felt #3 had clear disadvantages for our site.
It's not an ideal solution, but it works. Best of luck.
I'm stuck with a problem. I'm trying to embed fonts with #font-face but they always looks bolder. I have tried everything: other fonts, change font-weight to "ligher" or "100" etc...
The font looks always as it is bolded. I'm pretty sure it could look good because I've seen it used in many other websites with #font-face and it looks thin and fine.
See the attached image link text (I know it would never look as in PS, but so different?)
thanks
Set the following in your stylesheet on whatever elements you are using font face on and it fixes the issue:
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
You are probably using the wrong weight file. Fonts will often be sold in different weights. You should verify that the file you're embedding with #font-face is the right weight.
The way the font looks on photoshop is obviously a graphical version of the font, specially, when photoshop has 5 types of blurring for fonts: none, sharp, crisp, strong and smooth. Those beside the original fonts, which they commonly are in one TTF and have the versions inside or, varios fonts for the different weights and faces.
Maybe if you enlighten us about the font type, the weight, blurring and whatever is useful for reproducing purposes would be useful to help you...
Fonts vary according to OS (Linux, Mac,PC) and even by browser, never mind the Photoshop blurring variants that Billeeb mentioned. For example Safari on windows applies some heavy anti-aliasing to make text smooth, which makes it look blaringly different on Firefox, even on the same machine.
In my opinion, the best way to have a consistent font experience is to use some sort of font replacement technology like Cufon. But this only works for not standard fonts with simple effects, you wouldn't want to use this if you need crazy amounts of drop shadow or blurring. For that its best to stick with images
This could even happen if you are using <h1> tag. h tags makes the font looks bolder.