Web Pages Displaying Symbols Instead of Text (Similar to Webdings/Wingdings) --- SOLVED!

rodrigomelo

Hello,

I am encountering an issue where certain web pages, including the official Vivaldi website, display all text as symbols similar to Webdings or Wingdings fonts. I am using Vivaldi on Windows 10. As shown in the attached screenshot, the text is completely replaced with icons and symbols, making the page unreadable.

I have tried refreshing the page and clearing the Vivaldi's cache and Windows fonts cache, but the problem persists. Could this be related to a font rendering issue, or is there something else I can try to resolve this?

Thank you for your help!

My software is:
Vivaldi 6.9.3447.54 (Stable channel) (32 bits)
Revision: eb6838f766b38d733d372a9b2bcf2126d106591e
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

luetage

@rodrigomelo The Vivaldi main page has following font setting: Inter, system-ui, sans-serif. I doesn’t appear to load third party fonts. Do you have Inter installed? If not your system-ui font should trigger. What is it? You could also try changing the sans-serif font in webpage settings. In any case, you can try to inspect the page and change the CSS font instructions to check what the problem is. Do you have the same issue on Wikipedia?

Hadden89

@rodrigomelo Before entering in the white rabbit hole...

does it happen with a new profile or a guest window?
does it happen only on vivaldi or with other browsers/apps too?
does it happen on internal pages, as vivaldi://version ?
inspect the affected page as suggested.
have you installed anything strange lately?
check default fonts in vivaldi settings to see if the culprit is there:

danger zone open the registry editor and post a screenshot of this page:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes

rodrigomelo

Hello everyone. After years of searching for a solution to this issue in Vivaldi, I’ve finally found a very simple fix...

In some Reddit forums, as well as in the response by user @luetage above (which I just saw a little while ago), they mention that the problem could be related to a font called Inter.

And in my case, that’s exactly what it was.

I went to the Windows fonts folder ("c:\Windows\fonts") and deleted the only Inter font I had on my PC.

And voilà, problem solved. All the pages that were showing the issue from the image above now display text normally.

Thanks to @luetage and @Hadden89 for their time and responses.

Hadden89

@rodrigomelo Glad you fixed
Even if I'm still curious why a normal font corrupt websites

luetage

@Hadden89 I think it’s funny Vivaldi uses Inter by default on the main page, yet the Vivaldi Linux builds have ugly Cantarell as default UI font.

rodrigomelo

@Hadden89 I didn't get the root of the problem either. Apparently, it's either an issue with a font on the operating system (Windows/OSX/Linux, etc.) or just a terrible choice by the web designer...

Chrome, which is what Vivaldi is based on, always tries to use the local version of the font.

At least on Windows, the Inter font that was on my PC really looked a lot like Wingdings and Webdings. All the characters were symbols.

I'm a web designer and developer, and I would never use the Inter font for anything like menu icons/actions/buttons/etc... It's an ugly and outdated font.

Maybe there’s more than one font with the name Inter, and maybe one of them has more than just symbols. That’s the only thing that makes sense to me.

So, the web designer uses the Inter font with ASCII characters, but the browser, trying to use local fonts, ends up picking an Inter font that only has symbols.

I can't think of any other explanation, especially since Chrome (and Vivaldi/Edge/Safari/etc.) pretty much made using special fonts common, even fonts that are just icons. It can display anything, and it renders them well.

luetage

@rodrigomelo I looked it up, Inter can be a symbols/icons font. But I don’t think it comes with Windows by default, or a big portion of Vivaldi users would run into this issue. You have installed it at some point, or an application you use has installed it. You should have the same problem with other browsers too.

DoctorG

@rodrigomelo Seems Windows font manager chose the wrong substitute font and that causes the display with a dingbats font.

DoctorG

@luetage said in Web Pages Displaying Symbols Instead of Text (Similar to Webdings/Wingdings) --- SOLVED!:

I think it’s funny Vivaldi uses Inter by default on the main page

Where is this font definition to use Inter as default on the page?

DoctorG

@rodrigomelo I installed font Inter and could not see such issue on Vivaldi latest 6.9 Stable Windows 11.

Pathduck

@DoctorG For vivaldi.com the body is set to:
font-family: Inter, system-ui, sans-serif;

Since I do not have "Inter" on the system and it's not a default font, I get Segoe instead:

Family name: Segoe UI Semibold
PostScript name: SegoeUI-Semibold
Font origin: Local file(28 glyphs)

If using non-standard fonts they should at least serve web fonts.
Unless Inter is shipped by default in MacOS/Linux?

DoctorG

@Pathduck For me Windows 11 uses Segoe as substitute. That is ok.

DoctorG

I tried on my Windows 11 with the OTF or TTF or Variable fonts, no issues on Vivaldi.com page.

Sometimes a installed font is broken or has incorrect font information table, that can cause strange display or substitution.

I saw such in the past a few years ago on Linux with some fonts from Google Android (i do not remember correct the name) family.

fredrik

This is the Inter font that was supposed to be shown. It is our official brand font at Vivaldi, but we were not aware there were other fonts with that same name, so we will remove it from the list in the css. Thanks!

Pathduck

@fredrik Why not use WOFF?

luetage

@fredrik Inter is a standard on many websites and this is an isolated case. I bet few people have the Inter symbol/glyph font installed that seems to cause problems here.

fredrik

@Pathduck We could do that, but it's not super important I prioritized page loading speed instead.