How can I add three custom fonts to my ecommerce page?

[Felix_Ghys]

Hi everyone, 

How do I add 3 custom fonts to my shopify page? I cannot seem to figure this one out. 

Thank you in advance! 

Best regards, 
Felix

[Abdosamer]

@Felix_Ghys , Did you upload the custom fonts to your shopify files?

[Felix_Ghys]

Hi Abdosamer, 

Yes I uploaded them to my files. 

[Abdosamer]

@Felix_Ghys , you can go to base.css and add the following code :

@font-face {
font-family: "Duly Noted NF W01 Regular";
src: url("https://cdn.shopify.com/s/files/1/0667/9389/8229/files/Duly_Noted_NF_W01_Regular.woff?v=1699650098") format("woff");

}

the name and the link here are just examples, you will enter the name of your font in the font-family and the url of your font, and for every font you will use the same format. 

[Felix_Ghys]

Thank you! I cannot find the folder base.css, where can i find this one? 

[Abdosamer]

@Felix_Ghys , can you share your store url to see if you have this file or not first?

[Felix_Ghys]

https://064a48-4.myshopify.com/?_ab=0&_fd=0&_sc=1

[Felix_Ghys]

Here you have my store URL:

https://064a48-4.myshopify.com/

[Abdosamer]

@Felix_Ghys , add the code to theme-index-min.css.

[Felix_Ghys]

I added this to the theme.liquid file: 

@font-face {
font-family: "TTnormsProExp";
src: url("https://cdn.shopify.com/s/files/1/0783/9137/8245/files/TTNormsProExp-XBd.woff2?v=1700691462") format("woff");

}

@font-face {
font-family: "FilsonPro";
src: url("https://cdn.shopify.com/s/files/1/0783/9137/8245/files/FilsonPro-Book.woff2?v=1700691461") format("woff");

}

@font-face {
font-family: "Abnorm";
src: url("https://cdn.shopify.com/s/files/1/0783/9137/8245/files/Abnorm.woff2?v=1700690403") format("woff");

}

[Abdosamer]

@Felix_Ghys , all your font file are woff2 not woff so you should change the format format from woff to woff2.

[Felix_Ghys]

So I added the code to the theme-index-min.css. file, but cannot find the fonts in the drop down menu when I edit the website typography. Or is there another place I can find the fonts? 

This is the code i added: 

@font-face {
font-family: "TTNormsProExp-XBd";
src: url("https://cdn.shopify.com/s/files/1/0783/9137/8245/files/TTNormsProExp-XBd.woff2?v=1700691462") format("woff2");

}

@font-face {
font-family: "FilsonPro-Book";
src: url("https://cdn.shopify.com/s/files/1/0783/9137/8245/files/FilsonPro-Book.woff2?v=1700691461") format("woff2");

}

@font-face {
font-family: "Abnorm";
src: url("https://cdn.shopify.com/s/files/1/0783/9137/8245/files/Abnorm.woff2?v=1700690403") format("woff2");

}

[Abdosamer]

@Felix_Ghys , you can add them through css , for example:

P {
  font-family : "TTnormsProExp";
}

[Felix_Ghys]

Alright very nice, and how can I modify the font size and type? What do I change in the code? 

Your help is very much appreciated 🙂 Thank you so much. 

[Abdosamer · Accepted solution]

@Felix_Ghys  , using css font-style and font-size 

P {
  font-family : "TTnormsProExp";
  font-style:italic ;
  font-size: 29px;
}

[Felix_Ghys]

Thank you very much for your help again. Amazing!