How To Add Custom Fonts To Your Shopify Stores (Easy Way)

[@WebDevJapan]

Dude, this just saved me so much time on a freelancing project. Absolutely amazing. Thank you!

[@WebSensePro]

Great to know, don't forget to subscribe

[@WebDevJapan]

@@WebSensePro Already done!

[@webfx-bt5yj]

GOATED been trying for hours and this worked thanks bro!

[@WebSensePro]

Your welcome

[@prod-c8i]

Great tutorial! Easy to follow and super clear. Thank you :)

[@WebSensePro]

You're welcome! Don't forget to subscribe

[@varunmohan7095]

Can you help me , because i couldn't give a specific font for a specific headings (like for store name).Once the font is applied the whole h1,h2,h3 comes with the same font.please reply, that would be helpful

[@WebSensePro]

Contact for websensepro.com/contact-us for paid support

[@Xtiandemedici]

I can’t believe this actually worked!!! I have a third party CMS theme I purchased from Envato elements, for Shopify 2.0. I didn’t think it would work on it so I made a backup copy like you instructed and wow did it work!!! I’m SUPER IMPRESSED with your ability to build an interface like this! Now all I need to figure out is how to change the font size in my header menu. The theme must be overriding the font size and the letter spacing. Please let me know if you know where I should be looking. Thank you so much!! That definitely got me to subscribe! ⭐️⭐️⭐️⭐️⭐️

[@Xtiandemedici]

Oh I forgot to mention that if you follow your instructions in your video, you place the code underneath the

[@WebSensePro]

Thanks dont forget to share and like

[@ToluIdowu-m6i]

can you do a updated video on how to change search icon on shopify dawn as your old one doesn't work anymore

[@WebSensePro]

Sure, will create a new video for that

[@caldasnake16]

Would you please make a video on how to properly edit the collection cover image on the collection page? It's absurd that there isn't any and searched a ton and couldn't find any code to do it. So I have the cover on the collection page settings for SEO purposes, but don't display it on the page itself.

[@WebSensePro]

Great suggestion

[@caldasnake16]

Great tutorial! Thanks as always! Does the CSS class selector overrides the current font settings for any element? For example, 90% of H1s would be "Font A", but for a few cases, like the H1 in the product title in the product page, I'd like to be "Font B". So, in this case, I'd only need to select the product title class in the CSS field in "Font B" and it would override "Font A"?

[@WebSensePro]

Yes it would over ride, you will have to add a custom class in this case

[@caldasnake16]

@@WebSensePro Like you've shown in the video, by checking it in the page inspector?

[@WebSensePro]

Yes and adding it to Liquid code

[@caldasnake16]

@@WebSensePro Ok. Thanks again!

[@vincentlevalois]

This is great, thank you! If I have more than 1 class to add to the CSS, do they need to be separated by a semicolon or something? Or just a carriage return?

[@WebSensePro]

Just add it normally

[@SneakerHead-z9j]

Can you make a video on adding different font for differn heading and paragraphs etc.That will be much appreciated ❤

[@WebSensePro]

I will try!

[@FishCookieFudgeSwirl]

Thank you, can you do this to add multiple new fonts, by clicking add font in the new ? Great video :)

[@WebSensePro]

Yes you can!

[@caldasnake16]

Do you know of your method has any impact on the store's performance? I currently use the RT fonts app and it seems to slow the performance dowb significantly, besides being a pain to select each CSS element individually since the "override" for H1, H2 etc doesn't work.

[@WebSensePro]

Shopify CDN's are very strong. It wont affect more than 1%

[@margogillis]

Awesome Video! Very Easy to follow! Do you have a video for paid themes?

[@WebSensePro]

No, as they are less used as compare to Free Themes

[@caldasnake16]

Do you know if this code would persist on future Shopify updates? I kept on v11 because there was a warning that a ton of custom code would be reverted if I updated to 12.0.

