[2022 Free] How To Add a CUSTOM FONT To Your Shopify Store -Easy Step-By-Step Tutorial

[@EcomExperts]

👊👊 Get access to *THE BEST* Ecommerce Email Marketing course ------ tinyurl.com/nnhrezf7

[@WJP_W]

Hi, thank you for your video. I've run into an issue where the is no theme.scss.liquid as apparently Shopify has moved away from this. Is this true? If so, does it mean I am to edit base.css?

[@ImReclusive]

also looking for answer please

[@sarahbarnes2269]

Thanks, Andrew, very clear instructions thank you. I'm now looking for the next video to add the custom font to the drop-down in the font settings. (what you were talking about briefly at the end)

[@jonathanwilliams3734]

THANK YOU SO MUCH!! I've been to France, its such a beautiful place.

[@iftinur]

kzbin.info/www/bejne/i5u6hmaOgcyHZ6csi=3CwYzbZZBKqDYSQT | New video Add a CUSTOM FONT To Your Shopify Store

[@50MMCollective]

Thanks for the video! I was following along but "theme.scss.liquid" was not an option in my assets. any suggestions? thanks again!

[@SuVienChen]

Same! I have theme.css without the liquid

[@decembersvown3806]

@@SuVienChen use theme.css for any file containing css in it. Works fine

[@ebkliewer]

Help!!! I don’t have any css with theme in it. What are my options. I read the comments and nobody is having this same problem. In the past it worked, but I had a different theme. Thanks!

[@paitowin830]

I’m having the same issue

[@webmarina]

Same problem. I have a District theme and can't find anything like theme.scss.liquid

[@visibledata754]

I don´t have the theme.scss.liquid in my assets folder. I just have theme.css there?

[@EcomExperts]

Theme.css will work. :)

[@floatingodds]

How do I apply it to the mobile version? I'm using Dawn theme 2.0. I edited base.css for desktop but it doesn't carry over to mobile. Thank you.

[@marijanabosnjak5658]

This was so helpful, I manage to add my customer fonts but I have noticed that they are not displaying on the mobile version only on deskop. Do you have any advice on how to make them visible on the mobile version? Thank you so much!

[@hazelmendi]

Hi Marijana! Did you manage to get this fixed? I'm curious to know as I'm having the same issue.

[@evakenofficial]

did you got an answer?

[@martincouch2775]

is there a new way of doing this as since the shopify update doesnt allow you to upload .otf files directly through the assets folder I cant seem to get it to work. I am using the prestige theme and I have noticed a few people in the comments saying about that particular theme having issues and needing to use otf instead of woff

[@boidiman13]

Thank you for the great tutorial 👍

[@Wegmanshop]

Hi Bro, can you add 2 fonts like a Black and a Medium font ? Just added the black font but another font is the same process or not?

[@EcomExperts]

It is the same process, just change the name of the font and css selector. :)

[@worwantube]

This works amazingly. Thank you!

[@frederikmichieli5776]

thanks mate, i love you, i hope you have a beautiful day.

[@Natuurell]

You and ROCK! Thank you so much for this tutorial!

[@MsBaddest120]

Thanks for the video but it didn't work for me. I did everything exact, I made sure of it. I don't know where I went wrong

[@nickhansell]

Hi Andrew! I followed all your steps and it looked/ looks great on my computer website, but the font doesn't carry over to my mobile site... any easy fixes? Please help!

[@chacon-raw]

did you fix it?

[@TarikMoussaoui]

Hi! Custom font is not loading I have this error "OTS parsing error: incorrect file size in WOFF header" any idea on how to solve this ? Tried another font converter to make sure file is not the problem but the issue is still there

[@candicembeasley]

Hi! This video was super helpful. QQ - If i want to add more than one font, would i have to repeat the steps or do i another step?

[@alexgeorgeedwards]

This is a great tutorial - thanks mate.

[@balazsvarga3737]

There are sections that are under the same group (I mean group like "body"(im not a programer sorry hehe)) but I want them to be separate from each other in style, how should I do it?

