System uses NotoSans to render content, the font file loads correctly (see it in the network while using inspector). The HTML select displays with serif fonts.The CSS rules applied to select and option is font-family: NotoSans. In this instance i think there should be a fallback like font-family: NotoSans, sans-serif.
Created attachment 115975 [details] [review] Bug 27566: Add generic font family to prevent unstyled select tags This patch adds a default font family "sans-serif" to the OPAC CSS as a workaround for this Firefox bug: font-family isn't honored in `<option>` element within `<select>` dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148 To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the OPAC main page in Firefox. - Click the search type dropdown. The options should be styled using your system's default sans-serif font rather than a serif font.
I can't replicate this bug on Firefox 86 or Firefox 78.8.0esr (desktop Linux) or Firefox for Android. Please would you provide more information about how to reproduce the error or provide a screenshot of where the serif font appears.
Created attachment 118369 [details] Screenshot of OPAC dropdown in Firefox on macOS
Thanks Owen! I'm seeing something different in my browser so I don't think I can test this patch unfortunately.
Hya, i'm on ubuntu, also couldn't get the bug on firefox or chrome. I think that you'd get the bug visible on gnome web, which is "a sort" of safari. Regards
Sorry guys actually looks like you can't replicate using gnome web
For what it's worth, we are seeing this bug with Firefox ESR in Windows. Sadly, I can't test this myself either, but I'll try and see if I can find some other combination that shows the error outside windows.
Created attachment 118568 [details] [review] Bug 27566: Add generic font family to prevent unstyled select tags This patch adds a default font family "sans-serif" to the OPAC CSS as a workaround for this Firefox bug: font-family isn't honored in `<option>` element within `<select>` dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148 To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the OPAC main page in Firefox. - Click the search type dropdown. The options should be styled using your system's default sans-serif font rather than a serif font. Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
This patch won't hurt anything - changes are standard CSS and will be ok, I checked for regressions in a few browsers. I hope to do another check from Windows, but really happy if someone beats me to it.
Created attachment 118591 [details] [review] Bug 27566: Add generic font family to prevent unstyled select tags This patch adds a default font family "sans-serif" to the OPAC CSS as a workaround for this Firefox bug: font-family isn't honored in `<option>` element within `<select>` dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148 To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the OPAC main page in Firefox. - Click the search type dropdown. The options should be styled using your system's default sans-serif font rather than a serif font. Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Thx Henry! Counting my Sign off for QA in this case :)
I'd forgotten I could test this via the sandboxes! I can confirm that the serif font was appearing when using Firefox on Windows and that this patch fixes the issue. I didn't notice any other visual changes when the patch was applied.
(In reply to Henry Bolshaw from comment #12) > I'd forgotten I could test this via the sandboxes! I can confirm that the > serif font was appearing when using Firefox on Windows and that this patch > fixes the issue. I didn't notice any other visual changes when the patch was > applied. Same here :) Totally forgot I could use the sandboxes from my Windows environment yesterday.
Pushed to master for 21.05, thanks to everybody involved!
This patch was very wrong, and I'm sorry I made it. It breaks the expected custom font-loading completely. I have what I think is a correct patch. It could be added as a follow-up or the original could be reverted. There is no part of the original patch which is correct.
Now you tell us! :O
Created attachment 119322 [details] [review] Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags This correction fixes the previous patch which was dumb and stupid. This patch adds a default font family "sans-serif" to the OPAC CSS as a workaround for this Firefox bug: font-family isn't honored in `<option>` element within `<select>` dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148 To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the OPAC main page in Firefox. - Click the search type dropdown. The options should be styled using your system's default sans-serif font rather than a serif font. - Check that other areas of the OPAC are still styled with the correct "NotoSans" font. An error with this patch should be obvious when looking at a logged-in user's checkouts.
Oh I wait for backport then. We may revert from master.
Created attachment 119560 [details] [review] Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags This correction fixes the previous patch which was dumb and stupid. This patch adds a default font family "sans-serif" to the OPAC CSS as a workaround for this Firefox bug: font-family isn't honored in `<option>` element within `<select>` dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148 To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the OPAC main page in Firefox. - Click the search type dropdown. The options should be styled using your system's default sans-serif font rather than a serif font. - Check that other areas of the OPAC are still styled with the correct "NotoSans" font. An error with this patch should be obvious when looking at a logged-in user's checkouts. Signed-off-by: David Nind <david@davidnind.com>
Testing notes: - Tested on Ubuntu 18.04 with Firefox 87 64-bit and Firefox Developer Edition 88.0b9 64-bit - Didn't notice any change with the drop down list - was the NotoSans or a sans-serif font - I did notice on the checkouts summary page - some text was a serif font including the title: applying the patch and updating the CSS fixed it!
Created attachment 120031 [details] [review] Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags This correction fixes the previous patch which was dumb and stupid. This patch adds a default font family "sans-serif" to the OPAC CSS as a workaround for this Firefox bug: font-family isn't honored in `<option>` element within `<select>` dropdown https://bugzilla.mozilla.org/show_bug.cgi?id=1536148 To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the OPAC main page in Firefox. - Click the search type dropdown. The options should be styled using your system's default sans-serif font rather than a serif font. - Check that other areas of the OPAC are still styled with the correct "NotoSans" font. An error with this patch should be obvious when looking at a logged-in user's checkouts. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
This also fixes the item type descriptions on the advanced search that had suddenly started to show in serif font for me :)
Pushed to 20.11.x for 20.11.06
Doesn't apply cleanly to 20.05, please rebase if needed. Thanks!