Website font not showing up in IE11 - wordpress

Okay so its time for that ancient problem that keeps coming back. My client's site is looking pretty weird in Internet Explorer. The top menu is out of position simply because its too large and on the rest of the site, it just doesn't seem to show up.
http:www.imscs.com
We're using the custom font 'Open Sans Condensed Light No Subsetting', Wordpress 4.3.1, 'BeTheme' (Theme), and I've tried #font-face with no luck.
Here's the link, if anyone can see what's missing I'd really appreciate it.

Related

My web fonts look pixelated, especially the vertical parts of 'l's 'i's and 't's

All WordPress sites render strangely and Google searches look weird as well.
For WordPress sites, it loads fine, but then looks like the picture moments later.
Additional information:
Mozilla Firefox had the same issue on the same page.
Enabling Microsoft TrueFont did nothing.
Restarting chrome did nothing (except the last time).
If you use an extension (font changer) to force all fonts into 'Times New Roman,' the problem vanishes.
Chrome LCD Text Antialiasing does not fix the problem.
Forcing other sites to use 'Noto Sans' (pre-relaunch) replicated the problem.
Whatever font Google used was also messed up. After relaunching and installing 'Noto Sans,' google was fixed. Google's font does not appear to be 'Noto Sans,' however, which leads me to believe it fixed itself somehow.
The problem appears in incognito mode.
Clearing the cache does not fix the problem.
I installed the font in question, which I discovered to be 'Noto Sans,' to my computer. Following a relaunch of chrome, it seemed to fix itself.
EDIT: This did not fix the problem, I had to manually install an extension to replace the text on pages with a custom font before the problem vanished.

Kendo Window showing cross in title bar...only on my computer

I'm developing an ASP.NET MVC app and using the Kendo Window control for popups in an iFrame. For some reason, I am getting a tiny cross in the leftmost part of the title bar. This is only happening on IE 11 and Chrome. The cross does not appear on Firefox. (I'm not worried about Chrome, as this app is intended to run only on IE 11.)
It appears to be something unique to my computer, as I have tried it on other computers with IE 11 and the cross does not appear.
I believe the Kendo controls show this character when it doesn't have data of some sort (I've seen Kendo dropdowns briefly show this same symbol while debugging), but I have no idea what data it's missing.
This may be a related problem, so I'll throw this out there: certain Unicode HTML characters like & #raquo; ( ยป ) show up as weird boxes with characters. Again, this is on IE -- and only on my computer. I dug down a bit in the MVC code and it seemed to be related to Bootstrap (I can get & #raquo; to properly show up if I'm not using the Bootstrap theme).
I tried replacing all my Windows fonts with the fonts from a known 'working' computer, but it didn't change anything.
Any advice or suggestions would be greatly appreciated. Thanks!
Figured it out. bootstrap.css was using Helvetica as one of its fonts:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
My computer doesn't have Helvetica Neue, so it fell through to Helvetica. Something about that font doesn't want to render Unicode characters in IE 11. Once I removed the Helvetica option and IE fell through to Arial, the weird character was gone.

Google Chrome Rendering Fonts Incorrectly

I don't even know how to properly identify what the issue is here, but my Google Chrome isn't rendering fonts properly. At least not Helvetica, anyways. Taking a screenshot is the only proper way I can explain what's happening:
http://i.imgur.com/rKlI86r.jpg
This happens with nearly every website, but only in my Chrome. I have no clue how to fix this.
Thanks.
Its a problem with the font Helvetica that you have in your system. Just uninstall that font.

Squished Text On Website

I am using a google web font on a site and am getting some users reporting very squished unreadable text throughout the entire site. I am unable to see this any browser or computer I use, so I am not sure what could be causing this.
Here is a screenshot of the issue:
Any suggestions to fix this would be great. Thanks!
Here is the url to site: http://odditymall.com
i would guess your website is not responsive and u have done some html/css changes to your website so its causing it like that. y dont u try accessing the source through chrome element inspector and then play with the code maybe u'll find ur answer there. else send the site link so we could check it up, if thats possible though..
If anyone is having the same issue... From google fonts, I was getting the 'Droid Serif' font, but in my css I was using:
font-family: 'Droid', arial, verdana;
So, since droid did not exist anywhere, the text on the site would look like the screenshot above for a very small amount of people (for whatever reason). To fix it for those people, I just had to change it to:
font-family: 'Droid Serif', arial, verdana;

Google Fonts not appearing properly in Google Chrome

I am using Google Font 'Righteous' and this shows fine on every browser on my Mac and PC. However my client has noticed that on his copy of Google Chrome the font is showing in a very odd fashion, look at the screenshot:
Does anybody know what could be causing this? Is it a browser issue or is it something that can be rectfied in the code or CSS?
The CSS is pretty basic:
h1, h2, h3, h4 { font-weight:normal; font-family: 'Righteous', cursive; }
As I said, in my version of Chrome it's fine! Any help much appreciated!
It's possible that the user has a font on his/her system called Righteous which is interfering, though I'm not sure how likely that is. And unless I'm blind, you haven't posted a link to it, so I can't really comment much. In response to #kubedan about the chrome console, that doesn't mean anything, just chrome complaining that google isn't sending the right HTTP Headers back with the font.

Resources