Firefox not properly formatting brave search page
Firefox is not properly displaying text on brave search results. When this page is displayed in chromium based browsers, text is much thicker and has some fragments in bold. Firefox has thin text and no bold fragments. Text is so thin it is barely visible. Problem only happens on win 8.1. On win 10 page displays normally. I compared win 8.1 firefox fonts settings to pc with win 10 and they are the same so page should be displayed similarly.
This is page on firefox on win 8.1 https://i.postimg.cc/Gt4k0DF6/1.png
This is page on win 10 or on win 8.1 in chromium browsers. https://i.postimg.cc/1XbDyzMX/2.png
All Replies (9)
I also noticed font rendering degradation on some sites, for example:
This is page on firefox. Strange sharp fonts with strange letters, looking like font is not properly anti-aliased. https://i.postimg.cc/HWcrTj9T/1.png
And this is on chromium based. Nice smooth fonts https://i.postimg.cc/3J2WD6q6/2.png
If you open the Inspector (ctl+shft+i) and select Fonts in the rightmost panel, it will show you what fonts are being used. There is a lengthy discussion in the following thread which may help. https://support.mozilla.org/questions/1325619
Nice suggestion. So it looks like search results on firefox display main text with Manrope Extra Light for some reason and top buttons like images/videos + safe search setting are displayed with Poppins font. I have no idea what could cause it, I've never heard of these fonts.
I was unable to find font menu in inspector in brave. I used search to look up for "font" and found this code:
"font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;"
However I have no idea which one is used in chromium browsers to display search results like this: https://search.brave.com/search?q=12+Angry+Men&source=web
Helvetic fonts (in particular the one you mention, IIRC) have caused issues for Windows users and there is a bug report (which I don't follow). Roboto was the subject of the thread I linked. An old Reddit thread is linked below (remove blank space in link). https://bugzilla.mozilla.org/show_bug.cgi?id=1714197 https://www.reddit. com/r/firefox/comments/nvhwzm/texts_in_some_sites_wont_load_whats_going_on/
Modified by Terry
Well I looked at bugzilla and it seems they think they fixed issue 10 months ago :/ I do not have helvetica on my pc, I only have Segoe UI so reddit was not helpful unfortunately :(
This page https://allegro.pl/pomoc/dla-sprzedajacych/abc-sprzedazy/jakich-przedmiotow-nie-mozna-wystawiac-na-allegro-a-jakie-mozna-wystawiac-warunkowo-GDeq5WEVqig#gry-i-subskrypcje-do-gier in firefox is using roboto for headers (which I do not have installed!) and open sans for bold text. I do not have open sans either so I have no idea which font is really used.
In brave I found no "font" in this page code using inspector search.
Can you attach a screenshot?
- https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem
- use a compressed image type like PNG or JPG to save the screenshot
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 Font 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.
The Roboto font is downloaded from internet as you can see in the Font inspector, so make sure you do not block remote fonts.
I already linked to screenshots in previous posts. I am unable to upload it to post because this page is bugged and attachment has circle rolling around indefinitely.
regular text in bold in rules tab has code: "font-family: Open Sans,sans-serif;" and in fonts tab I see open sans, to it looks like it downloads proper font but renders it badly.
headers have: "font-family: Roboto,sans-serif;" and in fonts tab browser is using Roboto but renders it properly.
And on this page https://search.brave.com/search?q=12+Angry+Men&source=web
in code I see:
"font-family: var(--main-font);"
for small text and
font-family: var(--brand-font);
for bigger text. Not sure what it means.
In fonts tab, browser uses manrope for small text and poppins for big text.
The rules tab in the inspector shows the variable definitions further down.
So FF is using proper fonts, given by website, but has problems displaying them? Not sure about manrope extra light, maybe this is why bold is not working?
When I untick main-font it switches to something that looks like Times New Roman and is properly formatted (some parts in bold).
Modified by Piterk