'Windows font issue and how to debug for customer

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.

cssfonts


Solution 1:[1]

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.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 brownsugarmint
Solution 2 Yong

Related Questions