Some particular website displays partly wrong in Leap 15.3

HI,
actually this happened even before my recent install of Leap 15.3 (that is, in previous Leap 15.2 that I used before on the same computer).
Anyway, here’s my little problem:
when I visit last.fm pages there are parts of the pages where small caps i is displayed as high caps I (I expect it can’t simply be small caps L, right ?)
Hopefully, this is more clear, and visible in this capture:
https://imgur.com/0aDjyfi

As seen, it happens only on parts where entities are bold (namely, song titles as seen in the capture); artist names where font is not bold, seems to be displayed properly.

Since some time (November 2020, to be more precise) last.fm decided to switch their main fond from Open Sans to Barlow.
And after some time it started to behave like this for me.
Usually I’m working with Chrome browser, but I tried this and it happens with every other browser I tried (Firefox, Opera, and Chromium).
On the other hand, it does not behave like this on other computers (Windows or Linux) where I’ve tried to compare.
Even on my computer where I have this issue, if I try to boot the DVD with Knoppix for instance, it does display OK.

So I believe there is something related only to this combination: from Opensuse Leap 15.3 (and previously from Leap 15.2).

There is even something more strange about this: for a very very short time (split of a second, really) when trying to display a page at last.fm site, it appears taht the i is displayed OK, but immediately is “turned” into this I instead. Sorry, I’m not able to capture this on some video to be more clear about it.

It bother me mostly on my user page on last.fm, but this happens also on just about any page, for instance on that artist\s page: https://www.last.fm/music/Thea+Gilmore

Anyway, does this happen to anyone else trying to display anything on last.fm ?

Is there anything I can investigate/change on my system in order to overcome this problem ? That is, besides installing some addon on Chrome, like Font Changer, and pick some other font (I tried this when I ws on Leap 15.2, and indeed issue is avoided in this way, but frankly I don’t like this sort of solving of this problem, I prefer to not have that addon on my browser).
Thanks.

Not everybody trusts all upload sites. We have https://susepaste.org/

As I did not look at your image (that site also wants all sorts of scripts to be run :(), did you try different browsers?

After some strange error on susepaste.org (404), I got this working:
https://susepaste.org/60639534

Anyway, I did mention already that my issue is with all browsers that I have installed in my system (namely, Chrome, Chromium, Firefox and Opera).
Image above was captured from Chrome, but it looks virtually the same on all other browsers.

I could at least use a confirmation about someone else’s try on last.fm page (any page would do, but we can rely on a common denomination on this particular one: https://www.last.fm/music/Thea+Gilmore and see what song title in the section “Top tracks” look like - for instance the song Bad Moon Rising.

1: try a different browser.
2: Your use of “small caps” is confusing.

In normal use “small caps” refers to upper case letters, but smaller than usual. Some fonts use those rather than lower case letters.

Your image shows standard case – mostly lower case letters except at the start of some words. However, the way the font is being rendered is what bothers you. The lower case “i” has a dot above it. In your image, the dot appears to be merged with the rest of the “i”, making it hard to distinguish from “l”.

Perhaps you can force different font settings in your browser, or try a different browser. Maybe even install some different fonts.

That is simply the font used. When you look into the page code (in FF by doing Ctrl-U) you will see everything in a decent fixed font. Everywhere there is “Bad Moon Rising”

Yes, sorry, all the time I had “lower case” in mind, but came up with “small caps” in writing the message.

So, basically, I don’t have any solution but try another font (which I stated first that I’m not very fond of), right ?
Since this I did already when on Leap 15.2, I suppose I can try it again now and have the new font assigned only to this particular site (via that addon I did mention first).
I just hoped I’m missing something at my side on Chrome about how this font should be rendered at display time.

For what is worth, the problem appears on all browsers, and only on parts of the page that is bold (and, of course, on that particular font, Barlow). If I find some other site that uses this font I’ll try to come again and mention if things are displayed the same – though I doubt this will be anytime soon.

It has nothing to do with 15.2 or whatever version, or even with openSUSE. It is shown to you by browsers that use a font that is asked for by the the web server. It is this particular website (as you already found out) that thinks this is a nice font. But as so often, nice is not the same as clear or readable.

Not a problem. I figured that English is not your native language.

Some solutions:

  1. Disable font smoothing
  2. Uninstall font Barlow
  3. Disable font with uBlock Origin
  4. Disable website fonts in browser settings

font-family: Barlow,Open Sans,Lucida Grande,Helvetica Neue,Helvetica,Arial,Sans-serif;

Thanks, I wasn’t aware uBlock Origin can “block” some fonts – but it does work, so thanks.

Anyway, it turned out that at my side the problem is rather hardware, than software: to be more exact, I found that a zoom at 110% simply “solves” the issue, if solve can be a name for this situation. So, my poor monitor/display that is capable of a mere 1366x768 resolution is simply not able to distinguish between the dot and the line of letter i in that particular combination (last.fm site, with Barlow font, and text being bold). Strangely enough, when reducing the zoom to 67%, the dot becomes visible again, but, alas, the overall writing on that page becomes painfully small, so not a solution.
It seems that using uBlock with blocking “external fonts” on that site is a better solution. (I don’t even need to block anything else, since I’m a pro/premium user on last.fm and thus I am excluded from delivering ads).

So, thanks again for the tip.

P.S. I was using an ad block addon in my browser, but it was Fair AdBlocker.
Also, as far as I can see from font management app, I don’t have Barlow font in my system; maybe this was a small part of this issue ?

With FF you may check which font you’re using.
If you’ll install font (here: Barlow), then you’ll be unable to block it with uBlock Origin or browser.
You may set preferred font in a browser. Mine browser is not using Barlow there because I prefer another font.

ILL designers there don’t care about 1366x768 monitors.

Barlow is not loaded to LibreOffice.org in my KDE system standard download system.

If you do not have requested font, then your system will load an alternative ‘similar to it’.
So browser is attempting to use a font you cannot render natively. (Not in system clearly for your monitor).
But you appear to have solution insetting zoom to 110% so solved.

I have similar problems with some Asian fonts (specific to Microsoft) [Chinese characters] incorrectly displaying. But zooming helps or I need to download and install basic
MS Asian fonts and agree MS licence to use them clearly.