1773699 - Font smoothing not working on microsoft office (onedrive's web-based Word editor)

Status: NEW

(Core :: Layout: Text and Fonts, defect)

Description

[Andrés Segarra]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:100.0) Gecko/20100101 Firefox/100.0

Steps to reproduce:

1. Log in with a microsoft 365 account (not sure if necessary)
2. Create a new word document (word.new)
3. Start to write

Actual results:

The font looks jagged: there is not font smoothing like in every other website.

Expected results:

Font smoothing should work as in every other website, like this one. In contrast, it does work in docs.google.com

Comment 1

[Andrés Segarra]

Attachment: firefox vs edge

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[Daniel Holbert [:dholbert]]

I can reproduce this (using Linux, specifically Ubuntu 22.04). I have a (free) Microsoft account but have never really used OneDrive or Word or Office365, FWIW, but I was still able to get to a place where this was reproducible.

My STR were:
(1) Visit https://onedrive.live.com
(2) Log in with my (free) microsoft live account
--> This takes you to a "My Files" folder-view with some default files.
(3) Decline the paid account invitation (button labeled "No Thanks" or something like that)
(4) Double-click the Word document called "Getting started with OneDrive" (for me, this is the only standalone i.e. non-folder file there)
(5) Look at the text rendering in that document; compare Firefox to a Chromium-based browser.

ACTUAL RESULTS: Text looks a little thicker/nicer in the Chromium-based browser.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot from dholbert's STR (Firefox on left, Chrome on right)

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #4)

I can reproduce this (using Linux, specifically Ubuntu 22.04).

UPDATE: this was wrong -- I can't reproduce the thing that the reporter screenshotted.

I'm actually seeing an entirely-different issue -- the rendering-difference that I'm seeing actually seems to just be a color-choice issue! Chrome is just rendering the page with a darker text color. That seems to be because the document has color: windowtext on its black-looking text. In Chrome, windowtext resolves to rgb(0,0,0) i.e. black, but in Firefox, it resolves to rgb(61, 61, 61), on my system at least.

I think the original reporter is seeing a different issue from what I'm describing here -- it looks like the reporter's screenshot shows grayscale antialiasing in Firefox vs. colorful antialiasing in Edge. I can't reproduce that discrepancy locally -- I'm getting colorful antialiasing and nice smooth-looking letters when I create a new word doc with Calibri.

So, I'll spin off a separate bug to consider what (if anything) we might want to do about this windowtext discrepancy; and I'm not sure offhand what sorts of system-specific factors might contribute to giving Firefox grayscale antialiasing for the reporter.

Reporter: would you mind providing what OS (and OS-version) you're on?

Comment 7

[Daniel Holbert [:dholbert]]

(I filed bug 1773795 for the issue that I'm seeing with windowtext being not-fully-black in Firefox, FWIW.)

Comment 8

[Andrés Segarra]

Absolutely! I'm in fedora 36 KDE
I don't think there is any smoothing though. You can see physically in the monitor that the characters are made of pixels, and there are no subpixels. If there is anything I can do to help please tell me =)

Comment 9

[Andrés Segarra]

Check your screenshot, you can see some RGB things around the letters but in mine it is made of only pixels, like it was pixel-art.

Comment 10

[Andrés Segarra]

Update: I think I know why this bug ocurs:

I opened LibreOffice and started to write in some fonts. Turns out I when I choose calibri the font looks pixelated aswell. I think firefox tries to read calibri from my installed fonts and thus, read my pixelated installed thing, whereas chromium doesnt read my installed fonts.

When I choose another font in word that I don't have installed locally, there are no render issues found. So, is it possible that firefox is checking whereas my font is installed in my system and pulls it from there and chrome just renders the font from the net?

Daniel, please edit that document preview and try to write in calibri, and check if it is pixelated aswell.

Thank you!

Comment 11

[Andrés Segarra]

Here is a thread in the fedora subreddit with a user specifically pointing out how poor rendering appears in outlook (another onedrive/microsoft app): https://www.reddit.com/r/Fedora/comments/dzg74b/bad_small_font_rendering_with_microsoft_fonts/

Comment 12

[Andrés Segarra]

Yeah, I've removed the calibri font from my pc and now firefox loads the font correctly. I don't know if this could be considered a firefox bug, but it's clearly a difference: chromium doesn't load local fonts for microsoft 365.

Comment 13

[Andrés Segarra]

Update: substituted calibri for carlito (a free alternative) and now Firefox loads carlito thinking it's calibri, so I'm ok with this setup myself.

Comment 14

[David Shin[:dshin]]

Ah, so it seems like the root cause is Calibri font having embedded bitmaps.
I can confirm on Ubuntu 20.04, with Calibri installed, specifying font-family: Calibri shows the ugly bitmap, until it is disabled via the config specified in the link.
Should/Can we start disregarding it?
EDIT: Sorry, my intention was not clear there, I was wondering if Firefox should start disregarding bitmap fonts (Which I presume Chrome does)

Comment 15

[Andrés Segarra]

I suppose since this is not a Firefox issue we could close it down. The fact that worked on chromium with no issues is what bothers me: Why does it work there?

Comment 16

[Daniel Holbert [:dholbert]]

(In reply to Andrés Segarra from comment #10)

Daniel, please edit that document preview and try to write in calibri, and check if it is pixelated aswell.

FWIW, it looks fine for me if I use my STR and choose "Calibri" as the font. But if I use devtools inspector and look at the "fonts" panel, it tells me that I am in fact getting "Carlito" under the hood, and as you observed that one seems to be fine. fc-match calibri gives me Carlito-Regular.ttf, too. So: probably, I don't have Calibri locally installed.

(In reply to David Shin[:dshin] from comment #14)

Ah, so it seems like the root cause is Calibri font having embedded bitmaps.

Aha, interesting! See also bug 1714318 comment 37, part "d":

(d) Some font sizes render "blocky" or non-smoothed; not a regression, this is expected if bitmaps are installed.

Sounds like this^ is the crux of the reporter's original issue here, and it's known/expected I guess.

It's interesting that there's a behavior-difference between Firefox and other browsers; I wonder if this is just because other browsers were using a different font (whether a web-font or a different/better local font), or if they're using Carlito with bitmaps disabled, or if they're doing something different entirely.

ni=jfkthame in case this behavior-difference is unexpected/interesting to him, or if he thinks this is just resolvable as expected-behavior (modulo "why does it work in Chrome")