How To Add Custom Fonts To Shopify | Change Font

[@rafaelcorerato7459]

Wow, after watching many, many videos for hours and still not being able to get it, you were able to show me how to do it in less than 5 minutes. You are awesome!

[@OnHOWGuy]

You're very welcome and glad i could help legend. Cheers

[@sarmadzafar-f1s]

@@OnHOWGuy not working for me bro i did all the steps chat gpt every thing not working for me what should i do now

[@RafaelBCOS]

For this to work, you must just upload the file in assets, then go to customize theme > Custom CSS > and put h1 there, h3, h4, h5, h6, the, body { font-family: "amine"; } Interestingly, the font was amina-medium, and it remained as a generic font. so I tried just amine, and it worked. I thank the owner of the channel who only responded to comments of praise and did not answer this question from subscribers...

[@atasteofthepast]

Can you be a bit clearer as to what needs be put into Custom CSS? I have followed this video accurately, but the font is not working. This seems to be a common problem. I am hoping that your 'fix' will help, but I am not sure precisely what to add. Many thanks if you can help fix this!

[@kseniiatryniak8544]

thank you so much! Your code works - it helps me a lot

[@jankko7]

Hi, I'm sorry but the font on the end of the video doesn't seem to be the one you downloaded or am I blind? It' just random fallback serif font, not the Rubady. However everybody here in the comments report success, so I'm confused :D

[@zkdesigners]

same with mine!

[@congthinhhoang7111]

yeah, same. He did not even check 😥

[@birdclubdotclub]

@jankko7@@congthinhhoang7111 ​ @zkdesigners I tried this method months ago and it worked. Recently I updated my theme (Sense) to the most recent update and not all custom code carried over with the update, so my font reverted back to the fallback serif font. I tried again just now to use this method and can't get it to work, even with tweaking a few things. So that could be the issue.

[@frijolitofeliz]

same here

[@gracemitchell4310]

Hi! Thank you for the tutorial. However I have followed these steps exactly, but the font is still not available, could you help at all?

[@siraffatima]

same

[@RafaelBCOS]

@@siraffatima For this to work, you must just upload the file in assets, then go to customize theme > Custom CSS > and put h1 there, h3, h4, h5, h6, the, body { font-family: "amine"; } Interestingly, the font was amina-medium, and it remained as a generic font. so I tried just amine, and it worked. I thank the owner of the channel who only responded to comments of praise and did not answer this question from subscribers...

[@amirperrymusic]

I noticed yours didn't change to the font you downloaded. Neither did mine. It changed to some font but it wasn't the one I wanted. Anyone else have this issue?

[@hashirkhattak9180]

exactly

[@RafaelBCOS]

@@hashirkhattak9180 For this to work, you must just upload the file in assets, then go to customize theme > Custom CSS > and put h1 there, h3, h4, h5, h6, the, body { font-family: "amine"; } Interestingly, the font was amina-medium, and it remained as a generic font. so I tried just amine, and it worked. I thank the owner of the channel who only responded to comments of praise and did not answer this question from subscribers...

[@FIared]

Still need help?

[@renatakuti234]

You are literarly the best. Can't thank enough for this video, honestly. The way you say 'font' by the way, made me spit my water I drank I laughed so much, sooo cute :)

[@lsdasap-s3n]

is there anyway to change the line height and other such settings in this method?

[@SophiaRos-q7u]

this is so great thank you! may i ask - how do you change font size and the custom font doesnt come up on mobile view! are you able to help me? thanks!

[@arasnaskina3125]

i unexpectedly added AN OTF font, later deleted the font on assets and added a new asset with the right WOFF, but website didnt change to the desired appearance of the font. what do i do?

[@ebushnellr]

I don't know why it doesn't work i do exatcly the same things :/

[@igicebear7835]

same brother

[@igicebear7835]

did you got the solution?

[@ebushnellr]

no sorry bro@@igicebear7835

[@aravinthkumar4974]

Same here

[@aravinthkumar4974]

Did you get any solution

[@joshuadano9275]

hi, i cant upload always error when converting from ttf to woff

[@FANTAFRUITYTWIST]

my font doesn't load on mobile. can you help pls

[@FANTAFRUITYTWIST]

If your font doesn’t show on mobile, this tutorial works kzbin.info/www/bejne/oJuZl6V8YriKadUsi=WROxWVzeZBMnt8rJ

[@jessehayward7263]

