question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Percy-Cypress v3 does not load fonts

See original GitHub issue

We are trying to migrate one of our projects to the new Percy-Cypress v3, and we have problems with custom fonts not being rendered on the Percy screenshots.

Sample, with differences highlighted: image

Sample, with no highlights: image

From debug logs, I see that font files (woff and ttf) are being loaded -

[percy:core:discovery] Handling request for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (42ms)
...
[percy:core:discovery] Handling request for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (17ms)
...
[percy:core:discovery] Processing resource - http://localhost:8080/fonts/CustomSansTTRegular.woff2 (4ms)
[percy:core:discovery] Making local copy of response - http://localhost:8080/fonts/CustomSansTTRegular.woff2 (5ms)
[percy:core:discovery] -> url: http://localhost:8080/fonts/CustomSansTTRegular.woff2 (1ms)
[percy:core:discovery] -> sha: b0bacf06b2e7a3e3fc672625c9aaff825ed79d754a174c0f352d68d10daf7397 (0ms)
[percy:core:discovery] -> filepath: /tmp/percy/b0bacf06b2e7a3e3fc672625c9aaff825ed79d754a174c0f352d68d10daf7397 (1ms)
[percy:core:discovery] -> mimetype: font/woff2 (0ms)

...

(in the following tests)
[percy:core:discovery] Handling request for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (1ms)
[percy:core:discovery] Response cache hit for http://localhost:8080/fonts/CustomSansTTRegular.woff2 (1ms)

All that looks pretty legit, besides the duplicate “handling request” line. Yet, the screenshots are rendered with the default font.

Any idea what went wrong here? Are we missing any pieces in the migration process?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:18 (8 by maintainers)

github_iconTop GitHub Comments

7reactions
khitrenovichcommented, Apr 16, 2021

We were able to isolate the issue to a combination of webpack-dev-server and file-loader. Our solution was to use url-loader instead of the file-loader with webpack-dev-server - that is, locally and in PR builds in CI. You can add one more recipe to your collection of the workarounds. Thank you for helping us to solve this mystery!

3reactions
khitrenovichcommented, Apr 8, 2021

@Robdel12 Build 9750416, snapshot 549314950 (or any other from that build). Thank you so much!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Woff fonts missing (corrupt on asset discovery capture) #222
Hi, I was trying to integrate Percy with our product but I faced two issues. so, to reproduce the ... Second: local assets...
Read more >
Cypress - Percy Docs
This will start a Percy agent to receive snapshots from your Cypress tests and upload rendered screenshots to your Percy dashboard. Before you...
Read more >
How to deal with font loading and screenshots in Cypress
It works, but the problem is that fonts sometimes doesn't load in time for the screenshot so we end up with a very...
Read more >
Visual Testing - Cypress Documentation
Cypress does NOT see how the page actually looks though. ... then there has been some change to the DOM layout, fonts, colors...
Read more >
cypress-io/cypress - Gitter
@RBO21000 nope, no idea why fonts would take so long to respond ... hmm, don't have the github issue.. but afaik it was...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found