Issue with font in Chrome only (from 893)

[gigamorph]

Problem Description:

• Diacritic looks bold on PC and missing on Mac but looks good in other browsers
• Diacritic shows error/image

Expected Behavior/Solution: Shouldn't do this. Looks like font doesn't support these diacritics in Chrome. What are the options? First priority if fixing the error/image. Deprioritizing the bold glitch.

Requirements: List of details required for the completion of the issue or requirements for the feature/bug. This can also include requirements that lie outside of the teams such as new design docs or clarification from an outside source.

Needed for promotion: If an item on the list is not needed, it should be crossed off but not removed.

• [x] explore options
• [x] Clarify if font-replacement takes place only at diacritic errors or on the whole page
• [x] make decision
• [ ] ~Wireframe/Mockup - Mike~
• [ ] ~Committee discussions - Sarah~
• [X] Feasibility/Team discussion - Sarah
• [ ] ~Backend requirements - TBD~
• [x] Frontend requirements- TBD
• [ ] ~Questions~
• ~List of questions for discussions. Answers should be documented within the issue.~

UAT/LUX Examples:

• record TST: https://lux-front-tst.collections.yale.edu/view/object/c1d5e2d4-a289-467c-8699-946b73edcc39
• record TST (mac): https://lux.collections.yale.edu/view/object/4bb1e175-8f8b-4b39-9762-0161d6a76c88

Dependencies/Blocks:

Related Github Issues:

Related links: Bugherds:

• https://www.bugherd.com/projects/284041/tasks/1363
• https://lux.collections.yale.edu/view/object/c1d5e2d4-a289-467c-8699-946b73edcc39
• https://www.bugherd.com/projects/284041/tasks/538
• https://lux-front-sbx.collections.yale.edu/view/object/4bb1e175-8f8b-4b39-9762-0161d6a76c88

Wireframe/Mockup: Place wireframe/mockup for the proposed solution at end of ticket.

[roamye]

From Kam in old tix: "Update 11/29/23: It appears the font LUX is using does not support diacritics in Google Chrome but other browsers are supported. Adding a fallback font would mean the current default font would be replaced in favor of a diacritic supported font in cases where that default font does not support the diacritics. However, this could impact styling. Below is an example of the diacritic supported font vs the font that does not support diacritics. The supported font is smaller compared to the unsupported font. This would have to be a universal change meaning the font size impact would be throughout the app and would also have to be considered.

NOTE: In the two screenshots, the computed font size for each header text is 49.6px or 3.1em but appears smaller.

Supported:

Unsupported: "

[roamye]

Per comment above should this issue be proposed-closed?

I can bring to ticket forming for discussion but if it is better suited for IT meeting let me know.

@kamerynB @prowns

[kamerynB]

@roamye I think I need to configure backup fonts in the frontend. I have to discuss this with @gigamorph again. He had a better understanding of this than I did. This should remain open until I confirm that.

[kamerynB]

I've moved this to Prioritization because it just requires added a backup font.

@prowns @roamye @jffcamp

[roamye]

Approved by UAT. Will need to be tested by someone with Chrome as the ones in tst/prod have the updated change for Windows.

[kamerynB]

@roamye This appears to be fine in Chrome on Mac. Refer to the screenshots attached.

[roamye]

Both test and prod functioned correctly for windows so a mac user was needed to test the UAT. Seong and Xinjian have macs and were able to confirm this issue functions as it should in PROD with chrome. Closing.