how to add custom font in shopify

how to add custom fonts on shopify store,hi guys welcome back into this channel,and today i will be teaching you how to,add or upload custom fonts on shopify,store,so let's begin right away,the favorite step is to make sure that,you have signed up,on the shopify store,or the shopify website so simply go to,shopify.com and sign up and make sure,that your email is working since shopify,will be sending an email regarding the,verification or the activation of your,account,and once you're done,simply go to the home page which is this,one,and then click on online store under the,sales channel section right here,and make sure that you are on the themes,section and right now what you're going,to do,is to make sure that your theme is not,done,instead it should be debut,since i don't have the debut theme right,here what i will be doing is to go to,shopify theme store so go to visit theme,store,and then wait for it to load once you're,here hit search on the upper right and,then,type in,debut once you are here click on the,debut with this icon,and click on try theme wait for it to,load once again and then once it is done,loading you may start editing the debut,site or theme you just simply scroll,down and wait for it to load,until you can click on customize so,click on customize and wait for it to,load once again,there are options wherein you can change,the font right here but this will not be,the page,where we can edit or add our custom,fonts,so you just accept it right here,go to actions and click on,edit code so this will be a complex one,so you need to follow these steps,thoroughly so go to search files and,type in css and under,the assets click on theme css and then,go to the bottom,of the page,and then click on the bottom,hit enter,and then,go to,the,um description box below since i will be,adding this code so simply copy and,paste this code,and now once you have pasted it what,you're going to do now is to download,the font that you want so i suggest you,use the font.com website but there are,other websites you can search in google,so you need to search for,font downloader for free and etc if you,want to download one,just click on download and then simply,follow the steps needed,and then the file will be,uh mostly can be seen as,zip so like this one so in order for you,to extract it you need to click on the,folder first,and then right click,and click on extract all or extract here,or whichever,option you can see,and then now once it will be extracted,you may see a folder or a content like,this one so this is the font,what you're going to do now is to look,for its property so that you may see its,um,format so,right click on the font,click on properties,and then as you can see the type of file,is dot dtf so remember the type of font,or the type of file,since you will be needing it afterwards,so mine is dot etf so it will appear as,otf or wolf or,etc so let's go back to the code first,and as you can see the um type of file,that we will be needing is wolf2 so the,waft2 is the,font that is used in the web pages so,you will need to convert,our,font which is the ttf to waff2 so you,may go to,google and search for font file,converter let's say for example,your type of file is like mine which is,dtf you may search for ttf to,walk to like that one and then you may,also,you use,anyconve.com which is the app that i,will be using i'm in the website just,simply click on choose file,choose the extracted file and then make,sure to choose the waft2 um type of file,click on convert and then now you may,download it,once you have downloaded it you may now,go back to shopify,and click on add a new asset and then,choose a file,choose the converted one,which is dot wolf to file click open and,click on upload asset once you're done,simply scroll down and look for the,uploaded asset which is this one which,can be found on the bottom most part of,the assets and then go back to theme.css,oh wait we need to copy the name first,which is this one remember to copy only,the name and not,including the um extension or the file,type right here place the,font name also right here,and lastly right here so before we save,this one,we will be previewing the page first or,the site first,so this is,the site the default um text,can be seen right here on the header,the,um the body or the paragraph,then if you want to change the font we,will go back to right here to the codes,or to the theme dot css,so,the last step that we will be um using,or doing is add classes here with comma,so as you can see there are sections or,classes so let's say for example this,one this is the first header or the,header one and then this is the header,two,and then this is the header three and,etc,so,if you want to change the font of the,header you just simply type in h,and then the number of that header so,you may type in h1,then comma h2,and then comma again h3 and so on,for the body you may type in body and,for the paragraph you may type in p,and,for the um,link you just type in a for the link,click on save,and then you may click on preview once,again and as you can see the font now,has been changed,so,you may now exit this one,make sure first to click on save and,then you may go back to home and that's,it so let me know if you have any,questions,please post them on the comment section,below and make sure to hit the subscribe,button and the notification bell as well,make sure to leave a thumbs up,and then that's it that's how you can,add custom fonts on,shopify

Congratulation! You bave finally finished reading how to add custom font in shopify and believe you bave enougb understending how to add custom font in shopify

Come on and read the rest of the article!