Hey! This was a great video, however I have a question. This uploads the custom font to my entire website EXCEPT for my cart and my checkout, how do i get it to do that? I added 'system' to the h1,h1,h3 etc list, am i missing something?

[@kaitlizxx]

Hi! Your videos are so helpful! Do you know a way to change the color of a word within a heading? For example, I have a heading that says, "Timeless pieces that turn your home into a sanctuary." I want to change the word sanctuary to a different color. I have already italicized it just fine, but I can not figure out how to adjust the color without affecting the rest of the sentence.

[@OnHOWGuy]

Thank you and glad you think so. Someone requested that 2 days ago and after you did i will work on it asap. Cheers

[@kaitlizxx]

@@OnHOWGuy Yay! Looking forward to the video!

[@NadecheBömer]

Hi! This was very helpful. I just have one more question. Is it also possible to use this code twice in de base.css? Because I want to use a particular front as h1 to h6 and I want to use an other font for my body text. When I tried this, it wasn’t working. Hope to hear from u soon!

[@rebornnene11]

Were you able to figure this out?

[@JohannGarrido]

Your site is not displaying the RubadyGame font, man. It's falling back to Serif or Times New Roman family.

[@JohannGarrido]

In case you are facing this same issue (Your custom font not displaying). Maybe you're getting an error on your browser console saying the font could not be decoded, it turns out uploading the font files to the assets folder is corrupting them. I could fix my issue by uploading them to the files folder instead. Then in the font face rule, for src property, set this: url("{{ 'my-font-name.woff2' | file_url }}") same for the woff url. And that's it.

[@shopseidora]

@@JohannGarrido yeah this still didn't work fo me :(

[@zeinaalkhaznachi4575]

this was very useful, thank you! can you please advise how to add multiple custom fonts, so for example, if the heading font is different from the body font?

[@OnHOWGuy]

You're welcome, glad it was. I got that video noted now and i will work on it. Cheers

[@aazimi3364]

very useful video! Have you made the video on how to make multiple fonts? @@OnHOWGuy

[@stefansommerer1428]

hi, great instructions, thank you! Unfortunately, my stars no longer work on the judge me form. These are only shown as squares. but only in the widget form.

[@clipsofmma]

This worked perfectly. Thank you sir. You deserve a like and follow

[@haifamohammed9044]

what about adding specific arabic font to the multilanguage store (English/Arabic) in Dawn theme. can you do a video for that. I am trying to add Almarai font to my shopify store but i could not.

[@OnHOWGuy]

Thats an interesting request and i just noted it. Cheers

[@haifamohammed9044]

Thank you very much I will be waiting for it 😊

[@divyakumar4358]

Thanks. The fonts changed for some devices by not all with these steps. Any advice on how to have the fonts consistent across all devices

[@OnHOWGuy]

You're very welcome,It might be browser cache issue. Cheers

[@liamnahun268]

did step by step but didn't work im using the sense theme, please help

[@naturesjoint]

literally the best. most clear advice, i spent ages on so many other pages/videos. thank you

[@0-60reviews7]

Thank you, it worked nicely, but when I add page, it seems to be all or nothing. It adds it, but basically to the whole site. I want it mostly to the smaller things instead. Is that possible?

[@mohammedfayedhasan3824]

Will the debutify theme work this way?

[@dariusgiurar5435]

for some reason mine is defaulting to times new roman.....any idea why? i followed all steps perfectly. maybe i did something wrong?

[@PtSallyAnn]

Hey Enes !! I followed few videos of yours and always very helpful. I very appreciate your support from far. I wonder If I could ask for a tutorial for the Header, when the header on the home page (in my case) is in white text over a video just like in your shopify, now when I scroll down the white text desappears with the white backround of the page. It would look awesome if the heading fade in with a opacity backround when scrolling down of the video and up. I´ve been loocking and many videos and coding I´ve tried a few but nothing has given me the solution. If you have the time I would very appreciate it. Thank you so far for all your information given. Sally :)

[@zenASDF]

Is it possible to have individual fonts for just the headings?

[@OnHOWGuy]

I think so but i dont have the code in hand, i noted your request and i will work on it. Cheers

[@KarlaFrias-q7l]

can this be done for individual sections?

[@yasminamo101]

You lost me at around 4:00 when you mentioned to copy the code from font family. No idea how you got there. Can you help and explain?

[@OnHOWGuy]

Google "Fonts" and you'll see many websites providing the fonts to use them. Cheers

[@swooshprod7697]

Hi, is there a way to change the font just for one menu item?

[@OnHOWGuy]

