I'm running Percy visual regression testing through the Cypress.IO testing framework but the font in my Percy screenshot aren't correct

162 views Asked by At

The fonts are displaying correctly in the Browser but the Percy snapshot is using the incorrect fonts. Not entirely sure what info will help here but here's a snippet of the Cypress + Percy test:

describe("Article page", () => {
  it("passes", () => {
    cy.visit("/articles/augustas-story-being-youth-advisor-0");
    cy.document().its("fonts.status").should("equal", "loaded");
    cy.wait(2000);
    cy.percySnapshot();
  });
});

And my fonts like so:

@font-face {
  font-family: 'Helvetica LT Std Bold';
  src: url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.woff2') format('woff2'),
  url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.woff') format('woff'),
  url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.ttf') format('truetype'),
  url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.svg#HelveticaLTStd-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
0

There are 0 answers