[@AdventuresWithQuinn]

sounds like you need custom classes

[@JackyBaan]

Can you please also explain how to get the font-variant-ligatures: discretionary-ligatures; in Shopify?

[@UmbertoFontanazza]

Have you made the video about adding the font to the font_picker options?

[@mainlek3971]

by the look of it, i don't think u can add custom fonts from the picker. i hope i'm wrong.

[@jdclegg3485]

Config getting in the way? schema + data and the font picker stopping it from displaying

[@alerudu7131]

My problem is that the new font shows on desktop but not on mobile how do I fix this issue

[@anamikabhandari6622]

Thanks Andrew! This video was super helpful.

[@jaydeemichelle]

So i only want it on my header on my front page but it applies to my other titles in the website

[@gilbertnene24yahoo]

Andrew exited for a video about the font on the phone📲👍🏾

[@EcomExperts]

Coming out in the next few weeks. :)

[@jedsadvisorychannel]

@@EcomExperts Great video. However, I am having difficulties with the font not showing on mobile. Has this video come out yet?

[@emmanuellekaempf8385]

Hello, Thank you for this - it was very helpful. I am wondering if you have a training to add third party hosted font on a store. Thank you!

[@matthewreed6824]

Thanks for the tutorial, This worked a treat for one font. I am looking to add two different fonts to match the branding on another website, can this be done and how? Thanks in Advance!

[@HM-dj8sw]

Don't know why but it didn't work for me. I'm using the Narrative theme on Shopify. Can you help? Thanks

[@dexterr8824]

hey andrew! what if i wanted to make exceptions on what is affected by font? so for example: if ididnt want every "span" to be affected?

[@RichardDeWalt-wr5cc]

I wish i could figure this out - works great on chrome-PC but does not work at all on chrome-Mobile (android). Why does this not work for mobile?

[@olivierstorm2263]

Hi great video! I have a problem. The font changes. But it doesn't change in the right font, it just changes into a classic type font. I have tried multiple fonts they all give the same result. I am using a google font, so any updates on that video about adding google fonts? Thanks!

[@AdventuresWithQuinn]

Honestly at this point it might be easier to use a free app in the shopify app store like fontio

[@fast86gti]

theme.scss.liquid does not appear in the theme i've selected on shopify under assets. I'm able to find it in another theme i was working on but that theme doesnt fit my site as well as the express theme does. help?

[@muhsinkhalif3621]

Thank you andrew! God bless your heart.

[@EcomExperts]

Our pleasure!

[@habibgolpa152]

Hi, Love your work! My right click wont work on my mac to inspect the text title names. Any suggestions? :/ Thank you so much.

[@EcomExperts]

Hi Habib! It looks like you don't have Developer menu enabled on your Safari. To do so, open the Safari browser, click on Safari -> Preferences. Click on Advanced. Check the Show Develop menu in menu bar checkbox. Doing this also allows you to Inspect Elements on iPhones by connecting them also. Tell me how it went :)

[@sophiegardner4883]

@@EcomExperts had the same problem thanks

[@jada-kayshax4987]

Hi andrew after I done the code it wasn’t letting me save. It saying an error

[@zhenpi7846]

So I'm on a Mac and whenever I preview the site and then right click on text, I don't have the "inspect" function

[@EcomExperts]

only on google chrome browser :)

[@cybermoongamer1071]

The primary step is to enable the Developer menu. To do so, open the Safari browser, click on Safari -> Preferences. Click on Advanced. Check the Show Develop menu in the menu bar checkbox. The Inspect Element feature should be now enabled.

[@technicalserviceswithhaya9364]

Please send me the link of font converter website that you used in vedio...

[@sanjanamun1452]

Hi, i'm using impulsive theme and when i upload the woff2 to asset, it doesn't appear at all

[@DelmarBD]

Hi Whereabove is the lines of code you said you would provide in the video? I watched all the way through but then couldn't find where it is when I searched below your video. Thank you for the helpful instruction. The conversion idea worked very well.

[@DelmarBD]

