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

Store Design
1

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

2

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

3

Hi Abdosamer,

Yes I uploaded them to my files.

4

@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.

5

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

6

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

7

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

8

Here you have my store URL:

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

9

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”);

}

10

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

11

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

12

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”);

}

13

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

P {
  font-family : "TTnormsProExp";
}
14

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 :slightly_smiling_face: Thank you so much.

15

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

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

Thank you very much for your help again. Amazing!