That is a font issue we regularly see reported on Mac. Issues with a weird looking font or missing glyphs can be caused by a problem with a specific font and you need to identify this font and fix this. You may find that this can be resolved by finding and removing duplicate fonts installed in the local ~/Library/Fonts folder, that are conflicting with standard system fonts.

You can check in Font Book for font issues like corrupted and duplicate fonts. Note that you should be careful about disabling "Allow pages to choose their own fonts, instead of your selections above" as this will cause issues with iconic fonts used by webpages to display small icons (you may see text labels instead of icons).

You can right-click and select "Inspect" to open the built-in Inspector with this element selected.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/
• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/

You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website. If the Fonts tab is hidden, click the down arrow at the right end.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/

That is a font issue we regularly see reported on Mac. Issues with a weird looking font or missing glyphs can be caused by a problem with a specific font and you need to identify this font and fix this. You may find that this can be resolved by finding and removing duplicate fonts installed in the local ~/Library/Fonts folder, that are conflicting with standard system fonts. You can check in Font Book for font issues like corrupted and duplicate fonts. Note that you should be careful about disabling "Allow pages to choose their own fonts, instead of your selections above" as this will cause issues with iconic fonts used by webpages to display small icons (you may see text labels instead of icons). You can right-click and select "Inspect" to open the built-in Inspector with this element selected.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/
• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/

You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website. If the Fonts tab is hidden, click the down arrow at the right end.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/

I tried to validate Font Book and it says there's nothing wrong. Also my main issue here is the fonts of the browser itself, not per website - even the Inspector's font is garbled which makes debugging difficult (check my screenshots)

In Firefox 119 Fingerprinting protection has been added to Enhanced Tracking Protection in Strict/Custom mode (Suspected fingerprinters) what affects accessing local fonts. To include user installed fonts, modify this pref on the about:config page:

• about:config => privacy.fingerprintingProtection.overrides => -FontVisibilityBaseSystem,-FontVisibilityLangPack

You can open the about:config page via the location/address bar. On the warning page, click "Accept the Risk and Continue" to open about:config.

• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

See also:

• https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop

Does it still happen in Troubleshoot Mode?

both privacy.fingerprintingProtection.overrides and troubleshoot mode don't work, font is still garbled

What font is this about and where is it located if you use the above posted steps like with issues in the first screenshot ?

You can right-click and select "Inspect" to open the built-in Inspector with this element selected.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/
• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/

You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website. If the Fonts tab is hidden, click the down arrow at the right end.

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/