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!
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. :)
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
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!
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 💖
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'.
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
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
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.
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 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
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!
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!
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?
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?
@@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!
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.
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.
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
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😭
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!
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!
Was determined to figure this out today and after watching like 8 other videos and getting nowhere I finally got it here 🙏 thank you!!
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.
Is it dramatic to say you saved my life? THANK YOU
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. :)
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
This was incredible! Thank you very much for the detailed instructions!
how could i change for all my font (all nbody text) and not just the titles please ?
omg i didnt think this would work bcs i tried so many codes, but this WORKED!! thank you so much im so happy rn
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!
i couldnt figure it out until i saw your video i love you
Glad I could help! -C
can i apply my font to the whole store?
amazing!!! thank you. Suscribed!
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
Awesome video!
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!
Thank you! That was really easy and it worked :)
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 💖
Really, really helpful! Thank you so much!
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'.
Worked like a charm! Thanks!
You're welcome!
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
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
WORKS, THANK YOU
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
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?
finally a method that works. thanks a ton
You're welcome, thank you for watching!
How do I use the font for just h1 or h4? That's what I can't figure out.
For the body, it doesn't seem to work like shown but it works for the Heading fonts. Still a great video though Thanks!!
Killer and detailed video. Thanks for the help!
you are my hero man... thanks so much
❤️
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! 🙏
Thank you ! This was helpful
This was soo helpful!! thank you!!!!
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?
For the desktop version in worked perfectly. But unfortunately not for the mobil version. Any tips on that?
This worked for me too! Only thing is that it doesn't show up on mobile versions. Any fix for this?
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 ?
nice and simple, thanks!
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??!!!
Thanks, this was super helpful!
where do you need to past eit to also change the body font of the website
Thank you, works perfectly!
You're welcome! -C
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
this worked but it affected more headers than i wanted. how can i make it so it doesn't affect all headers?
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 apply this to paragraph and links aswell?
It worked, it worked!
Thank you,it worked
Where can I find files? I can't find it in my settings
What happens if there is no base.css?
when I got to settings, I don't see "files".. :((
thanks alot for this one :)
i dont have the add files option in my settings :( helpppp
4:41 Where is "Files". I didn't see it. Why didn't you show it?
6:35 What is the page?
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
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!
Thank You!
Thank you man. It worked
Glad it helped
it is so helpful i have solve the issue
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?
Can someone explain to me where I get the URL from? I didn't understand that part.
link to the file of the font
Thank you very much. It worked on the desktop version but not on mobile...could you please help me?
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?
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?
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!
Hey ! Thanks for the video.
I am just wondering how can I do this if I only want to change my pages titles :) ?
THANK YOU!
You're welcome!
wheres the code?
Just added it to the description!
I cant find H1,H2, H3
how can i only use the font for one of the headlines, without oresetting every single headline?
THANK YOU SO MUCH!!!!
Thank you for your help🎉🎉🎉🎉🎉🎉🎉
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?
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
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?
what do i do if i need to change the font of 2 particular pages on the store only? help
"Files" are now under "Content" in Settings and in theme.liquid, I would add the @font-face code before the {% endstyle %}
Hola! te funcionó?
All of a sudden the font isn't working when viewed on Mobile.. Do you know how to fix?
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
I'm trying to use a Google font but it doesn't seem to work. Am I the only one?
You saved me 😍😍
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
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
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
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
mobile version not working
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
It said .woff file contains illegal characters. 😑 I have no idea why.
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?
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
How to add two Custom fonts to my Shopify Store ?
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.
HOW DO I GET TO BASE.CSS?
thank. you. so. much.
This worked. Thank you!