Undefined Variable in SASS 'util.$font'

Question

Just learning the ins and outs about SASS and I've run into a problem with variables. I have created a utility folder with my fonts file. In the fonts file, I created a variable called $font. When I attempt to load the variable using @use I get an error saying the variable is not defined. Ive gone over it but cant seem to understand why it's not defined. I have defined it within the fonts.scss but it doesn't recognize it. Any help would be appreciated.

Ive tried @use '../util/fonts' as well as @use '../util' to see if that would help the matter. But I get the same error. Ive double checked the _fonts.scss file to make sure the variable is defined and it is.

Here is my code:

@use '../util/' as u;

html {
  box-sizing: border-box; 
  font-size: 100%; 
}

*, 
*::before, 
*::after {
  box-sizing: inherit
}

body {
    margin: 0;  
    padding: 0;
    font-family: u.$font;
    background-color: var(--background-color);
    color: var(--text-color);
}