How To Add Custom Fonts To Your Shopify Store

[@M_nxtdoor]

Heads up!!! the 'files' section has been moved from Settings to the Content tab if anyone is having trouble finding the files tab! xx

[@shannonbachorick849]

THANK YOU!

[@vinovault]

Thank you very much.

[@MentalistCaldwell]

Thank you!

[@junemonique]

Thanks I have searched for an hour.

[@BrockJunak-u6l]

This was so helpful. I watched like six different videos and none of them broke it down so simply. Finally got my custom fonts to work. Thank you!!

[@thejamescorwin]

Me too!

[@samaratrujillo7579]

I've been serching for 40 min, and finally was able to find a good tutorial, thanks bro, u saved me

[@satishchakma7555]

You are a lifesaver!! I just earned 30 bucks watching this tutorial. Thanks to you. 2 things. Now "File" option moved to "Content -> Files" below "Product" option. And some themes are different. I didn't find "Body" like the video in theme.liquid. So, I just searched for CSS and found the main CSS file which is not "Base.css" for me. It was "styles.scss.liquid" for me however I was sure it is the right CSS file when I checked inside and saw all the CSS including h1, h2, h3, h4, h5, p are in the file. I just went below and followed the rest pasting the codes as you did in the base.css. It works like magic. Thank you so much again.

[@hablopicasso]

Hey was looking for this specific comment because I also have "styles.css.liquid" 🙏. After searching I can't find the h1, h2, h3, etc section though. Was that something you added to yours? Thanks

[@satishchakma7555]

@@hablopicasso just paste the css code at the bottom of style.css.liquid file. That will do

[@hablopicasso]

ah ok that worked! thanks so much@@satishchakma7555

[@BufnitaSacra]

@@hablopicasso Hello, where did you find "styles.scss.liquid"?

[@bbtghrs]

They changed something with shopify, you have to use the actual URL like you did so it finally worked for me and a few of my friends. Thank you so much, a life saver!

[@limitedhangoutlive]

Thank you for this because it wasn’t working for me. Shopify really should just have a way to upload a font and choose it with the editor.

[@hablopicasso]

Was determined to figure this out today and after watching like 8 other videos and getting nowhere I finally got it here 🙏 thank you!!

[@kraspedaki]

saved my life. thank you forever ! One more tip: the font wasn't working in the secondary menu of the heading so i custom css directly in theme customizer then in the header section in the css box i wrote header then cp your code with the name of our custom font as did all the way through the process. x

[@anitarose.v]

Is it dramatic to say you saved my life? THANK YOU

[@b1mb0bot]

omg i didnt think this would work bcs i tried so many codes, but this WORKED!! thank you so much im so happy rn

[@feazix96]

how could i change for all my font (all nbody text) and not just the titles please ?

[@snowmanplan]

"Files" are now under "Content" in Settings and in theme.liquid, I would add the @font-face code before the {% endstyle %}

[@marcelozepedaf.3557]

Hola! te funcionó?

[@pauldavis7256]

[@Josh_bizz]

I watched 3 or 4 other videos before I got to this one and boy am I glad that I stuck it out. Thank you for the tips!

[@KineticEsthetics]

First and foremost, this is the only video that has worked! Thank you so much for this. This changes all of the headers, but how can I change the body text as well? Looking to use a separate font outside of what was used for the headers. :)

[@evie9603]

I couldn't get it to work for AGES cause i was using the code from shopify's font help page, then finally I changed to using your code and it worked perfectly 💖

[@oliviasmithdesign]

This was incredible! Thank you very much for the detailed instructions!

[@aempatie9055]

can i apply my font to the whole store?

[@AllieAdrian-i5j]

Killer and detailed video. Thanks for the help!

[@moshesabaah7277]

the File tab is now found under content in the main page

[@tokyorockstarVALORANT]

ty

[@saishaayurvedauk8959]

Thank you so so much!

[@adetunjiadenike4835]

