BACK

how to load custom font in shopify

How to add CUSTOM FONTS to Shopify | Upload Shopify Custom fonts welcome to ecom ranks in this video

Ecom Ranks

Updated on Feb 23,2023

How to add CUSTOM FONTS to Shopify | Upload Shopify Custom fonts

The above is a brief introduction to how to load custom font in shopify

Let's move on to the first section of how to load custom font in shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to load custom font in shopify catalogs

How to add CUSTOM FONTS to Shopify | Upload Shopify Custom fonts

welcome to ecom ranks in this video i,will guide you on how you are able to,add custom phones to your shopify store,okay right now this is my website and i,am using sensory fonts,and for now i will add a completely,custom,fonts to my shopify theme code okay,so please don't forget to subscribe to,my channel,and watch my full video this is a quick,tutorial,on how to add custom phones okay for,this you have to click on themes and,then you have to click on edit codes,we will have to change some or add some,of the css to our,cs files css file okay so,at the search tab you have to write css,and then you have to,open the theme dot css file or theme dot,s css file both of these files are,called the css files basically css,is a coding where we will add some,colors,phones styles to our website okay,at bottom of the website you have to,copy this code i will share this file in,the description below,you can just open it and copy it from,here,and then paste it to the css file of,your theme,okay and hit the save button,okay so now go back to the,any fonts uh for this i have using a,commercial fonts of great,web wives regular simply hit the,download icon aft,okay so it's get downloading click on,shown,folder and then extract this file,okay after extracting it you can see,this is the fonts,okay so firstly check its format,or its extension right now its extension,is dot dff,dot ttf so the only compatible,extension that will work with the uh,shopify stores is w,o f f so we have to convert,our theme or convert our forms,to uh woff to extensions,so for this you have to navigate to,any converter and simply and you can,google it convert,font file okay,so after clicking on it there are many,links you can open any,i am using this one okay so we need,uh it's asking which fonts we need we we,we want wo double f2 forms,extension after clicking on the choose,file you have to simply,upload the the the,form,simply hit the done button and then,click on the save your fonts and hit the,download attachment okay so,after downloading it you have to unzip,the file,and there will be a new fonts,with your required extension okay now,i'm closing that,after this you have to move to your,theme code again,okay so now you have to click on add new,asset,and then choose your file and this,is my file you have to select it it must,be,within the online font converter or,whatever the file is and you can get it,from online website okay,select your file and then open it you,can use any other,converter online and it's quite easy to,convert your files uh,to this extension wo ff2,okay so now we have to,click on it and then we have to,copy it,we have to copy the font names only,okay so go back here and,then we have to add the name of the font,here and then we have to add the,font name here similarly for,all the places where it's pre-written,that you have to add the name of the,font simply play paste your font,without a dot okay so,let me remove this dot and keep this one,dot here,okay and hit the save button,okay after this uh the one last step,that is left that you have to add,classes,with a comma over here okay give me,let me give you a basic idea of how,website is built,website is built using some elements,like this is the header,these are the links and when we scroll,down,these are the headings and this is the,paragraph these are the buttons,to represent all of these elements,um we we use html tags,right we use p for paragraph,h for headings and similarly we use,a alphabet for the links okay,so go back to this,and then these are all the classes,i will use similar classes here,i will i want to change all of my font,to great vibes regular of heading one,heading two heading three heading,four heading five heading seas,all the body elements and the paragraph,elements and the link,elements okay after this you have to hit,the save button,okay so if you have any other class,other than this you can simply add a,comma over here,and then write a class name okay,so let me show you by an example,so firstly let us check that whether the,fonts are changed or not,let me reload this website in the,website we can see that,our fonts has been changed all these,heading tags,and the paragraph tags and the buttons,are,are changed okay so this is the quick,tutorial on how to add custom forms to,your shopify website,if you like my video please don't forget,to subscribe to my channel and if you,have any question you can contact me,on skype on fiverr or on upwork,i will add all the links below okay,thanks for watching my video

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

Come on and read the rest of the article!

Browse More Content