Website UI elements and fonts displaying incorrectly on GNOME desktop browsers

Applications
1

Hi everyone, I run a small restaurant-focused website that shares Texas Roadhouse menu updates, coupons, and food reviews. Recently, I started noticing that the site’s layout and fonts look completely different when viewed on GNOME desktop environments (specifically Ubuntu 24.04 and Fedora 40 with GNOME 46). The strange thing is that the website looks perfectly fine on Windows and macOS browsers, but on GNOME, several UI elements are misaligned or even missing.

The biggest issue is with text rendering. The font weights appear inconsistent — bold headers sometimes render as regular, and certain custom web fonts fail to load altogether. I’m using Google Fonts (specifically “Inter” and “Roboto Slab”) linked through standard CSS imports. When I inspect the pages using GNOME Web (Epiphany) or even Firefox running under GNOME, I see repeated console warnings like:

downloadable font: rejected by sanitizer (font-family: “Inter”)

It seems like GNOME’s font rendering engine or sandboxing is blocking the font loading, but I’m not sure why this happens only on desktop systems using GNOME and not on mobile or Windows setups.

Another strange behavior is with hover effects and buttons. Some interactive elements that rely on CSS transitions or small bits of JavaScript don’t respond properly on GNOME Web. For example, the “View Menu” and “Order Now” buttons on my homepage occasionally freeze or lose their gradient background when clicked. It’s purely a frontend issue, but it’s making my site look broken for users on GNOME-based distributions.

I also tried testing my website inside a GNOME Boxes virtual machine to see if it was a hardware acceleration issue, and the layout bugs were still present. Disabling hardware acceleration didn’t help either. I even installed extra font packages on the system (fonts-inter, fonts-roboto) to rule out missing dependencies, but that didn’t fix the web rendering problems. It almost feels like Epiphany is applying a different rendering rule or font fallback mechanism compared to Chrome or Firefox on other platforms.

I’m currently using a standard responsive HTML/CSS setup, without any special frameworks — just pure CSS Grid and Flexbox. Could this be related to the GTK WebKit engine or CSS variable support in GNOME Web? I’ve also seen similar layout glitches when users switch from light to dark mode through GNOME settings — some sections invert incorrectly.

Has anyone else experienced this kind of CSS or font rendering inconsistency with GNOME desktop browsers? Should I be using a different font-loading method (like self-hosting instead of Google Fonts) or adjusting my CSS for better WebKit compatibility? Any suggestions would be a huge help — I’d love to make sure my restaurant website displays correctly for Linux users on GNOME too.

2

There is no such thing as a “GNOME font rendering engine” or “GNOME sandboxing”.

Web (Epiphany) and Epiphany have different web rendering engines, and different implementations to download web fonts.

3

You mean Epiphany and Firefox are different. Yes.

It’s quite strange that you’d be seeing font issues in both browsers. Is that error printed by Firefox or by Epiphany? Surely not by both? I assume that’s printed by Firefox, because this error looks unfamiliar to me. I suspect you’re seeing two different issues in each browser. You might need to ask Firefox developers about this. GNOME itself does not have any control over what Firefox does. We can try help with Epiphany/WebKitGTK here, though. The font rendering engine in both browsers is FreeType, but I doubt it’s related to the problems you’re seeing. And this problem is not likely related to sandboxing.

The problem with hover effects and buttons is likely a bug in WebKitGTK. Feel free to report it on WebKit Bugzilla, WebKitGTK component. Important: be sure to select WebKitGTK component. Unfortunately most bug reports are not fixed, but if you report it then at least there’s a chance somebody will investigate.

4

I wasn’t aware that Epiphany’s behavior could differ so much depending on its underlying web engine implementation. In my case, the font loading issues and layout inconsistencies seem to appear specifically in Epiphany, even though the same pages render fine in Firefox and Chrome on the same GNOME desktop. The console warnings about “rejected by sanitizer” for Google Fonts (“Inter” and “Roboto Slab”) still show up, which makes me think the issue might be related to how WebKit processes external font files.

Do you happen to know if there are specific CSS or font-loading practices that work better with Epiphany/WebKit — for example, would self-hosting the fonts instead of using Google’s CDN make a difference? I’d like to make sure my site (which focuses on restaurant menus like Texas Roadhouse) displays consistently across platforms, especially for GNOME Web users.

Thanks again for taking the time to respond any further guidance on best practices for font compatibility in Epiphany would be really helpful!