Thanks a lot. You saved my life

[@Nicholl1976]

Thank you! I was thinking I was losing my mind

[@JimAlbers]

Worked like a charm! Thanks!

[@Bitbranding]

You're welcome!

[@bullspiritmarketing8238]

For the desktop version in worked perfectly. But unfortunately not for the mobil version. Any tips on that?

[@kennedymaui]

Really, really helpful! Thank you so much!

[@alerudu7131]

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

[@bullspiritmarketing8238]

Did you manage to change that?

[@KassataVR]

i couldnt figure it out until i saw your video i love you

[@Bitbranding]

Glad I could help! -C

[@Azreniakingdom]

Thank you! That was really easy and it worked :)

[@richardanderson8696]

Thanks - it worked - other videos on other channels on this topic do not - I think the file upload part was the difference - other videos suggest loading to 'assets'.

[@claritydive]

I spent hours trying to figure this out, and I did everything I found on Google and nothing worked. This was the only thing that worked for me. Seems like different things work for different themes cause I had no issues with the Ride theme, but when using the Studio theme, simply adding the font-face section to the base.css did not do anything so I'm so glad I came across this!

[@vssalas7]

you are my hero man... thanks so much

[@Bitbranding]

❤️

[@alicebrnra]

Thank you ! This was helpful

[@scottmcbulldog]

Awesome video!

[@WilliamMatteini]

Super video, and the smoothest solution for custom font. Only challenge I have right now is use a second custom font for H5 for example and also add an UltraBold version of the first custom font I originaly introduced to change a few tittles on my Hero sections

[@DandJf]

I genuinely have no idea what I'm doing wrong. I followed the directions to a T and yet the Header font is still "Assistant".

[@Gikmost]

same man

[@angchen37]

This was soo helpful!! thank you!!!!

[@ItsBeardy]

WORKS, THANK YOU

[@cesarmenendez171]

Great, video! If anyone else was having issues like me where the code was showing up on the top of the site. You have to plug in the font code inside a tag. So something like this: @font-face { font-family: 'FontName': src: url(yourURLhere) } that fixed my issue.

[@bearbear1246]

thank you, you are a lifesaver! 🙏

[@Леонид-с5з]

4:41 Where is "Files". I didn't see it. Why didn't you show it? 6:35 What is the page?

[@Saterata13]

Chrisian, randon question: is there way to add those as a default theme font (in cases when you want it to be visible in customizer)? Grateful in advance!

[@edakarajillo]

amazing!!! thank you. Suscribed!

[@emilfrederikhyerhorn6556]

how do you change the font on the body-text in the bas.css part?

[@brandontellis]

i am wondering this as well

[@charlieharris9028]

did you find out how?

[@charlieharris9028]

@@brandontellis did you find out how?

[@Poj1]

Click cmnd/ctrl f and search for "font family" and replace everyone just like he did in the video, worked for me.

[@CandleLight-ho3ji]

​@@charlieharris9028 I found the way to do it! All you need to add is the below at the end of the code (see full example of code below): @font-face { font-family: '(Your Font Name)'; src: url(your _font_url) format('woff2'); } body, p, a { font-family: 'Your Font Name' !important;} Save and then preview the store, now the full body is changed to the font you want!

[@amirperrymusic]

How do I use the font for just h1 or h4? That's what I can't figure out.

[@sikandarrazzaq]

Hi Thanks for the video, worked fine. Just the Heading with the Home and contact us fonts on Dawn Theme havent changed. Can you help me with that?

[@luketritton5066]

This worked thanks! Other solutions didn't. I might be being really stupid but I couldn't find the code to copy and paste so just eyeballed it from the video

[@Bitbranding]

Sorry about that! Here is the link docs.google.com/document/d/1bjNjbWFUbHcve_Ca7KhlCN98sMQpIY653JNLQlrM9Qo/edit?usp=sharing

[@prodbyjss]

thanks alot for this one :)

[@emmarosenthal5972]

