#font-face fonts unloading when switching applications/tabs - font-face

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

Related

Font issue with Chrome on Mac

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

Font rendering fine on Mac, messed up on Windows

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!

IE8 Browser Mode vs IE8 in XP Mode CSS renders differenty?

Please forgive me if I placed this in the wrong section of Stack Exchange, I will be happy to repost elsewhere, Im just not sure which section to go to.
Why does IE8 display differently in Browser Mode (which is accessible through the IE10 F12 Developer Tools) than in XP Mode?
It seems that the CSS is rendered differently. Does anyone know the details as to why this occurs?
IE8 Browser Mode vs IE8 in XP Mode CSS renders differenty?
Yep, that's a pretty well-documented problem. It may be called compatibility mode, but the fact is, it isn't really all that compatible.
This is why it's generally considered a bad idea to use compatibility mode to do your testing.
Ultimately the only reliable way to test that a site works in IE8 is to actually load it in a real copy of IE8. XP Mode is a good way to do that.
I agree it's more of a hassle than switching the mode in IE10, but unfortunately, that's the way it is.

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.

css target chrome on windows

Is there anyway to target chrome on windows? I'm looking to do this because of the difference in border-radius rendering. Chrome on osx seems to work fine, only problematic in Chrome on Windows. Thanks.
If you really, really have to do this, I recommend this CSS Browser Selector script:
http://rafael.adm.br/css_browser_selector/
Of course, you'll have to update your site when the browser issue gets fixed. :p

Resources