I downloaded a variable font that supports changes to weight and width, but when I attempt to change the weight or width of the font it does not change. However, when I utilize a link to import the font instead of using the .ttf file, changing the font-weight works.

I have tried to use font-variation-settings as well as font-weight but it does not seem to work.

Here is my code for @font-face and the header in a div class where the font is being applied:

@font-face {
    font-family: 'Archivo';
    src: url(fonts/Archivo-VariableFont_wdth,wght.ttf) format('truetype');
}

.front .name{
    font-family: 'Archivo', sans-serif;
    font-size: 4.5vw;
    font-variation-settings:"wght" 1000, "wdth" 100;
    color: rgb(255,222,90);
}