Need help with consistent rending of Material Symbols font in screenshots

[stephanietuerk]

My team is having issues with the Material Symbols font ligature not being replaced with an icon by the time a screenshot is taken.

(This should read "learn more" and then have an icon to the right of it.)

We are loading this font via in the index.html:

 <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back,arrow_downward,arrow_forward,arrow_upward,block,cancel,check_box,check_box_outline_blank,collapse_content,download,expand_content,expand_more,image,info_i,menu,search&display=block"
    />

The icons are provided using this pattern in html:

<span class="material-symbols-outlined">expand_content</span>

This is an Angular (v18) application.

I don't think this is a font loading issue because we get it on every screenshot, even after the Cypress has significantly traversed the site.

Anyone have any ideas about how to solve this? I see that there have been issues opened around font loading in the past but they have been resolved by PRs and it's been two years since the last one I could find. Feels like I'm likely doing something wrong.

[stephanietuerk]

Just read the discussion in this percy-storybook issue, and am wondering if that is what is going on here, although the latest version of ubuntu does support variable fonts.

The Material Symbols Outlined font (we are using the variable version) does render correctly in Safari screenshots but not in Chrome and Firefox, which tracks with what is being discussed in that issue.