Tried just copying from what I could see visually in the video but kinda made a mess. If you can provide the line codes that would be great. Thank you.

[@EcomExperts]

Follow this link and you'll get it in your inbox: zfrmz.com/MLm2oiSwD0OIJuUuYRr5

[@marc-alexandretozzi605]

That was some good french! "les goûts et les couleurs ne se discutent pas"

[@vladimirbecerra8662]

Hi Andrew. Very helpful video! Any thoughts on why my changes are reflected on Chrome, yet when I change browsers a couple of sections show a different font? Any solutions on how to solve this issue would be deeply appreciated. Thank you.

[@tiffanyhairaestheticsclini39]

Hey, not sure if you’re still looking for the answer. In my experience it is depending on which font files you upload. .woff and .woff2 work on most browsers but some still require a .otf or .ttf file as well

[@sekha24]

This vid was really good. Do you have your new video on how to add Google font to the Typography section?

[@littlemissflor]

Hey! Thanks for a great video. I'm looking for the video you reference about how to add Google fonts to your Shopify store. Can you help, please? Thanks!

[@WTFENIGMA]

So to do two different fonts u have to code it

[@CelStarProductions]

You didn't provide the case selector copy and paste thing :'S

[@lassehomfeld4684]

Hey, great video! But the font just wouldn't for the element I want it to. I'm using the Pipeline theme. The code of the element is: ...... So I'm taking "title--overlay h2" and insert it into the code (without the " "), but the font for the element won't change. If I plug in "h1", the font changes, but also for all other h1s, which I don't want. Can you help me with that? Thank you!

[@QuestionTheUnknown]

Can someone help me find the link for the code he provided 5:51 mark?

[@xxbunnysmashxx]

this is incredible i first wanna thank you for such clear instruction!!! unreal. Anyways my question is about type size, are there ways to bypass the limits on font size through code in shopify? thanks!!

[@t7syonpc]

where is the link bellow for the bit of code

[@maddiwoodcock5548]

Hi! I was just wondering if there is a way you can change a particular part of the text without changing other parts of text with the same code? For example, I want to change the code 'span' for a particular heading, but when I add this into my coding it changes a big paragraph of text that I don't want to change and makes it very hard to read. Thanks!

[@AdventuresWithQuinn]

you'll need a custom class

[@Riot-Mafia-UP32]

Use tag and assign the CSS

[@AnnalizaArteaga]

HI! Thanks so much for the video. I got it to work however; I have a sticky header and noticed that the changed font only appears on the home page of my site but when clicking on another page the font defaults to another style. Can you share how to make the "added font" work on each page of the sticky header? thank youuuuu!

[@AdventuresWithQuinn]

the class must be different on the other pages - use inspect from chrome to isolate it. Fontio has an easy custom class picker

[@flara1258]

This is great! got instructions over email - thank you so much!

[@EcomExperts]

Glad it was helpful!

[@coramaylovepink]

I used this on my shopify site, and it worked on my dell computer, but when I look on apple devices it reverts to the original font. Please help!

[@EcomExperts]

Hi Cora! It looks like your theme is using diferent fonts for mobile. Which theme are you using?

[@coramaylovepink]

@@EcomExperts I actually just paid for a font app to put it in for me. I was having a lot of trouble. But Thankyou for replying back!

[@benmorton6399]

Hey bro, I'm so lost. The link via your email gives my 5 pages of code... where do I find the "@font" section to copy and past?

[@EcomExperts]

Hi Ben! Check your email again please. You should only get 2 pages of instructions and a small block of code. Tell me how it went!

[@ashleyramos3607]

@@EcomExperts I really like your videos! you are super helpful. Do you mind sending me same code for the @font to copy and paste. I don't seem to find it below. [e-mail]

[@misendii1909]

@andrew i need the @ code please

[@colinw9908]

Legend! Thanks so much

[@EcomExperts]

Glad it helped!

[@jordantaylor7373]

Hi there, I can't find the code for the new font?

[@nickhansell]

