Why isn't the Canela font displaying all weights on my website?

[Hus22]

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

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

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

Its the same size if I switch at or below 500 and at/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.

[Adepsstudio]

or some reason the custom font that I am trying to implement on my Shopify site is not working at all. I uploaded the font as an asset and used the code in our theme.scss file:

         @font-face {
           font-family:'Neue-Haas-Grotesk', sans-serif;
           src: url(Linotype-NHaasGroteskDSStd-65Md.ttf);
           font-weight: 900;
           font-style: normal;}

I then added codes such as the one below to have it be displayed on certain parts of the site:

   .site-nav { font-family: "Neue-Haas-Grotesk" !important; }

I tried this exact template of code with an Arial Black ttf file that I uploaded as an asset but for some reason this font is not working what so ever. Any suggestions on how to make this work properly on Shopify now and in the future for any site?

• css
• fonts
• shopify
• font-face

Share

Improve this question

Follow