Bug 514421

Summary:	develop.kde.org and HID Guidelines page have broken CSS in Chrome/Safari
Product:	[Websites] www.kde.org	Reporter:	Felix Schütt <felixschuettatoutlook>
Component:	general	Assignee:	kde-www mailing-list <kde-www>
Status:	NEEDSINFO WAITINGFORINFO
Severity:	normal
Priority:	NOR
Version First Reported In:	unspecified
Target Milestone:	---
Platform:	Other
OS:	Other
Latest Commit:		Version Fixed/Implemented In:
Sentry Crash Report:
Attachments:	broken correct

Description Felix Schütt 2026-01-10 19:03:26 UTC

Created attachment 188399 [details]
broken

SUMMARY

The "KDE HID Guidelines" page and the "develop.kde.org" have non-working CSS in non-Firefox browsers:

- https://develop.kde.org/hig/
- https://develop.kde.org/

More pages could be affected but this is just a starting point.

STEPS TO REPRODUCE
Go to the URLs listed above in Chrome, Brave or Safari.

OBSERVED RESULT
Broken CSS on Chrome / Brave / Safari - https://imgur.com/ME7sTaf

EXPECTED RESULT
The page should render like in Firefox: https://imgur.com/lAIo5RN

SOFTWARE
Bug does not happen in Firefox, but on Chromium-based based browsers and Safari.

Comment 1 Felix Schütt 2026-01-10 19:04:03 UTC

Created attachment 188400 [details]
correct

Comment 2 Ben Cooksley 2026-01-10 19:49:04 UTC

The page renders correctly for me on Brave / Linux.

Please ensure you have an up to date Chromium based browser.

Note that Safari is generally behind so if it works fine in a modern Chromium based browser (Chrome itself, Brave, etc) then there probably isn't much for us to fix here.

Comment 3 Felix Schütt 2026-01-10 20:23:08 UTC

No, it's an issue with the KDE "icon" font being used. 

The glyphs in the font have completely wrong scaling, causing a massive "padding" when used with a "3em" font size in the CSS. Some browsers "normalize" the glyph bbox, others don't.

I am already on the latest Chrome version (Version 143.0.7499.193, latest "stable" according to Googles Blog), that's not the issue.

I downloaded the KDE icon font from: https://cdn.kde.org/breeze-icons/icons.woff2?97f5747e2a469f732e46da072e2119de (extracted from the Network panel).

Then I used https://fontdrop.info/ to see the differences against a "regular" font like Roboto. 

The KDE icons font has very tiny glyphs: https://imgur.com/a/gpTotBh

The Roboto Light font has "normal" glyphs: https://imgur.com/a/mbruI2q

So, some browsers may "normalize" the width and calculate the height, but there's clearly something wrong with the icon font.