Chrome not caching font

I am using a variable font for my website and the font reloads every time I refresh it on chrome creating a FOUC (Flash of Unstyled Content), while in Firefox this does not occur. I would like the font to preload or cache like it does on Firefox. Why is it saving the font in Firefox, but not chrome? The url to the font is here.

@font-face {
    font-family: 'science-gothic';
    src: url('../Fonts/ScienceGothic.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: normal;
    font-display: auto;
}

h1 {
    margin-left: 1%;
    flex: 1 1 40%;
    font-size: 40px;
    font-family: 'science-gothic';
    font-variation-settings: 'wght' 600, 'wdth' 180, 'YOPQ' 50, 'slnt' -10;
}
<body class="home">
    <header>
        <h1>Cool Word</h1>
    </header>
</body>