some OS doesn't include Garamond font

[TimDaub]

Context

• we use the "Garamond" font face
• on Mac OS where Garamond is included as a font by default, the website looks like this:

where as on Windows 10/11, the Garamond font face doesn't seem to be embedded by default

Deliverables

• Find websafe font that can be used instead of Garamond when its not available
• Implement backup font in design.css

Time estimate

• 1-2h

[il3ven]

I am on Windows and I have Garamond font. The website looks the same as the first screenshot.

[TimDaub]

interesting observation @il3ven. But do we agree that this has to do with Garamond typeface missing based on OS?

[il3ven]

@TimDaub This is how things look on my computer.

The font Garamond is not present in my Windows 10. The css mentions Garamond, sans-serif so it fallbacks to a generic sans-serif font. In my case it is Arial. (I checked the dev tools)

Arial is pretty close to Garamond. In your screenshot, I don't know why it doesn't fallback to a generic sans-serif. Rather it goes for a serif font.

[TimDaub]

OK makes sense. In any case we definitely want to fall back to a "sans-serif" font if Garamond isn't present. The screenshot in the original description clearly has a serif font. To me, the bug fix deliverable can just be making sure that a sans-serif font (any) can be felt back on.

In case someone wants to do this issue, I have a user with the respective system that can help us reproduce the bug.

Additional information is that the original faulty screenshot was taken on Google Chrome.

[il3ven]

To me, the bug fix deliverable can just be making sure that a sans-serif font (any) can be felt back on.

I agree. However, I think the CSS is correct and it should fallback on any sans-serif font. It does exactly that on my computer.

Let me try replicating it.

[il3ven]

After trying 3 different versions of chrome, two OS and 3 machines. I have been able to replicate it.

The problem is not due to different chrome version nor OS. I found a Windows machine where this was replicable.

The reason - on some machines, Windows include the Garamond font but that font is not the same as Mac. The Windows Garamond font is a serif font.

Here is also an office link showing the font.

The solution can be to replace Garamond with some other safer font or import a font from a URL.

[il3ven]

The solution can be to replace Garamond with some other safer font or import a font from a URL.

@TimDaub Shall I create a PR?

[TimDaub]

The solution can be to replace Garamond with some other safer font or import a font from a URL.

Maybe... What's the most-similar looking, sans-serif, web-safe font to Garamond?

[il3ven]

What about Arial? My computer currently falls back to Arial and the screenshots you share look similar to what I see here.

Website using Arial font

[TimDaub]

Not sure. I kinda wanna have Garamond. I'm asking StackOverflow for help: https://stackoverflow.com/questions/69839934/font-family-garamond-sans-serif-wont-always-produce-sans-serif-font-face-wh

[TimDaub]

You know what could also be is that the system doesn't find a sans-serif version of Garamond and hence just switches to the next best default font (on Mac OS it's Helvetica).
Maybe Garamond doesn't have a sans-serif type face:

Check this out:

[il3ven]

This is really interesting. Your mac doesn't have Garamond and is falling back to Helvetica. After a quick search I think Garamond is a serif font.

I see two options

• Use Arial as the default font. I still think it looks quite similar.
• Import a font similar Helvetica using font-face.

[TimDaub]

I suggest the following: We use "Helvetica" as default and we fall back to "Arial". That can be a PR.