Thats a request i have to work on, it requires a custom code and i noted your request and i will work on it. Cheers

[@chrisr6314]

What if I don't want to add classes in the edit code section? Instead I would like to use the Custon css in the sections only.

[@pratyashadash2977]

I followed each step according to your video, my shopify theme is Mode, where i tried uploading the font i want but in my page all the font changed to basic Ariel. What should i do?

[@OnHOWGuy]

And are you sure you uploaded the correct file ? use a different font provider and see. Cheers

[@d7721]

Great Video! I do have one question though, can you still add multiple custom fonts after adding one?

[@Heartleafkayla]

It won’t let me download the .woff file under assets. It’s greyed out. I can only download the .ttf and that didn’t work either. I tried downloading in the general upload area for files and the .woff uploaded, but still doesn’t work to change the font on the website 😢

[@laurenreynolds4017]

Hey - this changes my font in customize but not in preview / on the live webpage. Do you know why?

[@Fordropsh]

I did it the second time, maybe I can help?

[@CurtisPEERS]

how about for marketing automations or shopify email?

[@aletacollagen]

does this work for the header?

[@AlexandraZisu-x4g]

Thank you so much, it did work! However, when I wanted to check the website from my phone, the fonts were not the ones I just added. So that means only people that have installed those particular fonts on their computers/phones are able to see the fonts I customised the website with?

[@5-lm6vq]

Worked for me. awesome work, thanks

[@faaziphone6484]

Hello Anas you are really doing a great job and i almost watch each and every video of you. But in this particular video i have applied the same thing i want to let you know that the font style is only changing on IOS devices not on android. Kindly do check and i hope you'll find a solution for it. Thank You & keep up the good work 👍

[@OnHOWGuy]

Hey, thank you and i appreciate that. Sorry for the late reply and Yeah unfortunately things changes quick and its hard to keep up, this trick still works on the popular themes just fine. Cheers

[@WackyCustoms]

Thanks the fot changed but only on pc or computers it doesn't display my font on the mobile phone. Please tell me a fix

[@OnHOWGuy]

You're welcome, Is this still the case ? Cheers

[@TheCozyCollective-b7h]

Hi, for some reason my custom font only shows up on my device and no other devices after following this tutorial. Any help?

[@ClothingUNSEEN]

Hey this works for desktop but doesnt show on the phone

[@paul-louispittet-maurice2086]

Thanks for your help! Very straightforward!! 👍🏼

[@salimmohsin7713]

how do I change the font for a specific paragaph in my product page desription on the products section

[@lievinlengaworship]

Hey wonderful tutorial. Please can you make a quick video showing how to add bold on to the font. I've looked at all video to see if you created a tutorial for that but find nothing. I would appreciate if you can make that quick video. Thank you.

[@justinclark7068]

Hey Enes, If I am adding more than one font to shopify, would I just duplicate the code and follow the same steps for each one?

[@OnHOWGuy]

Hey, you need to set multiple targets for the font to be applied.

[@TMPRODUCTIONBEATS]

I followed al the steps but the font didn't change for me on the dawn theme. Any help?

[@vanwansink-ri8cn]

same

[@TMPRODUCTIONBEATS]

@@vanwansink-ri8cn I got the solution with another methode if you down I can send it to you

[@IslandClutch]

I've been using your page to build by own store, first of all thank you sooo much. but man it is frustrating when a code doesnt work. i keep going back and forth. and every time i think yes, this has to be it. NOTHING!!! uuugggh. sigh.

[@JohnFresco-o1r]

Hi - great vid! it worked on desktop, but when i opened my website in mobile, the text appears in its default font. know how to fix this? thanks

[@prashantdiwan863]

Hi I followed the same steps however the fonts are now changed but not the one I uploaded. I'm trying to change the fonts to ""Atomic age"> Can you please guide me how to do it?

[@SZN.Sunglasses]

@OnHOW Hi there, It worked for me on Dawn Version 9.0.0 but not on Version 10.0.0 and it would not work for my header and footer as well. Any help id be happy to take! Thanks Great video by the way.

[@ProfitableRisk]

it didn't work with i don't know why, it is because i am working on spotlight theme ? please answer me quickly

[@Fordropsh]

I did it the second time, maybe I can help?

[@xllotte]

Thank you so much for your videos! They really help. I tried this step for step bur unfortunately it didn't work.. had someone else has this as well and maybe already found a solution for it? :))

[@SmartServe_official]

hello, i want to change the font in my announcement bar, but I don’t know what code I have to add. It keeps telling me that there is no h1 in this section. Please help me

