Unable to use font-weight with canela font in shopify

I am using the Canela font on my website. I was able to add the font successfully, but I'm unable to use it's different weights.

Canela has 7 weights, all of which have been added in the assets folder.

But when I switch the weight, it's only changing for 500 and 600.

It remains of the same size if I switch at or below 500 and at or above 600.

  @font-face {
        font-family: "Canela";
        src: url('{{'CanelaText-Thin-Trial.woff2' | asset_url }}'); 
        src: url('{{'CanelaText-Thin-Trial.woff2' | asset_url }}') format("woff2");
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }
         @font-face {
        font-family: "Canela";
        src: url('{{'CanelaText-Light-Trial.woff2' | asset_url }}');
        src: url('{{'CanelaText-Light-Trial.woff2' | asset_url }}') format("woff2");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
         @font-face {
        font-family: "Canela";
        src: url('{{'CanelaText-Medium-Trial.woff2' | asset_url }}');
        src: url('{{'CanelaText-Medium-Trial.woff2' | asset_url }}') format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
  
       @font-face {
        font-family: "Canela";
        src: url('{{'CanelaText-Regular-Trial.woff2' | asset_url }}');
        src: url('{{'CanelaText-Regular-Trial.woff2' | asset_url }}') format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
  
      @font-face {
        font-family: "Canela";
        src: url('{{'CanelaText-Bold-Trial.woff2' | asset_url }}');
        src: url('{{'CanelaText-Bold-Trial.woff2' | asset_url }}') format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

I used the font in a normal HTML file and it seems to be working properly

    @font-face {
    font-family: 'Canela';
    src: url('CanelaText-Thin-Trial.woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    }

    @font-face {
    font-family: 'Canela';
    src: url('CanelaText-Light-Trial.woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    }

    @font-face {
    font-family: 'Canela';
    src: url('CanelaText-Regular-Trial.woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }


    /* Canela Regular 2*/
    @font-face {
    font-family: 'Canela';
    src: url(CanelaText-RegularNo2-Trial.woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }

@font-face {
    font-family: 'Canela';
    src: url('CanelaText-Medium-Trial.woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Canela';
    src: url('CanelaText-Bold-Trial.woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Canela';
    src: url(CanelaText-Black-Trial.woff2);
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
.thin {
    font-family: 'Canela';
    font-weight: 100;
}

.Light {
    font-family: 'Canela';
    font-weight: 200;
}

.Regular {
    font-family: 'Canela';
    font-weight: 300;
}

.Regular2 {
    font-family: 'Canela';
    font-weight: 400;
}
.Medium {
    font-family: 'Canela';
    font-weight: 500;
}
.Bold {
    font-family: 'Canela';
    font-weight: 800;
}

.Black {
    font-family: 'Canela';
    font-weight: 800;
}

h1 {
    font-size: 80px;
}

Kindly help.