Default fonts are broken

[mihkeleidast]

Describe the bug After updating from zenika/alpine-chrome:80 to a newer version (I've tried both zenika/alpine-chrome:81 and zenika/alpine-chrome:89 and both fail, zenika/alpine-chrome:77 and zenika/alpine-chrome:80 behave as expected), default fonts are not rendered correctly. E.g. it does not matter if I specify my font-family to be serif/sans-serif, the result is always the same. Additionally, bolds are not rendered at all.

We're using a tool to do visual regression testing and this is the diff image we're getting after upgrading:

To Reproduce

Hard to give exact reproduction steps. Try setting the default font-family to serif/sans-serif and inspect that there is visually no difference.

What is the expected behavior? I would have expected fonts to not change after upgrading.

What is the actual behavior? Fonts have changed, bold are not rendered. serif/sans-serif setting in CSS is not respected.

Possible solution I saw the custom fonts config here: https://github.com/Zenika/alpine-chrome/blob/master/local.conf#L8

I would expect that the "Main sans-serif font name goes here" text is a placeholder in the Alpine documentation and should really be set to an actual font family.

If my hunch is incorrect, however, I'm not sure what the issue is... or if it is even an issue with this image!

Versions

Software	Version(s)	How-to
Chromium	89.0.4389.72	docker container run -it --rm --entrypoint "" zenika/alpine-chrome:89 chromium-browser --version
Docker Engine	19.03.12	docker version

[mihkeleidast]

After a bit of trial and error, I found a workaround for this issue. I need to add freesans to my CSS font stack before the default sans-serif final fallback. But having an extra family just for tests is not ideal.

[dloibl]

I have the same problem. Is there a different solution than fixing it in css as @mihkeleidast suggests?

[jlandure]

Hi @mihkeleidast @dloibl 👋

Related to #106

We have to check what are the difference between the versions. Perhaps Alpine, Chrome, this repo has changed also the font to embed... We have to investigate! Thanks for the issue 👍

[theJohnnyBrown]

Getting a similar issue here

[codingholt]

Same issue here, any updates?

[kldzj]

This issue seems to persist, has anybody found a fix for it?

[mctep]

I had a similar issue. In my case Chrome could not find Arial font. So I've just installed it in my Dockerfile:

RUN apk --no-cache add msttcorefonts-installer fontconfig && \
    update-ms-fonts && \
    fc-cache -f

From here