IMPORTANT! One step was forgotten! Make sure to add the fonts as new assets classes!!! That's how itll show up on everyone elses!

[@chacon-raw]

Hi Nick how you do tha?

[@evyylabauve1965]

After following all of the steps, my font is not translating onto my website. Advice?

[@antshow2062]

Such a cool video I only have the theme.css under assets still gave it a shot and didn't work

[@EcomExperts]

It should work! Try again :)

[@soaudacious7699]

@@EcomExperts I've also tried this and it doesn't seem to work for me.

[@mandywelch2298]

Hi Andrew! Awesome video - but it didn't work for me :( I'm trying to use the font Bigilla (which I bought, woff & woff2 files) and my theme is Impulse by Archetype themes. Can you help me? Hope to hear from you soon!

[@EcomExperts]

hey Mandy - strange that it doesn't work - i think at this point you need a dev that jumps into your code and see where there is conflicting info. I try to make the videos fit everyone but its not easy considering there are thousands of different versions of the same codebase out there. Maybe check out HeyCarson they do small jobs like this!

[@codcoffee1500]

PLEASE HELP This line of code is showing up on the debut theme, catalog tab underneath each product after the sold out square family: Griffon,serif; font-weight:400; font style:normal;

[@codcoffee1500]

SOLUTION: change WOFF2 to WOFF, DELETE OLD ASSET AND REMEMBER TO CORRECT THE NAME.

[@Vidday]

Awesome! Merci beaucoup!

[@jessen7992]

how to paste font code, i only have woff file,but don't know how to read it and paste. thanks for your video

[@EcomExperts]

Watch the video again :)

[@gizmo4835]

Is there any way to change the fonts in your theme's 'Typography' editor?

[@EcomExperts]

You can change fonts, but you can't upload custom fonts :)

[@cedralix]

@@EcomExperts too bad

[@gilbertnene24yahoo]

Hi Andrew! Thanks, great video! It works perfectly! After adding the code, my logo in the header menu flashes when I scroll down on the home page. I will appreciate your help, what could be causing this? You are a crack 🙌🏾Merci

[@gilbertnene24yahoo]

I found the error😅👌🏾. Thank you!

[@EcomExperts]

Nice to hear that you found the issue :)

[@xeqias2510]

What if i want the yourcssselectorhere to be my site navigation, i cant find it?

[@EcomExperts]

Just check what css selector is your navigation using :)

[@ItsKimestry]

My woff file doesn’t download to a zip file on my Mac.

[@ashleyhenry1034]

