Firefox 109.0.1 (64-bit) Mac Ventura 13.1
Google search page and a lot of sites (not all for example this support page) are having trouble rendering fonts.
I have attached screenshots which demonstrates the problem. The thing I do not understand if I go to the developer tools and alter the "font-family" from "font-family:Ariel, Sans-serif" to just "font-family:Sans-serif" bingo the font renders, the screenshots show this.
Other browsers like Chrome are having no difficulties.
There must be something simple I am missing, I have done a search but nothing is standing out as a solution.
Help would be appreciated. Cheers
Alle Antworten (5)
URL of the screenshot issues would help others to go and see what if they get the same issues or not?
This is usually caused by a problem with a specific font and you need to identify this font and fix this.
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).
You can right-click and select "Inspect" to open the built-in Inspector with this element selected.
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.
Thank you for the replies
The url is just the google search page - google.com.
The font causing the problem is Ariel a system font. It is not causing a problem in any other browser, word or text file - any other application.
If I open a page that is not using Ariel (rendering fine) and then change the font family in the inspector styles pane to Ariel the problem appears?
I took two new screenshots of the support page textarea I am typing this reply in, the page/textarea font-family is "Inter,X-LocaleSpecific,sans-serif" rendering fine, change it to Ariel in the inspector and the encoding problem.
I checked the Font Book and no double of Ariel, as mentioned all other apps handle it fine.
let me know any other information you may need.
You should look at the Fonts tab in the right panel to see what font Firefox is trying to use as you may have a font that identifies as Ariel compatible.
I went down the remove duplicate fonts which Arial was one, restarted machine and all was repaired exept one page an error page - very strange - https://support.mozilla.org/fxa/callback/?code=ca57c3319977b98123f3d0aae00550ff485bc58a1a7aa135911c6e873172a1c5&state=b7fN9YOGIdCMieZprk4y0g6bgQS2HALX&action=signup
Looked at the font with the font inspector and that is able to render the font (as shown in the screenshot bottom right) but not on the rendered actual page! (same screenshot)
Not sure who the culprit is.
Thanks for responses.