google / google/fonts

Letter spacing/kerning/padding issues with Lato

Open
#2,334 12 comments 1 reaction 0 assignees View on GitHub
I Font Bug
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 21h
Merged PRs (30d)
95

Description

Cross-posting from https://github.com/actions/virtual-environments/issues/385.

We have a cron job that builds the [Ember tutorial](https://guides.emberjs.com/release/tutorial/) daily ([source here](https://github.com/ember-learn/super-rentals-tutorial)), running on GitHub Actions. The idea is that the build will follow the steps in the tutorial the same way an end-user would (generate an app, editing the generated files, etc) and capture the command line output along the way, as well as taking screenshots of the app being built using [puppeteer](https://github.com/puppeteer/puppeteer), which uses Chromium under-the-hood.

Since sometime last week ([last good build](https://github.com/ember-learn/super-rentals-tutorial/runs/422227583?check_suite_focus=true), [first bad build](https://github.com/ember-learn/super-rentals-tutorial/runs/424348170?check_suite_focus=true)), things started to render differently in puppeteer in a subtle but noticeable way. You can [see for yourself here](https://github.com/ember-learn/guides-source/pull/1289/files), using the "Swipe" or "Onion Skin" mode to review the differences.

TL;DR fonts a rendering differently (different letter spacing, kerning, padding?):

Screen Shot 2020-02-07 at 2 49 44 PM

Screen Shot 2020-02-07 at 2 48 49 PM

My first thought is that perhaps this is due to a Chrome upgrade on the virtual environment. However, I don't think that's the case. We install puppeteer via yarn with a lockfile. Puppeteer (unlike puppeteer-core) bundles its own version of Chromium, so I don't think we are using the system Chrome at all. And the lockfile in yarn should ensure we are getting the same version of puppeteer (and therefore Chromium) across the build.

Over the weekend, a colleague mentioned that a client had a similar issue last week as well. They were also using the Lato font served by Google fonts, and other system/self-hosted fonts did not have the same issue. Their setup is similar to ours, but using the [Percy](https://percy.io/) visual review service instead of a custom puppeteer setup.

I noticed that there were some commits on this repo around that time last week. However, the commits do not seem to be modifying things related to the Lato font, at least not directly. Is it possible that those commits triggered a new build/release/deploy (if that's a thing), and somehow caused a regression with unrelated fonts? (#2328 seems to suggest that something like this _could_ happen?)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.