[@MarketingWithZacoda]

Worked like a charm. Thanks for the help!

[@noahintiso3197]

Thank you so much! Very clear, concise, and helpful!

[@DanDavies-m8d]

The font that shows up on the site at the end isn't the one you downloaded...? I've followed this step by step and the same thing has happened to me. The font has changed but it's not the correct one I'm trying to add?

[@OnHOWGuy]

The display of the font might look different due to Shopify frontend rendering but its the same font. From my experience you might want to test different similar fonts to find the right one for your needs. Cheers

[@DanDavies-m8d]

@@OnHOWGuy So when the site is live, the correct font should appear?

[@OnHOWGuy]

@@DanDavies-m8d No thats how Shopify renderers fonts on the browsers. Cheers

[@Kidzonee-s5u]

can you please show a way to fix all errors on page speed insight

[@just_toko]

Great tutorial! It was so easy to follow! Thank you for sharing your knowledge!

[@shivanibrijmohan6320]

Worked! Thank you

[@ramilafri2665]

Thank you sat! appreciate it!

[@OnHOWGuy]

You're very welcome and glad i could help. Cheers

[@Dawn-xn5qg]

This didn't work for me....can you help?😔

[@Crpra]

Hey I don’t know if you still need help but, If you pasted the h1,h2,h3,h4,h5,h6, body,p,a from the description then it doesn’t work. Try typing it and it should work.

[@ImaEternal]

Doesn't work, followed the video exactly and it doesn't load the font. Just defaults to new times roman.

[@OnHOWGuy]

Which theme/version you have ? im working on an update for this video. Cheers

[@NewTuberAJ5]

I seem to have done everything right and it doesn't seem to be working for me. I used the same theme and everything. went to the same convert page, don't know what seems to be the problem.

[@OnHOWGuy]

Check it out from a private window in browser, because browsers can cache old version of the website elements for longer time and specially fonts and so on. Cheers

[@mrbaileybishop]

That didn’t work either

[@mydopepr]

Once I uploaded the new font, it is not showing up in my assets menu. Can you help me?

[@OnHOWGuy]

Thats strange, did you change the file extension to woff just like i did ?

[@mydopepr]

@@OnHOWGuy I did. I tried two different files and two different converters too. I'll try again to see any kinks. Love your YT btw

[@OnHOWGuy]

@@mydopepr No idea why it wouldn't show up, i still have that font file on my assets for now. Thanks, really glad you like it. Cheers

[@TheOneStore-ik1gs]

thanks man just follow your instruction and I did yaaayyy

[@OnHOWGuy]

You're very welcome, glad i could help. Cheers

[@stefanocarretta6678]

Thank you so much !!! Can you please tell me if there is a website where I can set a certain size and it will automatically set my gif to that ? I need to do it BASED ON SIZE that I SET pls 🙏🏻

[@OnHOWGuy]

You're very welcome, you can search "resize gif" and you'll get dozens of websites that can do that. Cheers

[@stefanocarretta6678]

@@OnHOWGuy sir I’d like to ask you if I would succeed by only finding a niche and a product in demand with low competition with a nice looking website and profitable margin

[@OnHOWGuy]

@@stefanocarretta6678 Yes absolutely, perfect everything and you'll have higher of succeeding. Cheers

[@realsamratc]

Wait I don't understand, the video didn't changed the font you have. In Dawn theme it's just changing Sans Serif to Serif but not the font I have uploaded

[@Fordropsh]

I did it the second time, maybe I can help?

[@justmeagain112]

Thank you! This was really helpful

[@OnHOWGuy]

You're very welcome, glad it was helpful. Cheers

[@cameronevans2629]

my file upload size is always 0 no matter what font im using to upload to a converter??? I'm doing it as a tff not zip. PLease help. Video was great just isnt letting me convert

[@TamaraSammak]

me too

[@ATHANASIOSTEPEREKIDIS]

