Forum header weirdness

[toydragon]

Just a small quick bug report about the forum formatting. Firefox browser, latest release (147.0.1)

When browsing topics, and at the top of threads, the logo in the header looks like this, constructed of individual SVG files:

However when I scroll down in a message thread, it changes to this pic:

Using right click → view image, i confirmed it is very much different images and not like, font changing weirdness. Seems like Discourse is doing Some Shenanigans when putting a thread title up in the header?

[rik]

I have noticed that as well, only on mobile do I have the “serif font” like your first photo. On desktop the change exists as well, but it is more subtle:

Then when scroll down it does this:

(the kerning between the “i” and “o” is slightly more condensed even though my static screenshots are hard to differentiate that way).

[toydragon]

yeah it’s neat

the first version, that’s using a SVG file, loaded in at https://community.iode.tech/uploads/default/original/1X/54d5663fc3bd391a8b0c7e513ee8be617530a856.svg . Dug into the file and i see it’s expecting the user to already have the “Comfortaa” font installed. But I don’t have that one on this system so, serif fallback is loaded

when it scrolls, the theme then loads this image: https://community.iode.tech/uploads/default/original/1X/f20ce9a5f02383ff2c57e22ab331a429d4413d79.png
Whcih, as a PNG, will look properly each and every time!

I’d recommend whoever is in charge of theming to consider using a PNG for consistency for the logo, or add the font to the theme as a webfont so that it’s loaded in. Personally i’d go for the PNG approach cuz that’ll be overall easier with a single file for consistent banding/theming, tho the webfont approach means you can easily theme like, the forum categories or titles with the project’s font since it’d already be loaded, just tweak the CSS to point to the font family name.

[MissPiggy]

Showing off my pictures (on desktop computer)

Scrolling:

[rik]

That one is as expected, I see that the images are set like this:

It is hard for me to see the actual image filenames / types from this screen, I only see what you see, and it all looks as expected? (still can’t sort out where the .svg is coming into play).