how to customize font shopify

shopify world we are back with another,coding video and in this video,i'm going to show you how to add your,own font or someone else's font that you,are registered to use,commercially to your shopify store so,that you know you have a different phone,and it looks better,we're gonna do some coding for this step,by step i'm gonna explain to you how,let's just jump straight into the demo,store okay we are into the demo store,right here let me actually show you what,it currently looks like so you know,i'm not bamboozling you um this is what,it looks like pretty straightforward,the current font let's here we do right,click,inspect the current font of this,particular element is called,pup font works on,song sheriff,here we go font family so we're going to,change,this particular one,let's go let's do this so first and,foremost we're going to,find the font that we need and we're,going to download it so,uh so here we go free commercial use,fonts for a thousand and one fonts um,here this one let's click on this one,um it's free for commercial use which is,fantastic,i personally don't particularly like it,but you know as they say in french,league there is a zip file that is,opened,perfect let's look at that zip file,right here from scriptina,and here we see we have a ttf file,and a text file which is a readme file,let's take a quick look,that says how we can use this font okay,now the font is actually in the ttf file,there is a small issue though is that,shopify will not recognize this dtf,file and will have to convert it your,font will,only work if it is in a woff,format or in a woff,2 format which might seem like an issue,but no worries that's why there is,online converters so let's convert,those files um the easiest way is i,found a little website right here,font converter.net let's go to,that so we go to fonts,converter.net,perfect this is what it looks like,select the,file you want to convert so we're going,to browse,um that's not the right one downloads,scriptina and here is our scriptina ttf,file um i want it in a,let's do a w o f f ii but again a w,o f f would be fine as well i hereby,confirm i have the license,yes because it's a free font um download,your converted font as a zip,scriptina1 it is called and,right here is our,font wf w0f2,perfect now we have the correct font,format file format now we can close,all of this um let's close this as well,so now what what's the next step the,next step is we're going to jump into,the code so you're going to go to online,store,right here and voila we are on the,online store now this is very important,as i say in,all my dev videos make sure to create a,duplicate of your theme,otherwise if you make a mess up it's,going to cost you a lot of money so,super important actions duplicates,and we're going to be working on this,duplicate right here,so now we wait a second until it is,completely copied and then we're ready,to jump,into the code all right that is done so,now on the,copy of the version we want to so on the,backup basically that's the version,we're going to work on,we're going to click actions and then,we're going to click,edit code it's going to open up,the lovely code editor and on the very,left we're going to scroll,all the way down not all the way up all,the way down,to assets in the asset folder you'll,find the team.scss.liquid you want to,click on that one and there's a huge,file that's going to open up the scss,file is basically,all the cscss of your store,and that's everything that makes your,store pretty so the spacing the colors,the fonts and all of these fun little,things,we're going to scroll all the way down,here right here,all the way down and we're going to add,our pieces of code so we do enter a,couple of times to create new lines,some spacing then we do double slash,and we say new newly,installed font,code start then we do enter,enter to front faces and we do again,a newly installed,font code end,what is this this is basically little,comments that help,any future developers who walk into your,store,find immediately what this code is for,if you don't do that it's gonna take him,or her hours to figure it out,but if you comment your code well it's,gonna save you,you a whole bunch of money down the line,when someone else needs to work on your,store,so please do it all right so right here,we're gonna paste a piece of code that,i've provided in the link below,it's in step two and it starts with an,at,so make sure that you grab that entire,section,you copy it and then you just paste it,right here,control up paste,uh i'm going to indent this just to make,it,prettier and easier to read nope that's,one too much,like that that way it's more manageable,for anyone,that needs to deal with this in the,future,and we're going to have to make a couple,of modifications so,font family it says a name of the font,we're gonna need to change that,in script scripting i think it's called,so i'm just uh gonna take that name to,make sure,it's old so i'm just going to go,into my font size and i'm going to take,that name and i'm going to copy paste it,to make sure it's exactly the same,because otherwise if i do a typo it,might not work and it's going to take me,hours to figure out why it doesn't work,and it would be a bummer i'm going to,replace this,by the name of the font paste,see see what i did there i messed up,because there is an s right here all,right after that we're going to do,url so again we change it by the name of,the font,a scripting and right here,we pasted again a scripting,there we go then under this we're gonna,paste something else,another piece of code that i've provided,we're gonna leave it at that right now,but uh we're gonna come back in this,in an instant where we're going to have,to change the your css,selector um currently we can just save,it,the asset is saved and now we're going,to have to upload,the actual uh font file so for that,we're going to create add a new asset,we're going to upload a file and we're,going to upload,the correct file scriptina fonts,scripting and we upload,the asset,scripting dot w-o-f-f,by the way in my case it's a woff 2,so make sure that's the case right here,okay so,now the font file is actually added to,your code your code,knows the font file exists there is just,one,little issue left is that your code,doesn't know which elements on your site,and let me,show you what i mean when i see which,elements,which elements on your site need to have,this font,does this element need to have the font,does this one need to have the font does,this one need to have the font,we don't know yet because you haven't,told it and that's what we're going to,do right now,so the easiest way to do it is let's say,we want it on all,major headings that way we do we go on,our website and we figure out how these,headings are named,so we do right click inspect,we can do this little mouse right here,and we select,the area that we want you see that's not,the area this is not it,this is it because it tells us the font,name and the font size but what it also,tells you,is that it's an h1 header one that's,called,mega title mega title large so,if i tell my code right now hey apply my,new,font to all of the h1 it's going to,apply to all of these ones across the,entire website,if i say no no just apply it to the mega,title,it's going to apply it to all of the,areas on the website,that have the name mega title in their,class,it's kind of like an identifier no,if i say just do it to the mega title a,large it's going to do it to all the,ones that are mega title large,i can also say just do it to the h2s,which i'm assuming this,is an example of an h2 or to an h3 maybe,is this an h3 can i can i select it,ah i can't select that um,or maybe two paragraphs and things like,that this is probably going to be a,paragraph oh a link,here is a p so that refers to paragraph,let's say i want to apply it to all of,the h,ones well no problem i'm going to go,back into my code and just to clarify,this right here is an h1 you just,click on it and you see h1 right here,or you select it h1 in the very top,there,up here,so you go back into the code all right,so right here we're gonna change that,css selector to represent,the first heading like we said so we do,h1,um and then right here it says well font,family what's the name,of your font so i'm going to copy this,and i'm going to make sure i write the,right,name scripting i'm going to save that,we're going to go into our online store,actions and preview,boom isn't that a sexy font,um now you might say andrew it's only,applicable to this one,yes that's true because we only set h1,so it's not going to be applied to other,elements in your store,what if you want to change that well,that's a very good question you can,start by,going back into the code doing edit code,then going back into your team.scss file,you go all the way down and here you can,add multiple elements,separating with a comma for example i,also want all h2s,i also want all age trees i also want,all paragraphs so we can save that,the asset is saved let's take a look,we do a little refresh,oh god this is such a beautiful font,it's going to sell like cupcakes,okay but andrew there's still an issue i,did h1h2h3h4556 there's still elements,that,are not being translated into that font,all right,the easiest way at that point is to look,it up by idea you see h1h2h3 and,paragraphs are just,very general terms in css you can also,name,a specific text name a specific area of,text with a class,or even more specifically with an id,so the easiest way to do it is just,check out which,class name it has so for example here,you want to change these ones,you click on it and you will see oh i,can maybe just do,body,body,how much is that going to convert,oh so much more is converted,now that i wrote body but there is still,elements that are not being translated,in my font andrew all right all right,let's find the specific element so let's,say watch here isn't being translated so,you click on it,and then you're going to find the,product,name grid view item,right here it says that it's a grid view,item,is the name grid view item underscore,image,dash calculator full width links now,which fonts does this have,work saw sheriff but we've overwritten,that,hmm,it says it's supposed to be scripting,but something has overwritten,our font meaning there is another code,somewhere that says no,no no ignore scripting,you're just going to overwrite it,and this is where oh here there is a,style tag what is that style tag doing,here,so this is where it becomes a debugging,effort in some sort so,dot button the class name of this,section is called,button so we can add to our list,comma space dot btn,the same way that it's written here if,it says,btn2 or bt mmm,then here you would write btn2 or btm,mmm,just copy it exactly like the class name,you see,so if we do it like that we save,we wait for it to be saved we refresh,normally these buttons,should have our awesome font look at,that,but there is still this area that,bothers me,let's look how come,oh because it's an a-link,what if i do i add to this,right here uh space a,comma so now i'm saying a means link,all the links add them as well save oh,here's another example of one,that hasn't been translated yet so we,can hover over it,we figure out which um,fonts it's named so we scroll down in,the list here,until we come across oh works on sheriff,body input text area button,select just regular button all right and,that is,it so you can play around like that you,can add all the sections that you need,and if you add enough sections and if,your team is written,decently easily you can just change it,all now many of you will ask why can i,not,make it so it appears in the customizer,my font,well that's only for google fonts and,i'll cover how to add your font to that,list in the customizer let me show you,which one i'm talking about,into a separate video oh by the way our,version is not live yet,so make sure to publish it live by,clicking publish,and now our beautiful font is live and,so in another video i'll talk about how,you can add your font,to the customization section right here,so i think it's in team settings,um typography,how you would be able to change your,font here now there are some limitations,and you can't add a random font like we,just did,to the selection list all right that was,it for me i hope you were able to add,your font,to your website there is a coding video,like this every thursday make sure to,check out all the other coding videos i,also talk about strategy how to make,more money on your shopify store,make sure to check those out on,wednesdays my name is andrew from ecom,experts dot io and it would mean the,world to me if you like,subscribe and share this channel with a,friend it's literally the only pat on,the back my team and i get,for making these videos thank you very,much and adios,you

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

Come on and read the rest of the article!