Unexpected oblique font from web component

I'm trying to implement the Gov't of Canada web components as described here;

https://design-system.alpha.canada.ca/en/

I've added a few to a test page like so;

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>test 01</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.24.1/dist/gcds/gcds.css">
      <script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.24.1/dist/gcds/gcds.esm.js"></script>
      <script nomodule src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@0.24.1/dist/gcds/gcds.js"></script>
   </head>
   <body>
      <gcds-topic-menu></gcds-topic-menu>
      <gcds-footer
         display="full"
         contextual-heading="Contextual navigation"
         contextual-links='{ "Why GC Notify": "#", "Features": "#", "Activity on GC Notify": "#" }'
         ></gcds-footer>
   </body>
</html>

When I open the page it looks fine on my personal PC, but on my work machine the font is oblique. Everyone else at work sees the same effect, every browser, cache cleared. I can't see any reference to Oblique in the CSS files. Any suggestions appreciated.