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.
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
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!
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
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. :)
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??!!!
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 💖
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!
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!
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
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?
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
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?
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'.
@@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!
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!
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
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
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.
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!
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😭
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.
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.
![Shopify Store Best Practices [Dawn Theme]](http://i.ytimg.com/vi/es3GuN8IzVs/mqdefault.jpg)
Heads up!!! the 'files' section has been moved from Settings to the Content tab if anyone is having trouble finding the files tab! xx
THANK YOU!
Thank you very much.
Thank you!
Thanks I have searched for an hour.
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!!
Me too!
how could i change for all my font (all nbody text) and not just the titles please ?
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.
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
@@hablopicasso just paste the css code at the bottom of style.css.liquid file. That will do
ah ok that worked! thanks so much@@satishchakma7555
@@hablopicasso Hello, where did you find "styles.scss.liquid"?
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!
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.
I've been serching for 40 min, and finally was able to find a good tutorial, thanks bro, u saved me
Was determined to figure this out today and after watching like 8 other videos and getting nowhere I finally got it here 🙏 thank you!!
can i apply my font to the whole store?
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
Is it dramatic to say you saved my life? THANK YOU
omg i didnt think this would work bcs i tried so many codes, but this WORKED!! thank you so much im so happy rn
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. :)
the File tab is now found under content in the main page
ty
Thank you so so much!
Thanks a lot. You saved my life
Thank you! I was thinking I was losing my mind
How do I use the font for just h1 or h4? That's what I can't figure out.
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".
same man
My problem is that the new font shows on desktop but not on mobile how do I fix this issue
Did you manage to change that?
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??!!!
where do you need to past eit to also change the body font of the website
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!
4:41 Where is "Files". I didn't see it. Why didn't you show it?
6:35 What is the page?
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 💖
This worked for me too! Only thing is that it doesn't show up on mobile versions. Any fix for this?
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!
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!
How do I change header buttons fonts only?
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
how can i only use the font for one of the headlines, without oresetting every single headline?
For the desktop version in worked perfectly. But unfortunately not for the mobil version. Any tips on that?
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?
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?
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 ?
"Files" are now under "Content" in Settings and in theme.liquid, I would add the @font-face code before the {% endstyle %}
Hola! te funcionó?
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?
How do i apply this to paragraph and links aswell?
this worked but it affected more headers than i wanted. how can i make it so it doesn't affect all headers?
This was incredible! Thank you very much for the detailed instructions!
when I got to settings, I don't see "files".. :((
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?
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
Where can I find files? I can't find it in my settings
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?
Hey ! Thanks for the video.
I am just wondering how can I do this if I only want to change my pages titles :) ?
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'.
how do you change the font on the body-text in the bas.css part?
i am wondering this as well
did you find out how?
@@brandontellis did you find out how?
Click cmnd/ctrl f and search for "font family" and replace everyone just like he did in the video, worked for me.
@@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!
Worked like a charm! Thanks!
You're welcome!
Killer and detailed video. Thanks for the help!
Can someone explain to me where I get the URL from? I didn't understand that part.
link to the file of the font
What happens if there is no base.css?
what do i do if i need to change the font of 2 particular pages on the store only? help
Thank you very much. It worked on the desktop version but not on mobile...could you please help me?
i couldnt figure it out until i saw your video i love you
Glad I could help! -C
Thank you! That was really easy and it worked :)
I have followed the steps, all good but special characters and punctuation does not work. It defaults to Times Roman Bold. (? é ü etc.) ANy thoughts?
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!
you are my hero man... thanks so much
❤️
Really, really helpful! Thank you so much!
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
Sorry about that! Here is the link docs.google.com/document/d/1bjNjbWFUbHcve_Ca7KhlCN98sMQpIY653JNLQlrM9Qo/edit?usp=sharing
Is there a way to do this where you can select the font from the menu area where it typically is located?
no there isn't
yes there is just have to add font picker code
my Shopify domain isn't connecting idk what to do do u now how to fix it
change the dns A-Record to shopify IP Adress
Awesome video!
For the body, it doesn't seem to work like shown but it works for the Heading fonts. Still a great video though Thanks!!
since they forgot to actually add the code in the description
@font-face {
font-family: 'FontName':
src: url(yourURLhere)
}
Thank you. Here is the link as well docs.google.com/document/d/1bjNjbWFUbHcve_Ca7KhlCN98sMQpIY653JNLQlrM9Qo/edit?usp=sharing
Thank you ! This was helpful
WORKS, THANK YOU
This was soo helpful!! thank you!!!!
amazing!!! thank you. Suscribed!
All of a sudden the font isn't working when viewed on Mobile.. Do you know how to fix?
If i use Fontify instead of editing the code, will it slow down my store?
this doesn't work because I cannot see 'files' when you go into setting its not there for me
click "Content" on the left menu and files will pop up
finally a method that works. thanks a ton
You're welcome, thank you for watching!
I cant find H1,H2, H3
wheres the code?
Just added it to the description!
thanks alot for this one :)
nice and simple, thanks!
I'm trying to use a Google font but it doesn't seem to work. Am I the only one?
Thanks, this was super helpful!
I can't find the code!
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
It worked, it worked!
mobile version not working
It said .woff file contains illegal characters. 😑 I have no idea why.
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.
How do you do multiple fonts?
This worked. Thank you!
Thank you,it worked
what about for the body text ?
Reference the p element instead of your h elements in the css
@@desertrosedesignphoto Hey, how can I do that?
should I add the p element with the h elements?
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!
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😭
Never mind, I just deleted the before and after and got it! Thanks again for the video
@@TheToteLibrary Can you please share your code? I have tried without any results.
@@TheToteLibrary please share how you got it to work with me as well thanks
Thank you man. It worked
Glad it helped
it is so helpful i have solve the issue
Thank you for your help🎉🎉🎉🎉🎉🎉🎉
Thank You!
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.
Appreciate it! - Aaron
You saved me 😍😍
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
THANK YOU!
You're welcome!
THANK YOU SO MUCH!!!!
thx
How to add two Custom fonts to my Shopify Store ?
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!
Where can I find files? I can't find it in my settings
way too complicated for the non techie business owner
did the video NEED to be this long? get to the point
Probably not. Getting better each video and trying to provide free value to you. Thank you for the feedback.
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.
thank you, you are a lifesaver! 🙏
HOW DO I GET TO BASE.CSS?