Unreadable / garbled / distorted text rendering?
I experienced unreadable / garbled / distorted text rendering on some websites on macOS 13.4.1 (22F82).
Tested on following browsers:
- Firefox 114.0.2 (64-bit)
- Firefox Developer Edition 115.0b9 (64-bit)
- Firefox Nightly 116.0a1 (2023-06-30) (64-bit)
See attached screenshot when I visited reStructuredText Quick Reference documentation[1] using a Private Window from a new Firefox Profile.
How can I further investigate or fix this issue?
[1]: https://docutils.sourceforge.io/docs/user/rst/quickref.html
Modified by Leonard L.
Chosen solution
Issues with a weird looking font can be caused by a problem with a specific font and you need to identify this font and fix this.
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.
You may find that it 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 shouldn't disable "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).
Read this answer in context 👍 0All Replies (2)
Chosen Solution
Issues with a weird looking font can be caused by a problem with a specific font and you need to identify this font and fix this.
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.
You may find that it 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 shouldn't disable "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).
Thank you for the troubleshooting steps.
cor-el said
You may find that it can be resolved by finding and removing duplicate fonts installed in the local ~/Library/Fonts folder, that are conflicting with standard system fonts.
There is a duplicated font inside ~/Library/Fonts directory, which is conflicting with standard system fonts.
Issue fixed.