Shields breaking text/fonts on some websites

[holdit]

Description

Since version 1.39.111 the text on some websites started to look wrong: wrong font, wrong spacing, wrong line hight, etc. It only happens on some sites. So far I've only noticed it happening on pages without custom fonts (eg: happens on old.reddit.com with the default theme, but not when a custom theme with a different font is used. the new reddit UI is also fine).

This seems to be related to Shield's "Block fingerprinting" option (standard or strict) as disabling it fixes the problem.

Steps to Reproduce

1. Enable Shields and set "Block fingerprinting" to "standard" or "strict".
2. Reboot the browser.
3. Access a page like: https://old.reddit.com/r/worldnews/

Note: Only seems to happens on pages without custom fonts. A sub (eg: Brave's sub) with a custom theme looks fine (unless you disable custom themes on your reddit account). Please note that this issue is not limited to reddit.

Actual result:

Wrong spaces, line height, wrong font (number 26):

Wrong font:

Expected result:

Correct spaces, font, etc:

Using the correct verdana font:

Reproduces how often:

Most of the times the text looks wrong. A browser restart is sometimes needed after enabling Shields' privacy option to see updated results.

Brave version (brave://version info)

Tested with:

• Stable: Version 1.39.111 Chromium: 102.0.5005.61 (Official Build) (arm64)
• Nightly: Version 1.41.17 Chromium: 102.0.5005.61 (Official Build) nightly (arm64)

Machine:

• MacBook Pro (16-inch, 2021)
• Apple M1 Max
• 32GB RAM
• macOS Monterey 12.4 (stable) and 12.5 (beta)

According to this comment, it's also happening on Windows 10: https://old.reddit.com/r/brave_browser/comments/uwuad0/release_channel_139111/i9x2ow8/

Version/Channel Information:

Can reproduce the issue on the current stable and nightly versions.

Other Additional Information:

No issues when the privacy option of Brave Shields is disabled.

Miscellaneous Information:

More reports on reddit: https://old.reddit.com/r/brave_browser/comments/uwuad0/release_channel_139111/i9ty88d/

[ryanbr]

I'll test Brave/m1 later, but for Windows (w11): @holdit

[holdit]

@ryanbr I see the same.

Reddit isn't the best example because the site looks fine, but all that is supposed to be using Verdana as font. Instead, it's using Arial(?) for the titles, comments, etc, and Times New Roman(?) in the search bar. If you disable fingerprint blocking, restart Brave (very important), and visit the page again, the text will be wider because it's using the proper font.

The place were this issue manifests itself well is on Todoist(.com) dashboard. You'd need to have an account to check it out, but look at the spaces between the fonts on these two screenshots.

If I allow fingerprinting (text looks fine):

If I use the standard or strict fingerprinting blocking (spacing is all messed up):

[holdit]

Found another website where the font change also happens: https://www.ispreview.co.uk/

[ryanbr]

Tested in Brave Beta: (win11). I'll ask internally. I can reproduce on macOS, Win11 seems fine on this site.

[Latias4Ever]

I can confirm that this is happening to me as well. Started since the 26th, and the sites where the fonts start changing seem random, one time one particular site is changing fonts, another time it's a different site.

Here's the latest example I have. Shields on:

Shields off.

This is on Windows 8.1.

[holdit]

Another example, NPR's text website: https://text.npr.org/1101971227

Could this be some new fingerprint blocking that was added to the aggressive protection, but is also being used by the regular option? I don't know, maybe something that doesn't reveal the real list of fonts available by the system?

Again, a browser restart after enabling/disabling fingerprint blocking may be required for us to see the differences. Here's a gif showing the difference:

[Cattae]

+1 Brave Community https://community.brave.com/t/brave-shield-affecting-fonts/398575

Other recent font issues which may or may not be related.
https://community.brave.com/t/the-font-courier-new-is-not-showing-any-more/398502
https://community.brave.com/t/weird-blurry-fonts-when-brave-shields-enabled/398392
https://community.brave.com/t/font-not-working-properly-on-latest-v1-39-111-desktop-revision/398074
https://community.brave.com/t/papyrus-font-not-displayed-in-brave-browser/397959
https://community.brave.com/t/brave-browser-displaying-thin-fonts/380058

[tremklekmz]

Have the same issue on Windows 10.

Besides disabling fingerprint blocking, changing the font names in css from lowercase to capitalized also fixes the issue for me.

Screenshots:

• Fingerprint blocked, lowercase font name
  
• Fingerprint blocked, capitalized font name
  

[ccampbell]

Just noticed this in github itself, you can see in the star count section:

With shields on:

With shields off:

[holdit]

Found another one. Feedly.com login page, with tracking protection "standard":

Tracking protection "off":

[ryanccn]

I have the same issue on macOS arm64 (M1), most notably on GitHub and some other platforms. I had to switch to other browsers because it was making the UI messed up.

For instance, this is what this current page looks like:

The web fonts aren't working and have fallbacked to system fonts. These fonts do work with Shields turned off.

[ryanccn]

Notion also doesn't have fonts anymore.

[gmacar]

Same bug on macOS arm64 (M1).

[spiderkitten]

Yes I am seeing this on Notion.

It resolves itself when I turn Shields off.

Edit to add: after playing around, leaving shields UP but Allowing Fingerprinting also resolves it. Toggling the finger printing to allow/block seems to be the thing that changes it.

Also, removing ANY of the listed fonts for the page in the CSS on the Inspect screen fixes it temporarily (until refresh or opening a new page).

Version 1.39.111 Chromium: 102.0.5005.61 (Official Build) (x86_64)
Mac OS Mojave 10.14.6

[gmacar]

It resolves itself when I turn Shields off.

yes but it doesn't make sense, because one of Brave's major strengths are Shields and/or the (partial) protection against fingerprinting. If I had to turn them off, I might as well use another browser.

[holdit]

Fingerprint protection is also enabled by default (Standard) for everyone, I think, so it's probably something that should be prioritised.

For now I've disabled the setting. Annoying, but the browser still works.

Side note: for anyone using the option to clean data when closing the browser, keep in mind that checking the "Site and shields settings" also resets the fingerprint protection option... so it will be enabled next time you open the browser.

[TNLuke]

This is happening on our website on MacOS 11.6.6. Allowing fingerprinting fixes it. We are using a "system font" stack based on CSS-Tricks and normalize.css:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

[huylv]

Reporting the same issue on macOS 12.4.

Computed font-familiy: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

Shields up: Rendered font: Helvetica Neue

Shields down: Rendered font: .SF NS

Workaround: Disable "Prevent sites from fingerprinting me based on my language preferences" in brave://settings/shields.

[holdit]

I've tested @huylv workaround and it works.

Even if block fingerpriting is set to "strict", fonts work fine if the "Prevent sites from fingerprinting me based on my language preferences" option is disabled.

[ryanccn]

Yes @huylv's workaround works for me too

[holdit]

Also happening on ghacks: #23391

[bsclifton]

This was fixed with brave/brave-core#13550 - which should have been released in product version 1.39.120 (released June 8th)

For folks experiencing the issue - can you please update?

I'll close this issue out as a duplicate of the original issue #22605

[holdit]

@bsclifton Is this supposed to be working on 1.39.122?

I'm still seeing the same problem on some sites with Standard + "Prevent sites from fingerprinting me based on my language preferences". For example, the Feedly login page:

Same with ispreview.co.uk and other sites/pages I posted above.

I'm seeing the same on 1.40.96 beta.

So, for me at least, the problem isn't fixed.

[holdit]

The problem is back for me on Todoist with 1.41.96.

Active variations:
AdRewardsStudy:NextPaymentDay
AdServingStudy:DefaultAdNotificationsPerHour=10/MaximumAdNotificationsPerDay=100/MaximumInlineContentAdsPerHour=12/MaximumInlineContentAdsPerDay=60
BraveAds.UserActivityStudy:Triggers=NTPSI/TimeWindow=15m/Threshold=0.0/IdleTimeThreshold=5s
BraveDebounceStudy:Enabled
ConversionsStudy:NewDefaultPattern
Default1pBlockingStudy:Disabled
DisableReduceLanguage:Enabled
EphemeralStorageStudy:Enabled
ExtendedVariationsSafeMode5:SignalAndWriteViaFileUtil5
FirstPartyEphemeralDomainBlockStudy:Enabled
ForceDisableBlinkFeatures:Enabled
MacCoreLocationBackendStudy:Enabled
NativeCosmeticFilteringStudy:Enabled
PartitionBlinkMemoryCacheStudy:Enabled
PartitionConnectionsByNetworkIsolationKeyStudy:Enabled
PermissionLifetimeReleaseStudy:Enabled
RequestAdsEnabledApiStudy:Enabled
SpeedreaderReleaseStudy:Enabled

[angelicapuertotello]

@kjozwiak
From user emilmelnikov@gmail.com:

I would like to reopen the ticket: it seems that fonts are broken again in v2290.

Ref: https://todoist.zendesk.com/agent/tickets/685144

[AshikaDoist]

I have another user reporting this issue, seems it has returned.

Interesting.. I switched over to using Brave Browser a while ago and maybe this issue only exists there. I tried on Chrome and it looks much better.

No idea why it'd look different - every other site I use works/looks the same

ref: https://todoist.zendesk.com/agent/tickets/694332

[jonathanawesome]

I experienced this issue and arrived here after some basic troubleshooting and finding that turning down shields allowed our font stack to work as expected. At the time, I was running macOS 12.4 and a slightly outdated version of Brave.

The font stack is Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif, and the font that I was seeing was avenir. So the browser was skipping Inter (despite Inter being installed correctly and having worked as expected with this font stack previously) and also skipping the two apple system font declarations. Again, turning down shields allowed the stack to perform as expected.

Next, I updated Brave to 1.42.86, which was after the fix announced above, and that did not improve the issue. Only after updating macOS to 12.5 was the issue resolved.

Hope this helps!

[pilgrim-brave]

I have opened a followup issue so we can track these 3 new reports (two about Todoist and the latest one from jonathanawesome). Also I am testing a fix locally.

[AshikaDoist]

I’m having a spacing issue using todoist in my brave browser. Attached is a screenshot. Thank you for your assistance.

ref: https://todoist.zendesk.com/agent/tickets/692482

[pilgrim-brave]

AshikaDoist, this issue has been fixed in brave/brave-core#14489, and the fix is being rolled out to all Brave users. Thank you for your report; it was very helpful. And thank you for your patience.

[dmetzler1988]

I have the same issue - but with custom fonts (installed locally on my mac (OS 12.5) on the latest Brave Browser (Version 1.42.88 Chromium: 104.0.5112.81 (Official Build) (x86_64)).

If i disable the "Block fingerprint" option it is fine again. With "Default" it uses a wrong font.
On chrome and other browser it works fine.

[bsclifton]

@dmetzler1988 you should be fixed now if you update to the latest version (1.42.95). Please let us know 😄

[dmetzler1988]

@bsclifton i currently have the version 1.42.97 - and still same issue. If shields are activated, the fonts are wrong (times new roman i think). If i deactivate the shields, it works as expected. The problem occurs on inbox of outlook.office.com - maybe this will help.

[bsclifton]

@dmetzler1988 thanks for confirming - what website are you noticing this on?
cc: @pilgrim-brave

[dmetzler1988]

@bsclifton i noticed this on outlook.office.com - on each mail with the custom fonts.
But today i saw something weird which maybe helps - or not xD
I started my Mac, opened my fresh instance of Brave Browser and navigated to the Outlook website. The custom fonts was displayed with active shield.
Later on the day i needed to restart my Mac. So i shut down and start it again. Opened again a fresh instance of Brave Browser, navigated to the Outlook Website and now the custom fonts can't be displayed with active shield. I deactivated shield and reload the page - the custom fonts are displayed. Then i activate the shield again and i see again the fallback font.
Just as information - it seems now, that it works sometimes and sometimes not. The Brave Version is the same than on my post from yesterday.

[dajare]

@bsclifton : At the risk of adding a "me too" ... me too! I'm on MacOS 10.14.6 (stuck on Mojave since I need 32 bit libraries) + Brave "Version 1.42.97 Chromium: 104.0.5112.102 (Official Build) (x86_64)".

I have custom CSS on Wikipedia that uses Merriweather as the main text font. Just recently (in the last week) Brave began not to load Merriweather (on odd occasion it does, unhelpfully). If I turn off "Brave Shield" for https://en.wikipedia.org/, the problem disappears. On that site, I'm content to leave shields down ... but this ought not to be, as I understand it.

[AshikaDoist]

Reports are resurfacing of this happening on Todoist:

The overall display interface is stripped down- letterspacing is oddly spread out and the date display for each entry is hard to read- characters are truncated on the top and bottom. It's hard to use the app when I'm straining to read it. I've logged out and back in several times and refreshed the page repeatedly. See attached screenshot.
Please advise, looking forward to your reply!

User says:

Hi Ashika- Yes, I am using Todoist on Brave! So strange that the issue just surfaced after I've been using Todoist on Brave for a while now... thanks for the update and I'll check with the Brave folks about their work to address this.

ref: https://todoist.zendesk.com/agent/tickets/698451

[AshikaDoist]

Another TD user:

Also in Brave browser, there are extra spaces between words.

ref: https://todoist.zendesk.com/agent/tickets/698475

[pilgrim-brave]

Hi Ashika, thank you for these reports. To the best of my knowledge, this bug was fixed in Brave 1.42.97. Can you find out which version these users are on? Visiting brave://version in a new tab will show you the details I need to confirm if this is still happening.

[dajare]

Hi Ashika, thank you for these reports. To the best of my knowledge, this bug was fixed in Brave 1.42.97.

My entry, three comments above, includes the identification of Brave 1.42.97 as the version which is throwing up problems for me on this front.

[spiderkitten]

Apologies if this reopens the issue, but I am still having this problem on Notion. It actually only started in the past couple of days. I originally had this issue all the way back when it was first an issue, but then it was fixed, and now its back again, but this time instead of weird spacing its changing the font to be different/larger. Unfortunately I cannot share a screenshot as its happening on pages I can't share publicly. But, it's happening on the gallery view of databases in notion.

Brave says it's up to date.

Brave version 1.42.97 Chromium: 104.0.5112.102 (Official Build) (x86_64)

Here's a screenshot of the version:

[YoavRheims]

Since Version 1.46.144 Chromium: 108.0.5359.128 (Official Build) (64-bit) on Windows 11., I have also the identical issue.

[kjozwiak]

@YoavRheims mind providing the websites that you guys are having issues with? @spiderkitten sounds like you had issues with https://todoist.zendesk.com/agent/tickets/698475? Are you still seeing the same problems? It's been sometime since the 1.42.97 release and we've had a few font fixes in between then and now.

[spiderkitten]

@spiderkitten sounds like you had issues with https://todoist.zendesk.com/agent/tickets/698475? Are you still seeing the same problems? It's been sometime since the 1.42.97 release and we've had a few font fixes in between then and now.

I don't know what the todoist link is, I get an error that the page doesnt exisit. But the issue I was having in Notion seems to be all good for me right now, thank you.

[bsclifton]

@spiderkitten glad to hear it's OK now 😄

The thing I'd ask folks to check shield settings specifically on the site where they have the problem and ensure you have Block fingerprinting (or Allow fingerprinting, but that's not preferred) and not Aggressively block fingerprinting

[fischfood]

I wonder if people still having issues are on a site that has a font-family set that the user has locally, but the site itself does not have the script providing the files

I noticed a discrepancy on a personal site I use for a simple redirect (basically Jira set to the start of this week + 5 days, with a specific view).

I have the page output "Redirecting to Jira, week of 2023-06-19", but since I'm the only one using it, I didn't bother throwing in a google font call, I just have it set to use a local font for Montserrat.

If I have the google font script in there, it works for both shields up or down.

If I don't have that script and am relying on the local font, shield up blocks it, shields down (or allow fingerprinting) and it loads fine.

[stako]

This issue persists. Locally installed fonts are appearing on pages with fingerprinting allowed, however the fonts are not appearing on pages with fingerprinting blocked

I see that the previous fix was to add Helvetica to the fonts whitelist. Perhaps Montserrat & Roboto could be added as well.

[kjozwiak]

This issue persists. Locally installed fonts are appearing on pages with fingerprinting allowed, however the fonts are not appearing on pages with fingerprinting blocked

I see that the previous fix was to add Helvetica to the fonts whitelist. Perhaps Montserrat & Roboto could be added as well.

@stako if you're still having issues with the above, I would suggest creating a new issue using the template. Add as much information as possible. This way it will get looked at and triaged rather than replying to an older issue that has been closed for some time 👍

[dontdieych]

This issue persists. Locally installed fonts are appearing on pages with fingerprinting allowed, however the fonts are not appearing on pages with fingerprinting blocked

I see that the previous fix was to add Helvetica to the fonts whitelist. Perhaps Montserrat & Roboto could be added as well.

Same here. Override font using stylus addon does not working with Block fingerprinting ON.

Brave Browser 128.1.69.168

Operating System: Fedora Linux Asahi Remix 40
KDE Plasma Version: 6.1.4
KDE Frameworks Version: 6.5.0
Qt Version: 6.7.2
Kernel Version: 6.10.9-401.asahi.fc40.aarch64+16k (64-bit)
Graphics Platform: Wayland
Processors: 4 × Apple Avalanche (M2), 4 × Apple Blizzard (M2)
Memory: 7.3 GiB of RAM
Graphics Processor: Apple M2
Product Name: Apple MacBook Air (15-inch, M2, 2023)�
U-Boot Version: 2024.04