Windows font issue and how to debug for customer

user_2521680 0
Viewed 174

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.

enter image description here

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.

fonts css
3 Answers

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."

enter image description here

Additionally, if you run a comparison of arial vs helvetica neue...using the word video you mentioned, you get this:

enter image description here

Notice the difference in kerning (separation between letters/characters) between characters 'd' and 'e'. Arial appears 'clumped' when compared to Helvetica Neue.

user_1428700

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.

user_29303340

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:

enter image description here

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:

enter image description here

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;
}
user_153726680
Related