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
Related
I have problems with the fonts on my website to have skarp fonts on both mac and pc. The fonts look sharp on Mac, but on PC the fonts are very dull and thin.
Is there something specific in CSS I can do to avoid the problem with PC?
Screenhshot from mac
Screenshot from PC
It is difficult to answer this question, because there are a lot of different factors which influence font rendering.
The font itself. Is it a screen font, by means of hinting and other special optimisation for pixel based display. The font you have showed in the image looks very thin, what is always problematic in small sizes.
Font rendering is done by the OS, not by the browser, so there are always differences in the final displayed rendering.
In my experience, 98% of such cases appear if one tries to use a print font in relatively small sizes. If the font is thin in cut, problems grow.
To overcome those issues, I recommend to use screen optimized fonts (aka webfonts), those can be provided for free from google fonts etc. or bought. If it still does not look good, try bigger sizes and if that is not option, it might be the wrong font of choice.
Use Font rendering (https://davidwalsh.name/font-smoothing):
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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/
In chrome the font appears to be 1px smaller than FF and IE and I cannot see why. The font used is "Georgia" and there are no specific browser commands in the CSS or HTML so I cannot figure out why chrome is displaying it different.
Has anyone come across this before?
Thanks.
This could be based on various factors. Chrome and Firefox use different font rendering engines, and they also differ in how they interpret ClearType font settings within Windows. As well, different browsers apply different default CSS styles to unmarked documents which can cause discrepancies in font-size, among other things. You could try using something like a CSS Reset stylesheet to possibly quell some of the problems, http://www.cssreset.com/ but there's no guarantee that will fix it.
if you want to achieve the same style for every browser, you should try this:
sitewizard
it helped me a lot when i came across the issue. Maybe there is a more elegant solution for the problem but this works definetly.
Text will always differ somewhat between different browsers, and between different systems. Even the same browser on the same operating system may give different results, as there are text rendering settings in the system that may affect the apperance
Also, font sizes aren't really measured in pixels, but in points, so there might be a difference in how browsers translate pixel sizes to points.
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.