Dawn 12.0.0 dldnt work :(

[@teesprintandapparel]

Hi! Thank you so much for this tutorial! It did not change on the mobile version. Would you happen to know why? Thank you!

[@OnHOWGuy]

You're very welcome, Mobile caches the previous version of the website longer then desktop, check from private browser on the mobile. Cheers

[@OperationsBombucha]

You are a genius !

[@varunkochi5175]

I couldn't find the base.css file in the assets. Does anyone having the same issue? How to add a custom font without this file?

Even I am unable to find base.css or theme.css - I can see a theme.js though.. not sure if that's the one where I should be editing

[@SFT_training]

How to change the font only on the home page? The name of site

[@joninareynisdottir4574]

thanks man you saved me money

[@OnHOWGuy]

Glad I could help

[@davidpalermo6613]

Tried a few times, started the tutorial over. Didnt work. Maybe my theme?

[@jessewang-cp8ww]

Please help ,How to Add two custom fonts ?

[@AYYAYI]

jus do the same thing but when you get into the base.css put space between the code

[@jakepalmieri2356]

It changed my font but not the font I plugged in. any help?

[@kizu699]

same

[@DanielDabouffe]

Brilliant Video :)

[@NehirStore]

Why can't I convert fonts? When I move files to converter they show as 0kb

[@OnHOWGuy]

Hey is this still the issue or you got it fixed ? Cheers

[@ohwilly5549]

yup same here, i tried to convert files and it says 0kb. What the hell

[@StayStrongAndHealthy]

You are the BEST! Thanks

[@OnHOWGuy]

You're very welcome. Cheers

[@jatindersingh2260]

I did the same but it doesn't work for me I did try it on refresh theme which is free theme on shopify

[@untameddesigns]

I am having the same problem with the same template weirdly enough

[@joshbete9743]

bro I have a suggestion regarding your videos. The recent videos like this one, size chart, etc. These are tutorials which are already available and a person can find them on yt. I'd suggest you to make videos which directly help people with their shopify stores such as unique product research methods, store creation, ads, etc

[@OnHOWGuy]

Hey Josh, Yeah i understand your point and you might be able to understand my point as well. I did share some unique tricks that helped me a lot but when i post the video i get 7-8 like out of 200 views, people tend to get the info and leave which very common and normal thing on KZbin but i spent valuable time creating those videos, i run 2 SEO blogs, 1 Shopify store plus KZbin on the side, to pass on all of these to make valuable video then get very poor performance like that can be frustrating, These videos you see now are very easy to make but they help the channel get discovered my new viewers so after i grow my channel little bit i guess the ratio of likes/views would be much better than now then i'll blow people's mind with new ideas and undiscovered tricks. I hope you understand my point. Cheers

[@saladmuxyidiin1681]

@@OnHOWGuy what you think if you created Discord? Build a community

[@OnHOWGuy]

@@saladmuxyidiin1681 Yeah i was thinking about that but first i need to grow little bit more so the reach would be better. Cheers

[@carhoodie]

unfortunately not working. is it because i converted a otf file to woff?

[@joelgauchia7061]

same, did you solve the issue?

[@OnHOWGuy]

What theme are you using ? Try something else other than otf and see if that would work. Cheers

[@dynamokill1]

Thanks so much. A nice and clear explanation.

[@OnHOWGuy]

You're very welcome

[@MariaRodriguez-xj8gx]

Thank you this worked!

[@OnHOWGuy]

You're very welcome. Cheers

[@aravindhs9666]

this was very useful, but when i did this to my store, the home page fonts had changed but the text in the product page hasnt changed and idk why? can you suggest what could be the possible reason and give a solution, thank you

[@Ivan-id5fk]

the font changed but it doesnt look anyhthing smilir to what it should look like

[@SiriusOnca]

You can just go to your content section and add the font to files, copy the file URL it provides, and paste it into the URL section from the code provided here. Your welcome

[@wiolettataratuta3153]

Thank you very much, it was helpful

[@mamagen2101]

Hello dear, kindly do a tutorial on how to add the logo in footer in a big bold ?❤🙏 love all your vedios❤❤❤

[@ccna3913]

how we can add shopify font liberary fonts

[@Dhdusuebsnzhxjdjdndb]

khoya you are the best

[@OnHOWGuy]

Thank you brother, i appreciate that

[@kimviktorsson8248]

The font worked well for me, but it dosent show on mobile version. Anyone who knows how to fix this?

[@OnHOWGuy]

It might be a browser cache issue, try with other devices that you never opened the Shopify store in. Cheers

[@chrisrubio2218]

@@OnHOWGuy I am having the same issue

[@tashanku]

I've watched so many videos, but none help. I can't get past the first step because I dont have the theme.css page

[@OnHOWGuy]

Hey, im sure this one will help. You will find either theme.css or base.css and implement this for one of them because they are the same its just each theme uses a different filename. Cheers

[@homeless395]

thank you for the help!!

[@OnHOWGuy]

You're very welcome. Cheers

[@SebastianPerez-zh8gt]

its not working for me, not sure why