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)
Related
Recently had a customer send in a ticket complaining that their font has changed (within the week or so). The font on the site has not changed in probably a decade. What I suspect is that perhaps a recent windows up that times in line with the change is effecting the font he sees, or, more likely, a setting changed on his end.
the font we use
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
It is my understanding that Helvetica Neue will likely get replaced by something else on windows since, just from googling, I find that font is not included in windows.
My question is, is there any way I can help debug this on his end to figure out exactly what is going on? It does make the site difficult to read for this user and I would like to fix it, and also know for sure what I am talking about. I usually try very hard not to just reply with, "looks good on my machine". Inspecting it shows the same font family as what I posted above.
None of the font options in that css appear to be what is showing.
The one distinguishing trait I can see in the font is the letters de overlap or touch.
This is for web content, the browsers mentioned where most recent Chrome, which I also tested on (verified exact same version numbers) and did not have the issue, and Edge which I do not have.
If you can't access their computer, it's going to be hard to pinpoint the exact cause. Windows font substitution is the normal culprit in this situation:
As stated here:
https://office-watch.com/2021/windows-substituting-arial-font-for-helvetica/
"Windows is setup to use Arial whenever it sees a reference to ‘Helvetica’. This happens at the Windows level and doesn’t just apply to Microsoft Office. Most web browsers get the same thing – web pages that ask for ‘Helvetica’ to display in web page will get the Arial font instead. It drives web designers crazy, especially since CSS has a way to choose from a family of preferred fonts.
Way down in the bowels of the Windows Registry is HCLM\SOFTWARE\Microsoft\Windows\NTCurrentVersion\FontSubstitutes which lists the substitutions."
Additionally, if you run a comparison of arial vs helvetica neue...using the word video you mentioned, you get this:
Notice the difference in kerning (separation between letters/characters) between characters 'd' and 'e'. Arial appears 'clumped' when compared to Helvetica Neue.
I have no reputable source to provide, but this exact situation has happened to me before. It was caused by me installing a faulty font of a similar name.
It was hell to read most websites and I had to get a chrome extension to change everything to Arial to be readable. Ask them if they're having this problem on other websites as well then tell them to delete the "Helvetica Neue" font file on their computer (Mine was named Helvatica Neue56878 if it helps). This solved the problem for me.
How to debug: Check whether the specific computer have the Helvetica font installed. You can do this by going to the Fonts settings of windows. To open Font Settings just open windows search and type Font:
Font Settings will show you Available Fonts that are installed in your computer. Type Helvetica in the search bar and see if Helvetica font is installed:
If it's not, you can go and download and install the font on that computer and the problem would be solved.
CSS solution: To avoid this problem from happening in the future, you can include the font's .ttf file in your project and use #font-face to set it as a font on your project.
#font-face {
font-family: "digital-7";
font-style: normal;
src: url("~/assets/fonts/digital-7.ttf");
}
You can use it like so:
.container{
font-family: "digital-7";
font-size: 4em;
color: black;
}
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.
When I inspect elements on my site using the Chrome developer tool, I see the following as my element's "Computed" style:
font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif
But if I scroll down further (to the bottom of the "Computed" tab) I see:
Rendered Fonts
Liberation Sans—Local file(11 glyphs)
Since my (Linux) OS must have Arial and sans-serif, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my font-family list.
I'd blame my own bad CSS, but in theory the "Computed" tab shows the final/processed version of my rules, so however terrible my original CSS may have been, Chrome clearly sees my font-family list defined (and being applied) to my element ... it just ignores it.
Can anyone explain this mystery?
EDIT: I installed a font-checking program and it turns out that Linux (Mint) does not in fact come with an Arial or sans-serif font ... but even so, I thought browsers provided (at least) a basic sans-serif font, no matter what the OS? Is that incorrect?
Your font stack specifies Arial.
Arial is not present on most Linux systems for licensing reasons, and it is usually aliased to Liberation Sans, since Liberation Sans has the same dimensions (metrics) as Arial. The font design, however, is different (that's why Liberation Sans is usually not the default Linux sans serif font, its design is not popular).
Helvetica is another well-known legacy font name usually not present. If you try to use it in the font stack it will usually trigger all kinds of aliasing. It may even trigger the Liberation Sans alias before Arial (since Arial was Microsoft's poor-man Helvetica replacement when windows launched and has about the same metrics).
(When you create a PDF that specifies Helvetica on Windows it will usually substitute ArialMT).
If you only specify sans-serif you will get the system "best" sans-serif font, usually clean well-loved designs, but their dimensions vary widely from system to system.
Due to the number of broken web sites whose designers assume all systems ship with the same fonts, with identical pixel widths that can be fixed in the page design, font substitution is usually done on metric first, design second priorities.
The only way to get the same font on all clients is to use web fonts, but that will slow down your site due to the font download and users (not "designers") prefer fast pages. Web fonts demand to be careful about licensing and font unicode coverage, security-conscious users will block third-party downloads, and there is a lot of cargo-culting about obscure web font formats (opentype is sufficient in most browsers nowadays).
The kind of Apple maniac that thinks HelveticaNeue is the alpha and omega is usually satisfied with Open Sans as web font.
But even with web fonts the rendering will be slightly different since different systems use different text engines that all have their specifics, with some fonts working better than others for a given engine.
There are two font fallback mechanisms in Chrome for Linux. One is OS-level fallback. Another one is CSS specified fallback. The OS-level fallback mechanism returns Liberation Sans to Chrome instead of none or not found while Chrome asking if the HelveticaNeue available in your OS. Chrome takes the returned Liberation Sans and believes OS returned answer so ignores the CSS subsequent font fallback list.
I see that you have both Helvetica and Arial in your font-family properties. I'm guessing that you want Arial when Helvetica is not available...An answered question that deals with this is: two fonts
Now, if I wanted to have only one font-family, such as Century Gothic, I would do:
font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;
This is a good guide.
My question is, why do you have so many
Because Google Chrome, somethiing leave the WWW from the url, you can try to put it manually.
Especially in Unix or Mac system.
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
I have an asp.net page with an asp.net menu.
I defined the font in the menu items to be Myriad Pro.
In IE and Firefox it appears normally, but in Safari the menu items appear blank.
when I changed the font type to another font it worked fine.
so is there a way to make the Myriad Pro font appear on Safari.
thanks
As Rup mentioned, Myriad Pro is not a ubiquitously defined Mac font. However, if you have a copy of the .otf or .eot font files, you can make the font available to all CSS3 compliant browsers and supply a backup font for display should the browser not support CSS3. This would be the syntax for doing such:
#font-face {
font-family: "CustomMyriadPro";
src: url("path/to/myriadpro/font.otf") format("opentype");
}
h2 {
font-family: "CustomMyriadPro", Helvetica, Georgia;
}
Make sure your CSS specifies Myriad Pro in quotes, i.e.
font-family: "Myriad Pro", sans-serif;
Secondly, be aware that a font will only appear if it's installed on the end user's machine (unless you're using #font-face), so you always need to define some fall-back fonts, e.g.
font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
This problem is happening with multiple installed fonts on my Mac since the upgrade to 5.1 and then to Lion. I think something is broken with the upgrade. Other browsers are fine. It is affecting other fonts as well. I had to disable the font-family CSS in the Inspector in order to get this editor to include readable text because Consolas is affected as well.
The problem is not with fallback or specification in CSS. The problem is with Safari and specific fonts. It does not fallback past the problematic font but continues using it, replacing all characters with the capital A in a square; so fallback is of no help.
Discussion and possible explanation here: https://discussions.apple.com/thread/3191532?start=0&tstart=0
According to the codestyle.org font survey, most Macs don't have Myriad Pro installed. (Nor Windows for that matter.) You should pick similar fallback fonts for all of Mac, Windows and Linux then specify a list of these fonts in your style.
If you specifically need Myriad Pro then you could use images, or embed the font using sIFR (maybe not for menus though) or through #font-face font-embedding (thanks Olly!) instead.
Check out the Typekit webfont-embedding service, they have Myriad in their library http://typekit.com/fonts/myriad-pro