Firefox failing to load preloaded fonts

This is what a portion of my dashboard looks like in Chromium:

This is the same portion in Firefox, on the same computer:

Firefox is failing to load certain fonts specified by the style. It’s most obvious in the badge, which goes from sans-serif to a fallback serif, but the default font is also different.

The console in Firefox reports:

The resource at “https://[URL]/static/fonts/roboto/Roboto-Regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

The resource at “https://[URL]/static/fonts/roboto/Roboto-Medium.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

What do I need to do to fix this, so the intended fonts display properly on Firefox?

1 Like

I have the same problem. Any help would be greatly appreciated.

I’m glad to hear I’m not alone! Hopefully we find some help.

The new header cards in 2024.10 are also giving me this missing font issue now:

2024-10-03 - Home Assistant missing fonts

I tried opening my Home Assistant dash in Firefox’s Private Browsing mode, and fonts display appropriately there. This suggested to me that the issue was with an installed Firefox extension.

I restarted Firefox in “Troubleshoot Mode”, which disables extensions and themes, and sure enough, the font displayed properly in the expected places. The next step is to systematically disable my add-ons to try to find the culprit.

@Scoop2389, I currently have 14 Firefox add-ons installed, and if this is in fact an extension issue, I would suspect the culprit would be an extension you and I both have installed. Can you look at the following list of Firefox extensions and let me know which of them you also have installed?

  1. AutocardAnywhere
  2. Consent-O-Matic
  3. Copy PlainText
  4. Enhancer for YouTube
  5. Firefox Multi-Account Containers
  6. GNOME Shell integration
  7. Keep or Delete Bookmarks
  8. KeePassXC-Browser
  9. Panorama Tab Groups
  10. Rakuten
  11. Reddit Enhancement Suite
  12. uBlock Origin
  13. Wallabagger
  14. WebP / Avif image converter

That will help me narrow down the search.

EDIT: This is baffling me.

I have disabled all extensions, disabled hardware acceleration, disabled (and uninstalled) a custom theme, and cleared cookies and cache for the domain my HA is on. I’ve restarted Firefox following those steps. And yet, despite my browser now being in a state seemingly identical to Private Browsing mode and Troubleshoot Mode, the font still fails to load in a normal Firefox window.

I’ve created an issue for this on GitHub.

Alright, I’ve fixed this for now by switching from the Snap version of Firefox on Ubuntu to the .deb version. In the .deb version, with all the same add-ons enabled, the fonts display properly in a normal Firefox window, without needing Private Browsing or Troubleshoot mode.

Couldn’t tell you why this is the case, other than Snaps are cursed—that’s above my pay grade.

Yes, I definitely agree with this edit. I have done basically all of these steps and nothing seems to be working. I am on windows, and not all of the fonts are broken, just some. Here is a seemingly related topic that I opened that more accurately describes the issue I’m having: