Is there a use case for combining @font-face rules with CSS variables? or am I just setting myself up for extra debugging?

Question

We often use CSS variables in our code base. I was realizing that they kind of do the same thing as the @font-face declaration. I was wondering if anyone had found a use-case for combining the two. Or if I am just adding more work for myself in potentially debugging mispellings, etc.

` @font-face { font-family: 'Proxima Nova'; src: url('https://eventfinity-production-assets.s3.amazonaws.com/materials/fakenumber/original/PROXIMANOVA-REGULAR.OTF'); }

    @font-face {
      font-family: 'Proxima Nova Light';
      src: url('https://eventfinity-production-assets.s3.amazonaws.com/materials/fakenumber/original/PROXIMANOVA-LIGHT.OTF');
    font-weight: light;
    }
    
    @font-face {
      font-family: 'Proxima Nova Bold';
      src: url('https://eventfinity-production-assets.s3.amazonaws.com/materials/fakenumber/original/PROXIMANOVA-BOLD-WEBFONT.TTF');
    font-weight: bold;
    }
    
    
    :root {
      --Proxima_nova_regular: "Proxima Nova", sans-serif;
     --Proxima_nova_light: "Proxima Nova Light", sans-serif;
    --Proxima_nova_bold: "Proxima Nova Bold", sans-serif;
    }`