I know there is a total flood of font rendering related questions on all sorts of sites these days. One of them should provide me with an answer, so you would think. However much I search I cannot seem to find a solution for my problem though.
In google chrome almost all fonts are displayed bold. Well that wouldn't really be the end of the world. What bugs me even more is, that they are rendered very jittery. As in they look sort of distorted.
I have made a picture to show the difference between my firefox and chrome font rendering:
http://i.stack.imgur.com/hYRh4.png
I simply want to get rid of this. It has been bothering me for a while and no solution I can find on the web helps.
For the record I have uninstalled and reinstalled chrome. Also I have disabled Direct Write in the chrome://flags.
Any help?
This is actually not a rendering problem, but a font loading problem. Firefox shows Arial (a font optimized for rendering at small sizes), while Chrome shows Helvetica (which is not, at least your installed version).
The editor from your screenshot probably asks for the font Helvetica and, if Helvetica is not available, Arial and other sans-serif fonts. I assume you only have the Bold version of Helvetica installed on your computer. It actually should display the Regular version, but it isn't available.
Firefox therefore falls back on Arial, while Chrome shows the closest weight you do have: the Bold version.
To fix your problem, you should try uninstalling Helvetica Bold (through Control Panel > Fonts). Note it can also go by other names such as Helvetica Neue, Helvetica LT Std, Neue Helvetica, etc. Don't forget to restart just to be sure. Then Chrome should also show the optimized Arial.
Eventhough the question is kind of old, the "problem" may still occur and I found another scenario which causes this text-appearance to happen (which, honestly, brought me here).
In my case, I did not note that my jQuery callback loops and renders the text multiple times to a fix position, about 20 times. I checked the entire css. font-family, text-rendering (geometricPrecision in this scenario), font-weight and what not.
It took me quite a while to figure out that I had 20 divs over each other with the same text, because I've got a very complex and deeply encapsulated DOM there.
So if you ever get here with similar problems, you may also want to check for this one.
The easiest way to check is, to delete the element holding the text using the browser integrated inspector / developer tools (Windows: F12, Mac: ALT+CMD+I) - navigate to "Elements", toggle the left icon (that one with the cursor symbol in it) to blue (active), click the element in your browser. It should be highlighted under "Elements" now, easiest way to find it in the DOM. Right-Click and delete it. If you still see the text, you've most likely got multiple overlays while you only wanted one.
I just want to say that I resolved this issue by deleting a whole Roboto Font Family from the system. (MacOS Big Sur 11.2 (20D64).
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
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
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 a little difficulty getting Chrome to recognise my font-choice. I've not got a lot of code as I've only just started this website.
Basically I have a reset.css on the website and then my main.css is called afterwards. In the reset.css it declares the below statement under pretty much every html tag under the sun:
font-family:Arial, Helvetica, sans-serif;
In the main.css the same statement is declared under html, body and p, and even some specific p tags such as p.headerText and p.newsDate
This is a pretty standard setup. On Safari, IE and Firefox, the font renders as Arial / Helvetica, on Chrome it renders as Times New Roman.
It's really frustrating. Can anybody help?
UPDATE
The Computed Style on Chrome is showing the correct rule, and I even tested this on a friend of mines machine and it was the same. Both running Chrome 8.0.552.237 on OSX 10.6.6
Cheers
I've figured out the problem. I'd used the font-weight: lighter; command - I removed this and the problem disappeared. This would suggest that it's a clash of fonts on my machine. Still don't understand why it appeared fine on everyone else's machine but the problem is now fixed - doesn't look right because I have to use a heavier font but it's still works.
UPDATE
We're a graphic design agency so there are thousands of font-variations on my machine. It seems the clash was there. I swapped Helvetica and Arial in the font-stack and it seems to be fine all round now.
Also, it seems to do with Chrome and Font Books that aren't the standard ones on a Mac. I did some hunting and I found a script that'll work, albeit temporarily. http://www.danielhanly.com/blog/tutorial/google-chrome-for-mac-broken-fonts/
This will clear your internal font cache and will fix the problem for a short time.
Essentially, this isn't a problem with the code, but rather, a problem with my development machine. There's some clash of fonts happening when we manage our fonts with a non-standard font manager (Linotype FontExplorer). Strange that it's only in Chrome though.
Exactly the same problem (only in Chrome) occurred to me!
But after deactivation of font "Arial" (no matter if truetype, postscript, opentype etc.) in my Mac SnowLeopard system, this effect of displaying Times New Roman instead a Sans Serif Font like Arial, Helvetica, Verdana etc. disappeared completely.
I hope it helps.
Modellname: iMac
Modell-Identifizierung: iMac10,1
Prozessortyp: Intel Core 2 Duo
Prozessorgeschwindigkeit: 3,06 GHz
Anzahl der Prozessoren: 1
Gesamtzahl der Kerne: 2
L2-Cache: 3 MB
Speicher: 4 GB
Busgeschwindigkeit: 1,07 GHz
Please try to "Inspect element" with Chrome, and look at "computed style". What is it written?
Always inspecting styles, is your font-family overwritten?
Update
I tried for you. I see Arial, the right font. See attachment.
Have you tried a cache-less refresh? (Ctrl+Shift+R)
It's possible that chrome is using an older, cached copy of the CSS.
In my case, I was using bootstrap on a page. It was the specification of text-rendering: optimizelegibility; that was causing the rendering problem of my font in Chrome.
I changed it to text-rendering: auto; and that seemed to fix the problem.
When displaying Greek symbols with, for example, π, I get very different results in Chrome and Safari versus Firefox. As some example text, I have:
Chrome:
Firefox:
Is there a way to get Webkit to render the letters closer to Gecko's style, which I much prefer here?
EDIT: Actually, it seems the problem does not have to do with Webkit itself, as it seems to render the way I like it under Chrome in Windows 7: (I was using Snow Leopard and didn't bother to check on my other computers, heh)
Also, a bit offtopic, but does anyone know why the fonts seem to be rendered a bit more boldly on the Mac than on the PC?
I would guess that firefox is using the Symbol font, whereas Safari is using whichever unicode font has the right characters.
On my Mac, this works: <span style="font-family: Symbol">π</span>. Also, setting the font of the container to Times New Roman seems to work as well.
Okay, so the weirdest thing happened. I was looking at my site again and suddenly realized that the Greek was rendering perfectly. Am not sure what happened, since I don't think I ran any updates or anything, but the problem's gone now. Not very helpful of course to others with this problem, but that's just what happened...
Your browser will render using whatever fonts it has available. Some fonts may be missing certain characters, in which case the browser will use another font for those characers. If, in your CSS, you tell the browser what the font-family is, it can better pick a matching font.
font: "Times New Roman", serif;
Now the browser will pull in missing characters from a serif font.
Of course, with the #font-face directive, you can force the use of a font which has all the characters you need.