I am working on a site where I am having a font issue. The font shows up correctly for all browsers on a PC, but, the issue is when it is viewed with Chrome on a Mac. I know how to do hacks for specific browsers, but, I am at a loss when it comes to Chrome on a Mac. How do you specify for a particular browser on a Mac. I've attached screen captures. Any suggestions on how to fix this? Thank you in advanced for your time and consideration.
Correct Chrome on PC
incorrect Chrome on Mac
Related
Our company uses Macbook Pros as dev machines with external monitors.
Recently Chrome 53 started displaying the wrong colours in a PHP/Javascript web app when displayed on an external monitor.
The colour issue does not occur if Chrome is dragged to the internal MacBook Pro screen.
The colour issue does not occur in Safari, Opera or Firefox.
This is happening on 2 notebooks.
Does anyone have a hint as to the cause or potential solution?
I found a link to a problem where Chrome made the screen black on Windows 10 and thought it may be related.
The suggested solution was to disable hardware acceleration in Chrome Advanced settings.
I tried this and it worked - colours have returned to normal.
I still feel this is a Chrome defect, but at least the colours on the external monitor are distinguishable.
I ran into a problem with font rendering on Windows.
I'm used to a little difference in rendering between Mac and Windows, but this just made my mouth fall open. I tested the site thoroughly on Mac and I'm positive it looks just fine in Chrome, Firefox and Safari.
It looks like this on Mac browsers:
On Windows, it looks completely messed up in any browser (I tested Chrome, Firefox and IE):
I know Mac has Iowan Old Style installed by default, so I tried forcing the Mac browsers to use the webfont I generated using FontSquirrel, but that doesn't reproduce the problem on Mac.
Both browsers seem to load the same font (namely the woff version) correctly. Does anybody have any idea what this could be?
I can't post the link to the website because I don't have enough reputation, please look at the screenshots for the URL..
Thanks guys!
After some more research I found out the original (ttf) font worked perfectly fine on Windows, so it had to be FontSquirrel that caused the problems. I tried out 8 different types of settings on FontSquirrel and kept having the same issues.
After a while I decided to try a different generator and I came across Fontie: https://fontie.flowyapps.com/home
This actually solved the problem for me!
Generally speaking my font works fine but I'm seeing on odd occasions such as switching back to the browser from another application and sometimes when switching back from another tabs that my font seems to have unloaded and is using the fallback font.
I'm struggling to consistently replicate this and when I have seen it there are no errors.
I have also seen this happen in Chrome and Firefox on windows and osx and at a bit of a loss as to how this can be happening.
I haven't seen this issue in Firefox personally, but it is a known bug in Chrome.
https://code.google.com/p/chromium/issues/detail?id=336170
I found this bug in Google Chrome that I cannot explain.
The fonts that is loaded for a text sometimes changes for some reason by itself.
Here is a screenshot of the initial font when the web page loads:
Here is what I see after a while:
When I start scrolling on the page the font returns to normal.
Does anybody knows what is going on?
Also I have seen this happening on many other websites. And even on my own web pages.
I am using Google Chrome Version 31.0.1650.57, and I am on a Mac OS X 10.9.
The screenshot come from the DropBox documentation web site.
It is a known Chrome bug and will supposedly be fixed in Chrome 33: https://code.google.com/p/chromium/issues/detail?id=236298
I'm familiar with the differences in rendering web fonts in different browsers and/or OS. A couple of questions though:
I use a web font (woff) that looks like crap in Chrome but is OK in FF (on Windows 7). The other day I used my office computer from home via remote desktop. I noticed that the font now looked like crap in FF too. It looked much the same as in Chrome at the office. (I didn't test Chrome at home). I know that remote desktop reduces "the graphics" somehow, but not exactly how, and I have no idea how it could effect font rendering. When I came to the office the day after, the rendering in FF was still messed up. I guess the remote desktop session´s changes to "the graphics" was still in effect. I checked with Chrome and now rendering in that browser looks fine, like in FF before!!? So I restarted the computer to get back my usual "graphics settings" but that didn't help. Then I cleared the font cache and restarted again. Now I'm back to crappy Chrome rendering and OK FF rendering.
My questions:
What is happening with "the graphics" in general, and with font rendering in particular, when I connect with remote desktop (setting = 32-bit color depth)? My guess is that whatever changes, it gets both FF and Chrome to use another rendering method than before.
How can the effect still be there after rebooting the computer. Is the "rendering result" somehow stored in the font cache as it seems?? Seems odd.
Thanks for any advice.
Chrome cannot render TrueType fonts with correct anti-aliasing at the moment. WOFF fonts are containers for either OpenType or TrueType, in your case probably TrueType, so you get the crappy rendering. You can either serve an SVG font to Chrome (bigger file size) or use a WOFF based on OpenType.
Apart from that, many other factors influence font rendering, like having the font locally on your system or having ClearType enabled or not (which is not enabled by default through remote desktop).
See here as well.
I had the same issue and searched but found no answers.
Ultimately in my case it was a combination of remote desktop, server 2012 and browser fonts (Roboto in my case).
It was the worst in chrome, ok in firefox, perfect in ie.
The cause was the missing feature 'desktop experience' in server 2012.
To add this feature to server 2012:
Click Start, point to Administrative Tools, and then click Server Manager. In Server Manager, click Features, and then in the Server Manager details pane, under Features Summary, click Add features. In the Features list, select Desktop Experience, and then click Install.
That completely fixed the issue for me in all browsers/fonts, hope it helps someone else out there.