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.
Related
3 days ago out of nowhere, I noticed that some sites I've built before using "Open sans" font from Google fonts as the main font are looking strange, choppy and pixelated on Chrome.
I've tried several fixes, going from adjusting the ClearType on Windows to disabling flags (accelerated 2d canvas) and disabling hardware acceleration on Chrome, pretty much tried everything I could find on the internet, and nothing works.
I also tried removing "Open sans" from my Windows font folder, but the font still looks pixelated on my sites. It was fine in Photoshop before I removed it.
This is a screenshot of what I am currently seeing.
open sans strange behavior
The p tag is using a simple CSS for testing
font-family: 'Open sans';
font-size: 12px; / 20px (on the bellow paragraph)
font-weight: 700; / 400 (on the bellow paragraph)
-webkit-font-smoothing: antialiased;
On the style, I have the default #import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); from Gooogle fonts.
Can anyone shed a light? Any help is appreciated. I don't really want to format my computer just because of this damn buggy font. Also tested on Edge and Opera GX, and it happens on them as well.
You should be sure if it's open sans. You can check it with whatfont plugin
I've also run into the same issue using Google Fonts' Open Sans, both via the #import method and the <link> method. Tested this against Brave (Version 1.30.89 Chromium: 94.0.4606.81), Chrome (94.0.4606.71), and Firefox (93.0). It exhibits this graininess on the fonts.google.com demo site at sizes like 18-20px, but at 16px or 21px the issue isn't present.
Interestingly, Adobe Fonts' version of Open Sans doesn't exhibit this issue, and is clear and antialiased at all sizes. I swapped my Google implementation with Adobe's <link> implementation instead and encountered the same issue.
However, inspecting Adobe's demo revealed they've also added a CSS property: font-feature-settings: 'calt', 'clig', 'kern', 'liga', 'locl', 'rlig';. These are OpenType features, and adding this to my styles seems to resolve the issue, but only for the Adobe implementation; it did not resolve the issue with Google's version. Perhaps Google's version of Open Sans lacks these additional features.
I had a similar problem, viz. Open Sans were looking jittery on our website (exactly as shown in the screenshot)
The problem was (kind of) solved when I used Adobe's Open-Sans version, as suggested in the comments.
Finally, I discovered that in our CSS we were using a font-weight (300) that we weren't importing from google fonts.
When added, everything worked smoothly, so we're back to Google Fonts.
I'm having a problem with the display of Helvetica in IE. I first noticed this issue in IE8, but it's continued after upgrading to IE11. When a site is set to use Helvetica, I'll get strange extra characters (using looking like a cross) overlapping other text. If I look at the site in any other browser, the text displays just fine.
My best guess as to what is going on is that I have a wonky version of Helvetica that IE is using. But when I look in Windows>Fonts, I have a lot of them that include the word "Helvetica". How can I tell which font IE is using? Am I on the right track in thinking it's a font file issue?
Here's a page that's not working right, and a screenshot of what I see: http://gorowe.com/pages/get-assessed
To debug the situation I recommend playing with the font-family declaration and fallbacks in the CSS.
So for example, start with a generic font-family like this:
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
Verify that the problem exists, then try eliminating the Helvetica entry like this:
font-family: Arial, "Lucida Grande", sans-serif;
If the problem still exists, you know that this is not an issue with Helvetica itself. If the problem goes away, you know that Helvetica is the culprit.
If Helvetica itself is causing problems, I would double check the problem exists in all relevant IE versions (at least 9, 10, 11) and operating systems (Vista, 7, 8). Then continue debugging the problem like you would for other IE issues.
EDIT: If you are using webfonts, definitely double check that you are using the recommended font-family declarations for that file. Usually you can just open them up in a text editor and you will see the declaration. You will also need to follow best practices for declarations and fallbacks. Here is a relevant example: Getting web fonts to work in IE10
EDIT 2: This syntax assumes the machine has Helvetica installed as a system font. You might want to research the safety of this assumption. More info here: Internet Explorer automatically switches to compatibility mode (IE9 and IE10)
http://img31.imageshack.us/img31/6730/4x1f.png
This is an example of the pixelated text when I set the font size to anything other than 80 or 65. Would anybody happen to know why the text gets pixelated like this?
Code to replicate this issue:
<div class="top_text">Hello! Please check back some other time, this website is in development.</div>
.top_text{
font-family: "Arial Black";
font-size: 38px;
}
Browser: Google Chrome
OS: Windows 8
It looks aliased, I would rather it be antialiased.
Google Chrome currently uses a really old text-rendering method, GDI, on Windows. Source. Firefox, IE (and most other applications you run) use ClearType, which has lots of features (like font hinting) which make text look more "anti-aliased".
Chrome devs are supposedly fixing it; if you believe the above link, the fix is due to be released soon. For now, however, most fonts will look badly-aliased in Chrome, except at specific font sizes.
i have been building a website using a windows development box so far. the site has turned out well, until i noticed that the same pages appear a little out of place as far as alignment is concerned in a linux dev box. the issue is because of the font being used in both these boxes.
here's my css -
font-family: tahoma, sans-serif;
the entire site has been designed with tahoma as the base font, and so if the font changes, because of the inherent width/height difference between fonts, they might end up taking more space for the same word than tahoma, and result in layout issues. Even in the windows box, if tahoma is not available, then the site would fallback into sans-serif which would most likely cause problems. so to say, the site is designed for tahoma users :D (i know this is bad practice).
while this maynot be a problem since tahoma will be present in all windows boxes, linux/ other OS users would face layout problems.
how do i resolve this issue..? i still want to use tahoma in the site.
In my experience you can never expect that a font on a web page will look exactly as you expected in all browsers / OSs. Flash does come close with the embedding feature, but for good ol HTML/CSS the best thing I've seen is TypeKit. I looked and they do not have Tahoma, but they likely have something similar to it.
As a general rule, I try to design my pages to allow for font displaying variations.
A client is saying that this page is displaying the sifr titles twice. Anybody had this? It doesn't happen all the time which is even more peculiar.
Here is one of the pages:
http://www.frontier-economics.com/europe/en/news/906/
Is it just IE? Any thoughts hugely appreciated!!
I'm not sure it matters, as there's no reason for you to be using sIFR on that page (or any other), because:
Georgia, Helvetica (and the similar Arial), & Verdana are all very commonly installed fonts.
Georgia, Arial, & Verdana are also part of Microsoft's core fonts, which can be freely distributed.
sIFR is now completely deprecated by native browser support of dynamic web fonts.*