Web font #font-face rendering/anti-aliasing in Chrome and Firefox - font-face

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.

Related

Why did my Microsoft Add-in suddenly stop showing as an option in F12 devtools?

At one point I was able to see our Outlook add-in app in the target options in f12 devtools for troubleshooting, but sometime last month it stopped showing up there. My colleagues are stumped, and I can't find much online in the way of troubleshooting.
I tried checking my Windows version and Outlook version against others who can see it in their devtools, but we're all on Windows 10 enterprise v1803, Outlook v1910, and IE 11. I've tried many things over the month since this happened like rebooting my PC, making sure I have the latest updates from IT, refreshing the options, running some commands I found online for targeting the right browser for devtools, etc. No change.
Another peculiar thing is that I'm seeing some completely different things in the Add-in than they are, like button alignments and div widths and such. I had our dev environment looking perfect on my end, but when a few people on the team screenshared with me there were a number of styling issues I can't reproduce. Even weirder, nobody experiences these issues in O365, it's just the desktop Outlook app on our Windows machines.
Any ideas on how to troubleshoot this would be very greatly appreciated.
Steps I take to produce the issue:
Click on manifest icon for our app in Outlook ribbon. App loads in the sidebar.
Open F12 devtools (both 32 and 64 bit for good measure from the System32 and SysWOW64 directories).
App is not in the target list. Click refresh, still not in the list.
FYI, any IE 11 windows I have open show up there, just not my app.
Starting in Windows 10 version 1903, the latest version of Office will use Edge WebView instead of IE to render add-ins. Edge WebView requires a different debugger (not the F12 debugger) called Microsoft Edge DevTools. You can find out more about it here.

Way to make IE 10 open in IE8 mode

does anyone know how can i force IE 10 to open in IE8 browser mode. Is it possible, Change something in IE settings? Does IE have some kind of a config file what can define it? Or can i make some changes in REGEDIT to force it to open in IE8 mode?
If you want cross-browser testing, take a look here. This offers multiple browser testing without the need to have virtual machines etc.
If your specifically looking for IE, then take a look here.
EDIT: You can look at IE10 on Windows 7 Side-by-Side IE8 for the issue you have.

Chrome 27 not loading background images anymore

This is a really weird problem that appeared in the recent version of Chrome.
I have a huge app that loads hundreds of stylesheets (in dev mode). When the page loads, obviously all styles are applied but background images are missing!
If I just do nothing and wait, suddenly the images start loading randomly...
Using dev tools I checked the network tab to see if the images are requested.. but no, just a few of them appear in contrast to the previous version of Chrome.
Does anyone know if any kind of optimization has been added in Chrome that makes images load lazily? Obviously that implementation is buggy and does not consider a page with a lot of stylesheets!
This problem does not affect the app in production, where all the stylesheets are packed and reduced to just ~10.
Tested on Linux and Windows 7
I had a similar problem with our web site on Chrome 27.0.1453.93 and 27.0.1453.94. It turns out that Chrome seemed to think that all of our .gif images were corrupt. They wouldn't render in Chrome but they would render fine in IE, Firefox, and older Chrome versions.
I'm not sure what the underlying issue was, but I opened the images in Photoshop and re-saved them and now it works fine.

Windows 7 64 Chrome 19 font anti-aliasing render issue

I just loaded a new system and everything looked fine. Then all of the sudden Chrome starting displaying certain fonts on certain web pages with what looks like no anti-aliasing. I've had this happen before on another system as well. Same thing, everything looked fine and then all of the sudden this started. Any ideas or suggestions? Thanks.
Screenshot of what I'm typically seeing.
http://www.denkers.com/test/font.jpg
First, make sure your text encoding is correctly set to Unicode (UTF-8) by going to the wrench icon -> Tools -> Encoding
If that doesn't work, go to the wrench -> About Google Chrome and update to the latest version.
Finally, if none of these work, try reinstalling Google Chrome.

Why does StageVideo not work locally in IE?

I'm having troubles testing a StageVideo file locally. The HTML file that contains the swf loads perfectly in Chrome & FireFox, but when I go to open it in Internet Explorer 9 nothing happens (it just shows a white screen).
I've added the permissions for the location to the 'Global Security Settings' tab of the Flash settings manager (on the Macromedia website). I've also checked in the IE9 settings to make sure that it allows GPU rendering.
Has anyone encountered anything similar or have any suggestions as to why it might be blocked in IE9?
Thanks in advance.
My gut feeling is that you don't have the latest Flash Player for IE, but do have it for Chrome/FF since they're 2 different versions. The swf probably doesn't even load up because of the Flash Player requirement.

Resources