1576820 - CSS @font-face family is not rendered in select option

Status: NEW

(Core :: Layout: Form Controls, defect, P3)

Description

[samuelberisha]

Attachment: select-opened.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

Steps to reproduce:

1. Create a simple HTML select
2. Give it a font-family with css.

This Bug happened on my mac with macOS Mojave (10.14.5) installed

Actual results:

The select has the right font-family, but if you open the select, the options have the wrong font.

Expected results:

If you open the select, the options should have the same font as the select.

Comment 1

[Raluca Popovici, Desktop QA]

Attachment: test.html

Comment 2

[Raluca Popovici, Desktop QA]

Attachment: font.png

Comment 3

[Raluca Popovici, Desktop QA]

Hi,
I managed to reproduce this issue on Mac 10.14.5 and Windows 10 with Firefox Release 68, Nightly 70. I used "test.html" to test this and the font displayed is not the right one(please see attached screenshot)

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Verdana is not a font installed on Mac, so you're falling back to the next font, and I think this is working as expected.

Reporter, is this about @font-face fonts? if so, that's expected because we render the <select> popup in a different process.

Comment 5

[samuelberisha]

Yes it is about @font-face fonts. Why is that the expected behaviour? For example, if I give my select the "Roboto" font, which I imported from Google fonts, I want the option fields in the same font. Chrome and Safari seem to do it right.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I meant that the behavior is expected given our current implementation, I still think it's something worth fixing.

FWIW, when I tested this in the past, WebKit didn't seem to do this right either. Maybe they fixed it, or maybe there are multiple code paths involved there, dunno.

Comment 9

[Antix Development]

Hi, Will this ever be done? Currently it seems that the only workaround is to use Chrome and not bother with firefox.. which is a pretty crap workaround :(

Comment 10

[Harry Wiener]

(In reply to Antix Development from comment #9)

Hi, Will this ever be done? Currently it seems that the only workaround is to use Chrome and not bother with firefox.. which is a pretty crap workaround :(

This workaround has always worked well for me

Comment 13

[rgelbhb]

Live reproduction of the problem.

Comment 14

[j.deboysere.pro]

Hello,

Will this problem ever be solved? Custom fonts are very common today, how come in 2024 this problem is still with us? It's quite absurd.

We and our customers have the same problem with Firefox on Windows 11: when the drop-down menu is opened and a custom font is used on the SELECT (Roboto, Proxima Nova...), the font is not used and Firefox automatically uses the next font specified in the css styles (serif and sans-serif work, for example). It seems that only system fonts can be used.

We tried several sites with Firefox on several Windows computers, and the problem occurred every time, even with different fonts. We believe this problem potentially affects all Firefox users on Windows.

A simple visit to https://rgelb.github.io/ffsample/index.html (with Firefox and Windows) demonstrates the problem!
This link was provided by Raluca Popovici 5 years ago (!!).

Please fix it.... !