How to add Custom font in the theme

[lesriches]

Hi Community,

I am absolutely new to this and trying to figure out how to add my fonts. My fonts Cinzel which are not on google. I understand I need to Add a file under the Assets before I am able to add code or move. However, I am unable to find the right css file. Can someone please direct me how I can secure those files in the right format which can be uploaded in the Assets as a new Asset.
i have added follwing code in the theam.css file but it was not showing in the theme.

@font-face {

font-family: 'CinzelMedium';

src: url('CinzelMedium.woff') format('woff');

font-style: normal;
}
h1,h2,h3,h4,h5,h6,body,p,a{ font-family: "CinzelMedium"!important; }

Much appreciated!

[Huptech-Web]

Hello @lesriches , To accomplish this task, begin by deleting your code from theme.css.

Next, navigate to Theme library > Edit code > Assets and create a new CSS file named custom.css

@font-face {
  font-family: "CinzelMedium";
  src: url("CinzelMedium.woff") format("woff");
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6,
body,
p,
a {
  font-family: "CinzelMedium" !important;
}

Then, input the provided code. Finally, access theme.liquid and paste the given code right before the </body> tag.

{{ 'custom.css' | asset_url | stylesheet_tag }}

Alternatively, you may choose to include the them.css file directly into the theme.liquid file.

{{ 'theme.css' | asset_url | stylesheet_tag }}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[lesriches]

Hi @Huptech-Web  i was unbale to change by following the above steps can you please tell in detial.

thanks 

[gr_trading]

Hi @lesriches ,

Please follow the instruction mentioned in below video to implement custom fonts in Shopify font settings.

[osamafarooqi71 · Accepted solution]

Hello @lesriches, In Shopify we have a limitation when you upload fonts into the theme asset folder (the font file gets corrupted sometimes). Instead, please upload the font file directly to files > media, copy the link from there, and paste it as a URL in fontface.

@font-face {

font-family: 'CinzelMedium';

src: url('YOUR_FONT_URL');

font-style: normal;
}

Note: Please replace 'YOUR_FONT_URL' with your actual font URL.

Regards, 

Osama Farooqi