Neither does mine :( This is where I am stuck at, someone please help :(

[@thecoffeenomad]

This did not work at all, my file name is theme.css for the debut theme. It worked the first time i did this, but after sometime, it stopped. So I change the font because I believed it was a licensing issue. Redid everything step-by-step and still nothing.

[@darnsleek5362]

Thank you!

[@jeremiahmedel9608]

it's been 2 years and you still haven't uploaded a separate video on how to add your font on the list of the customizer, or maybe you can't?

[@amrsalama151]

I did exactly as video, but when I inspect element the font name appears but it shows a different font like a default font or something, it is not showing the font that I uploaded

[@robinvanderpol3069]

I have the same, did you figure out the cause?

[@amrsalama151]

@@robinvanderpol3069 unfortunately not

[@amrsalama151]

Hello Robin, I figured the problem was you have to upload your woff files to shopify files section and then manually copy the link and link it in the code.

[@MichaelKarapetian]

@@amrsalama151 You're the MAN. Thank you!

[@ahmadawan4496]

ttf format also worked so no need of change of file format

[@jairochavez6782]

Good video !! Thank you for your help

[@EcomExperts]

Glad it helped!

[@Careonnet]

Where is the liquid code?

[@NAMIIBEAUTE]

How do we change the font from what we changed it to 😩😩😩

[@umaranwer8800]

You're awesome

[@evakenofficial]

my custom font doesn´t apply to my mobile page`??

[@melonyshowell7193]

Where's the video for adding the font to the customization section? This was super helpful but that's what I really need! 😭

[@EcomExperts]

Coming soon!

[@copyright2264]

@@EcomExperts NEED THIS TOO, NEED TO BE ABLE TO CHOOSE MY FONT EASY AND SWAP IT THANK YOU. LOVE YOUR VIDEOS

[@ivowouters3924]

@@EcomExperts Is this video released yet?

[@afloatingworld]

Why dont the changes show on mobile?

[@Crickle12]

I try to follow your tutorials but I never have the same files. What gives?

[@sjal]

Crystal Eyez: "Hi guys, I see a lot of you are having trouble finding "theme.scss.liquid" as Andrew shows in his tutorial. Instead, use "base.css" under the Assets folder and scroll all the way to the bottom, then follow the rest of his instructions. Hope this helps some of you!"

[@jdclegg3485]

What about the schema?

[@undonido9193]

I don't have the theme.scss.liquid in my assets folder

[@EcomExperts]

What about stylesheet.css.liquid ? :)

[@kuwyjitsu]

I don't see the link for the code anywhere. Please help?

[@EcomExperts]

First link in the description box :)

[@crystaleyez1794]

@@EcomExperts 3rd link for me ;)

[@mkashutoshcoding]

how you do it without uploading it

[@august25th38]

it didnt work for me, it changed to font to a random other font instead

[@EcomExperts]

Hi, did you make a duplicate of your theme? If you did you can try it again. :) This should work, but only if you follow it step-by-step.

[@pritamdey25]

How to add this on typography selector

[@EcomExperts]

I am not sure I follow. Can re-phrase your question?

[@matthewkerr8872]

I like the way you put all this useless stuff in the description but you miss the actual good stuff like the code

[@EcomExperts]

It's the first link in the description :D

[@gizmo4835]

Instead of altering the CSS itself?

[@EcomExperts]

You can change fonts, but you can't upload custom fonts :)

[@florencekwok2984]

hey question, the font isn't showing up on mobile but it is on desktop. how can i fix this?

[@EcomExperts]

Which theme are you using? :)

[@mariusmeuser4331]

@@EcomExperts Same here. I'm using the Ride theme.

[@Nickington2]

yeahh nothing's working for me unfortunately, I guess it's just specific for my program or something but sans is okay I guess

[@EcomExperts]

It should work. Which theme are you using?

[@fatimavaldes8495]

@@EcomExperts It didn't work for me either. I'm ussing Express theme.

[@MsBaddest120]

@@EcomExperts I'm using Motion Theme and it didn't work for me

[@lwoof343]

didn't work for me either I'm using Prestige theme. Did you find a way to make it work?

[@julieherrera7466]

I dont see the codes here. :(

[@EcomExperts]

Hi! You should get it in your inbox. If you don't see it in the primary inbox, there is a chance it ended up in the promotions folder. :)

[@EcomExperts]

@@NQuiz52 Hi! Just choose from the dropdown and you should get it zfrmz.com/MLm2oiSwD0OIJuUuYRr5

[@AliseChachka]

Anyone else can't get it to work? My 'theme.liquid' file is not even in the Assets folder, it's in Layout.

[@EcomExperts]

Theme.liquid should be in the Layout folder. What are you missing? :)

[@AliseChachka]

@@EcomExperts Thanks for replying! Figured it out, I was using a different theme - Dawn. It has a base.css folder instead.

[@floatingodds]

@@AliseChachka were you able to change it for mobile? I'm using dawn also but only desktop version works.

[@AliseChachka]

@@floatingodds no :( that's so annoying. let's let each other know if anyone of us finds the solution

[@floatingodds]

@@AliseChachka bummer. Will do! Will spend some time researching today.

[@f3linous362]

not working anymore :(

[@danielafloresferrer2200]

I dont see the codes here

[@EcomExperts]

Hi Daniela! Click on the first link in the description box. :)

[@TheRealBAP]

this did not work for me

[@EcomExperts]

It should work for the most of the Shopify themes. :)

[@nickhansell]

THIS DOES NOT WORK! It only looks like it works on your website, but doesn't translate to others. BEWARE!