[@WebSensePro]

Yes it will work fine with latest updates

[@tekkers313]

Awesome Tutorial - Somehow I can edit the font on my language tab but when you click on the drop-down to see different languages you can't change the fonts on it, Can you help please?

[@WebSensePro]

Sure, contact via websensepro.com/contact-us for paid support

[@AS-rk5vb]

Doesn't work on my version of Spotlight theme. The custom fonts section appears but after I input all of my fonts in the theme editor it DOES NOT apply to the live website.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@trxvcy]

Hi, would you know why a custom font does not properly show on a mobile view?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@ksetshop]

My featured products font did not change with the rest of the fonts. How do I change that one as well?

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@faithandyou79]

​can you make a vid next on how to add shine effects to buttons on shopify ​or how to add zoom in effect on hover in collection images on main page and collection page

[@WebSensePro]

Sure, will create video on this as well

[@faithandyou79]

@@WebSensePronvm, i solved it. But what would be appreciated is a testimonial slider on homepage without apps! THANKS so much @WebSensePro You are the best

[@WebSensePro]

thanks for the suggestion

[@mohammedfayedhasan3824]

Does the debutify theme not work? Because I can create a section That shows the warning message "Illegal Characterize"

[@WebSensePro]

Not tested on debutify

[@jcnation5393]

I added a custom section into my shopify store. I also added a Font Picker in the schema so I can choose font for that section. How can connect that font picker to my element fonts? I tried making its font-family: {section.settings.custom_font} but its not working. Please Help

[@WebSensePro]

Please connect via websensepro.com/contact-us for paid support

[@dsgnchloe]

Hey thank you for great videos, could you please create a video on changing image banner to video banner that works well responsively on both desktop and mobile? Hard to find a good tutorial on this! thank you!!

[@WebSensePro]

kzbin.info/www/bejne/fqvPnHmrgKqCatk check this out

[@roeiamor7195]

hi i try to do it with hebrew store i do what you said in the video and was able to add the seaction but evey OTF file i uploaded to files and then take his link to the section nothing work i want to find this font - Almoni Neue DL 4 0 AAA in hebrew and download his OTF file so i can uploaded it to the secation pls help here

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@roeiamor7195]

@@WebSensePro why is paid lol i success everything in the video except the thing of where i find a correct file of font to upload

[@MakLoui-p3k]

Hi, thank you so much this worked so well for my website, your tutorial is so easy to follow. I was wondering if there was a way I could edit the font size and make it a bit larger.

[@WebSensePro]

More code needed

[@The.wisdom.family]

IT WORKED!!! thank you so much :)

[@fabian.eichinger]

Thank you very much!

[@WebSensePro]

Your welcome

[@candaceleslie5064]

Can you help me, I'm trying to use font from my wix website. All the font files I download don't turn out to be the font. What should I do?

[@WebSensePro]

Do you have these files in OTF format?

[@romyghalbouny1879]

Hello, I need help in implementing the font to my theme, is this something you can help me with?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@spidey1212]

There is a custom font section in my store now but it's not clickable. Pls help

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@rominaap92]

Hi! I've been trying for days and days and this is the easiest way, thanks for the video!! Also, is there a way I can make the font look bigger? thank you!

[@WebSensePro]

Will add that feature on this section

[@mcolombi95]

Hi, thanks very helpful video! Quick question: how can I specify multiple custom CSS selectors? I tried to specify multiple classes like this: .class_1 .class_2 but it doesn't work :/ Thanks in advance!

[@WebSensePro]

You will need to add code in section

[@mcolombi95]

@@WebSensePro what do you mean?

[@ashfakqkhan4764]

Sir is your background is real Or you added with any tool?

[@WebSensePro]

Real

[@henrijs1733]

thanks, but changing the size is glitchy

[@owiiornwbre6069]

thx you so munch this worked

[@WebSensePro]

You're welcome!