Hey ! Thanks for the video. I am just wondering how can I do this if I only want to change my pages titles :) ?

[@romanaffiliate2414]

nice and simple, thanks!

[@andra1110]

finally a method that works. thanks a ton

[@Bitbranding]

You're welcome, thank you for watching!

[@loumesnier]

It worked for me thank a lot, but I have an issue with the font of the menu, it doesn't change. Do you have any idea of the problem ?

[@zoearseneau9834]

This worked for me too! Only thing is that it doesn't show up on mobile versions. Any fix for this?

[@gonqui]

Hey! Than you very much, it was very helpful, but the new custom font isn't in every page. How can I apply it to every page of my shopify store?

[@oldaccount6122]

So it does work and it changed my headings to my brand font however its changed the announcement bar font which I dont want to be the same as my headings. Can you please help me with the code for that??!!!

[@mariagracecares]

Thanks, this was super helpful!

[@sohanrk1240]

Thank you,it worked

[@PaulPieza]

This worked. Thank you!

[@Desi-TinyTreasurePrints]

It worked, it worked!

[@djibization]

Thank you very much. It worked on the desktop version but not on mobile...could you please help me?

[@Daveisoutdoors]

I have followed the steps, all good but special characters and punctuation does not work. It defaults to Times Roman Bold. (? é ü etc.) ANy thoughts?

[@SamirDoesGaming]

its sometimes the font. not everyfont has a complete character set, due to either it being a trial font or the font simply doesnt have said characters. hopefully this helps!

[@TwentyOneTwelveBoutique]

HI. This worked perfect for me on my end. But it seems no one else can see the font when they go to my website. not on their mobile or desktop. Any solutions?

[@Sinkadusen93]

How do i apply this to paragraph and links aswell?

[@UnchainedRonin]

where do you need to past eit to also change the body font of the website

[@InformationGnarly]

Can someone explain to me where I get the URL from? I didn't understand that part.

[@matthewnguyen2606]

link to the file of the font

[@misa8836]

I would like to add 2 custom fonts to my store. I followed your tutorial and it worked for me being able to add one font to my entire store. However I have 2 fonts associated with my brand, and would like them in certain places. How would I do this?

[@jardinhuonginc1064]

I am trying my best to try and understand why its not working. I have the Dawn theme. I downloaded fontify and found a font I would like to use and as i follow your video, everytime I click save, Nothing has changed! I can't seem to understand where or how Its not working

[@abdulhaseeb-sh7oi]

How do I change header buttons fonts only?

[@TrellWest]

Is there a way to do this where you can select the font from the menu area where it typically is located?

[@IggyHires]

no there isn't

[@mykillstreak]

yes there is just have to add font picker code

[@zahid3d29]

Thank You!

[@sabrinawoods853]

I got it to work but I don't want the titles to have that font its hard to look at. Is there a way to change that?

[@planforAI]

my Shopify domain isn't connecting idk what to do do u now how to fix it

[@suipC]

change the dns A-Record to shopify IP Adress

[@ansbinzafar1637]

it is so helpful i have solve the issue

[@victor.escobar]

how can i only use the font for one of the headlines, without oresetting every single headline?

[@brandonkay-qe9yl]

this worked but it affected more headers than i wanted. how can i make it so it doesn't affect all headers?

[@refetshaqiri]

Thank you man. It worked

[@Bitbranding]

Glad it helped

[@shantecraft]

Where can I find files? I can't find it in my settings

[@TriEsentBrand]

Thank you for your help🎉🎉🎉🎉🎉🎉🎉

[@drudles3332]

wheres the code?

[@Bitbranding]

Just added it to the description!

[@Hasan-hp2nn]

THANK YOU!

[@Bitbranding]

You're welcome!

[@prachivalechha7252]

what do i do if i need to change the font of 2 particular pages on the store only? help

[@chantalkock8295]

THANK YOU SO MUCH!!!!

[@TheToteLibrary]

