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!
Related
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
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 have an area of a website that has a few broken images; however it is only in a few different situations.
Where it works
Windows 7 (all 64 bit) - Chrome, Firefox, IE7, IE8, IE9
Windows XP - Firefox, Chrome
Where it doesn't work
Windows XP - IE8, IE7
If I look in the source on the Windows XP/IE combinations, the generated source looks fine. However, if I paste the URL of the image into the address bar, sure enough it can't find it despite it being there. If I copy and paste the same URL into one of the other browsers, it finds it just fine. Cross browser quirks is something we are all familiar with, but an image not being found but only in certain hardware/software combos is certainly a new one for me.
I know this question is 3 years old, and the images are no longer there, but anyone investigating this problem may have some luck with this answer:
Some images won't display in IE7 or IE8
Short version: the images are CMYK compressed rather than RGB; apparently it can be fixed by opening in irfanview and re-saving it, or something similar in photoshop.
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.
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