So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.
Related
I am having a font issue with Arial Narrow. Because of this project, I must use Arial Narrow.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari.
Could anyone help me fix the problem? Or is it just the way the browser renders the font and there is nothing I can do?
Firefox or Safari
Chrome
.content { font-family: 'Arial Narrow', Arial, sans-serif; font-size:13px; }
jsfiddle to see what I see.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari
That's just how the web is.
Consider yourself as someone who is suggesting the typography--but not dictating it. You're suggesting that a certain font be used at a certain size.
Beyond that, though, other factors come in to play...
how does this particular browser render fonts?
how does this particular OS render fonts?
does it obey the kerning pairs?
does it implement font smoothing?
how does it implement font smoothing?
what is the browser default sizes?
did the user change the default sizes?
did the user zoom in perhaps?
or zoom out?
or resize the browser?
or open on a different device?
etc.
Or is it just the way the browser renders the font and there is nothing I can do?
Well...you probably COULD do something...maybe run javascript to measure the line widths and then re-calculate the font size to adjust the width or letter-spacing but in the end, it's all going to be a lot of extra code that may or may not actually 'fix' anything, may make things worse, and is really fighting the nature of how type works on the web.
Don't drive yourself nuts. Convince yourself right now that it's never, ever going to be perfect. It's not going to be the same between different browsers, nor is it necessarily going to be the same on the same browser on different operating systems (i.e. Firefox on Windows 7 vs Firefox on Windows 8 vs Firefox on Ubuntu vs Firefox on Mac vs Firefox on Android). End-users are very quick to fixate on stuff like this ... they need educating, it's way over most of their heads.
The font selection is always subject to the browser and also the underlying font engine in the operating system. There's really no clean way around it unless you are rendering the font yourself somehow and pushing vector or bitmap graphics into the browser.
For your single-line conundrum, consider using the ellipsis features of CSS.
http://quirksmode.org/css/user-interface/textoverflow.html
OS: Win 7 64bit
Browser: FF 24.0
If I go to http://www.google.com/fonts it looks awful:
And when I load one for my site locally it looks equally as bad but here is my configuration that I generated from fontsquirrel below:
#font-face {
font-family: 'SecretSans';
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot');
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.woff') format('woff'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
Because it looks just as bad on the site above and my own site I presume it's an issue with Firefox and/or Windows.
Is there a fix/configuration that will work for all users hitting my site that doesn't require them changing any settings within Firefox or Windows as that's obviously unrealistic.
EDIT1: I just went to Control Panel > Fonts > Adjust ClearType text and now it renders properly in Firefox... I can't ask users to do this though so I'm hoping there is another way
I know this thread is from the stoneage, but unfortunately the problem is still current. And if you google for the choppy fonts problem, it's in the top 10; so I want to add my 10 Cents of experience with it!
Ok: If you search Google for problem with fonts under Vista/Win 7/Win 8, you find two major groups of problems that are both related to ClearType in many cases. Not all! But many.
Group 1: Blurry Windows fonts
If we talk of "Windows fonts" we are talking of the user interface (menus and such), and the "workspace" of office apps like Word or Excel.
This problem hits almost all people that do not have a 16:9 widescreen monitor that is HD capable, esp. classic office-type monitors of 19" and 1280x1024 resolution. The keyword is "Low-DPI" here.
For those who don't know: ClearType does a HORRIBLE job on these Low-DPI monitors and renders the whole interface in such a blurry way that trying to work with it causes massive eye strain and headache. Really folks, it gives you eye cancer!
(and no, you can not recreate that prob' on a Full-HD monitor!)
The only way out is to disable ClearType. This helped almost everybody of group 1 - including me.
Group 2: Choppy font rendering in Firefox and Chrome (rarely MSIE)
In many, many cases - like in this thread - ClearType was disabled. And when re-enabled, the browsers do render fonts just fine. True for me, too!
Unfortunately... when I re-enable ClearType, I'm back in group 1!!!
So: EITHER I have ClearType disabled and can work with a sharp and clear Windows for hours without fatigue of my eyes - but then I have to live with choppy webfonts in FF and Chrome.
OR I re-enable ClearType to see the nice and nifty fonts the designers have chosen for their oh-so-stylish websites - and live with the headache Windows gives me due to the blurry fonts! :-(
Obviously, I'm going the first way.
And if I stumble about a website where fonts look like broken, I simply toggle the usage of webfonts with just one mouse click - there's a great FF-AddOn for that.
Oh, I forgot: Why seems MSIE to render the fonts nicely?
Well, IE (at least 10 and 11 to my knowledge) always uses ClearType to render a page - no matter if disabled in the system settings or not.
Of course, it then also shows the blurry fonts problem - and makes me remember why I have ClearType disabled. And will let it so!
Final thoughts:
Programmers believe webfonts to be the final solution to all of their design-needs, thinking, they have everything under control by testing their stuff on a couple of default systems. In fact, webfonts just made a well-known problem freak out of any control - because there is no such thing like a default user!
Think about it.
I am pretty sure it is just how the browser renders it. Especially with #font-face stuff (I am assuming you used http://www.fontsquirrel.com/ or a similar site to generate it). You can use a little bit of text shadow to make it a little bit crisper, but from what you have shown, I think you might be better off trying to find another very similar font that will render better.
This was obviously because you had ClearType switched off. It's the method used to smooth the edges of fonts on computer screens (LCD). It has nothing to do with the method used in the webpage to attach them, this is strictly a font rendering issue. Fonts may appear differently depending on the system, as each has a slightly different method of rendering them - they tend to look best on Apple systems, while Windows seems to have a somehow inferior rendering method. This is entirely up to the system that is running, so the fonts will render differently for various users. Also, professional fonts from big foundries generally render much, much better than free, open fonts, because they're specifically corrected to optimize how they're rendered on screen, especially when they're rendered small (below 20px size), so the roughness of fonts from the Google Fonts set might also in part be due to the fact they're not as carefully crafted as those professional, expensive ones. Nevertheless, regardless of the font quality, text will always look uglier and choppy if font smoothing is switched off (or not supported), so there is nothing you can do. Stopping yourself from using custom webfonts because you're worried about the fraction of users who have font smoothing turned off is will stop you from using them at all.
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
i recently extended the lovely jquery "flot" charts plugin a bit...goal is to draw what would usually be in the legend directly on the chart.
it looks only a bit rubbish as IE seems to render the font quite weakly.
see here, left side is IE, right side is Firefox:
issue http://i56.tinypic.com/34oq4ci.png
btw...function to draw the text used is fillText()
how can i whip IE into shape?
thanks!
The sad fact is that, as of now font discrepancies between all the browsers exist in Canvas. What looks one way in Firefox will look another way in IE. What looks one way in Chrome will look another way in Safari (even though they are both webkit based)
Change the font to a "safer" one and see what happens. For instance:
ctx.font = "72pt verdana"
ctx.fillText("lalalala", 0, 72);
Ought to render the same in both IE9 and FF4.
That isn't the last of it of course. If you are doing things like scaling and rotating your fonts you'll encounter even weirder problems. Try this in Opera or the non-dev version of Chrome: http://simonsarris.com/misc/scaleText.html
(screenshot of that problem)
So the solution is to simply find a font that ends up looking the same on the browsers you want to target (by trial and error, start with the web-safe font list), and try to never both scale and rotate the canvas before calling fillText. There may even be other transformations that cause odd effects in different browsers, so you should try your font on a simple case and see if it does truly look different.
I'm working on an HTML page that needs to be more or less pixel-perfect, and I noticed that in Opera 10, fonts are rendering larger than they do in other browsers, even though the font-size is effectively the same.
Please see this example page in Opera 10 and another browser like Firefox 3.6:
http://troy.onespot.com/static/stack_overflow/opera_font_size.html
Alternatively, here's a screenshot that illustrates the issue:
http://skitch.com/troywarr/d47m1/font-size
The red boxes behind the "50px" and "46px" text (both styled to have the corresponding font-size) both have a height of 50px.
In Firefox 3.6, the descender of the "p" in "50px" lines up with the bottom of the red box behind it. In Opera, the descender of the "p" in "50px" hangs below; it's the "46px" that more closely matches the "50px" in Firefox. That suggests to me that Opera is rendering fonts in the ballpark of 10% too large.
This, and the same issue with other body text, is completely throwing off my page layout in Opera 10. Please let me know if you have any ideas about what may be causing this, or at least how to prevent/fix it.
Thanks!
UPDATE:
It appears that I don't have a proper copy of Helvetica installed - I removed it from the font stack and saw no difference in the rendered text on my test pages.
I updated the test pages to only use the generic "sans-serif" font-family, so hopefully we're all seeing the same thing now.
Interestingly, using the generic "serif" font displays exactly the same in Opera and Firefox.
Could this issue just be a quirk around how Opera displays the generic "sans-serif" font?
UPDATE 2:
This may be important: I'm using Mac OS X Snow Leopard. I'm experimenting with other fonts now to see if I can isolate the issue any further.
UPDATE 3:
I created another test page using Arial:
http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html
And now Opera and Firefox match almost exactly!
I can probably get away with using Arial in lieu of Helvetica on this project. As far as I know, I have a completely stock OS X version of Helvetica - so I can't afford any disparity between how different users may be seeing the fonts on my page. I'll stick with the tried & true Arial.
What could this mean, though - does OS X's default sans-serif font just render strangely in Opera or something?
I came across this thread when I was having similar issues with Opera 11.10 on Windows 7 x64.
Opera was defaulting to using 20px as the body font-size (rather than 16px which is what other browsers use). This persisted even after uninstalling, deleting Opera preferences and re-installing. It turns out that Opera will honor your system font-size preferences
(set under 'Control Panel\Appearance and Personalization\Display' on Win7) for rendered website text whereas other browsers (I tested FF4, Chrome 11, Safari 5, IE 9) do not. My system font size was set to 125% which explains the 20px. Once I set my system font zoom to 100%, Opera behaved the same as the others.
I'm not sure which behavior is more correct (In a way, it's nice that Opera honors my font choice) but since since other browsers do not do the same, it is "unexpected". I don't have a Mac to test but perhaps MacOS has a similar system font preference?
I was having a similar issue.
I found that the default computed font size in FF and most other browsers on is 16px, but on opera the default seems to be 20px.
I simply set font-size:16px; for html, and it seemed to take care of it.
My suspicion is that Opera uses a different fallback font for Sans-serif than the other browsers do. That should be possible to confirm or eliminate by using a different font that is definitely installed on the system.
I'm not reproducing your problem. This is what I get in Firefox 3.6.8 (and in Internet Explorer 8):
I think I know your problem. I am getting it exactly the same size in all browsers (at least Firefox, Opera and Chrome). This, I am sure, can be easily overlooked if you dont know you or someone else has done this, but try checking the zoom settings in Opera... let me know if it doesnt help and I will work some more on it.
This is where a css reset stylesheet can really simplify things for you.
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I had similar issue until I used reset CSS of Eric Meyer :)
Came across similar issues, had to change my fallback order
from:
font-family: Helvetica, Verdana, Arial, sans-serif;
to
font-family: Helvetica, Arial, sans-serif;
Since Arial and Helvetica are almost exactly the same size, when opera falls back it still looks good.