Amazing video! I have one question: When I add the custom font the mobile view stops working, so when I open the site on a phone it shows it like a desktop. What is the reason for that? Can it be solved? Thanks in advance and keep up the videos!

[@TheToteLibrary]

I tried moving the code within the head area, but now shopify's little banner saying share the preview doesnt show up so I cant check it on a mobile device😭

[@TheToteLibrary]

Never mind, I just deleted the before and after and got it! Thanks again for the video

[@DRYESWEDEN]

@@TheToteLibrary Can you please share your code? I have tried without any results.

[@10Chuckyy]

@@TheToteLibrary please share how you got it to work with me as well thanks

[@d7721]

For the body, it doesn't seem to work like shown but it works for the Heading fonts. Still a great video though Thanks!!

[@ajromeo7656]

What happens if there is no base.css?

[@MyGlowingEra]

when I got to settings, I don't see "files".. :((

[@antonjake]

If i use Fontify instead of editing the code, will it slow down my store?

[@FindMyVitality]

I can't find the code!

[@Bitbranding]

Sorry about that. I thought we had added it to the description. Here it is docs.google.com/document/d/1bjNjbWFUbHcve_Ca7KhlCN98sMQpIY653JNLQlrM9Qo/edit?usp=sharing

[@Marketingfastlanes]

thx

[@ItsOlio]

All of a sudden the font isn't working when viewed on Mobile.. Do you know how to fix?

[@TheTrunGtrunG]

This does work but is not best practice. You can just create a new css file "customization.css" (for example) This file just need to be inlcuded into the header of the theme.liquid llike the base.css file. In the customization.css you can put all css changes there like font-face or assignment for h2 or body. So you'll have all changes at one place and don't need to look through the whole code too change it.

[@mdf1919]

How do you do multiple fonts?

[@ybeedrinks]

this doesn't work because I cannot see 'files' when you go into setting its not there for me

[@wepowerofficial]

click "Content" on the left menu and files will pop up

[@charlieharris9028]

what about for the body text ?

[@desertrosedesignphoto]

Reference the p element instead of your h elements in the css

[@aliam6114]

@@desertrosedesignphoto Hey, how can I do that? should I add the p element with the h elements?

[@alee_here]

You saved me 😍😍

[@MotionMU]

Just as a recommendation as fellow content creators, try to make the edit a little more fluid. It should not be noticeable. You're adding way too much zoom on some parts, good visuals on others and then no visuals for some time.

[@Bitbranding]

Appreciate it! - Aaron

[@SergioSalazar-k6t]

I'm trying to use a Google font but it doesn't seem to work. Am I the only one?

[@GenesisSWarner]

It said .woff file contains illegal characters. 😑 I have no idea why.

[@MartinaZabert]

I cant find H1,H2, H3

[@shijidesigns5803]

mobile version not working

[@NikoGangadean-b3p]

If anyone else is experiencing the issue of the font not uploading to the store properly delete the "!important" code and it should fix your problem

[@LAMENTED_CO]

I got a migraine after this not working for 100 times with everyone else's instructions. Hard coding the URL into my files fixed it!

[@shantecraft]

Where can I find files? I can't find it in my settings

[@jessewang-cp8ww]

How to add two Custom fonts to my Shopify Store ?

[@Dylan-yn1wp]

did the video NEED to be this long? get to the point

[@Bitbranding]

Probably not. Getting better each video and trying to provide free value to you. Thank you for the feedback.

[@Cvtreasures]

way too complicated for the non techie business owner

[@itsdurao]

since they forgot to actually add the code in the description @font-face { font-family: 'FontName': src: url(yourURLhere) }

[@Bitbranding]

Thank you. Here is the link as well docs.google.com/document/d/1bjNjbWFUbHcve_Ca7KhlCN98sMQpIY653JNLQlrM9Qo/edit?usp=sharing

[@alinakaram5540]

HOW DO I GET TO BASE.CSS?