How To Add Custom Fonts To Your Shopify Store

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

it is so helpful i have solve the issue

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. :)

Thank you,it worked

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?

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'm trying to use a Google font but it doesn't seem to work. Am I the only one?

Thanks, this was super helpful!

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

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. <3

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.

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

Can you do this on the broadcast theme?

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'.

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

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

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".

Super hepful tutorial. THANK YOU! Just in case anyone else doesn't find the "base.css" file, just look for "core.css" and do the changes there 😄

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!!

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

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

mobile version not working

You saved me 😍😍

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!

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

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

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

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

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

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 <style> tag. So something like this:

<style>
@font-face {
font-family: 'FontName':
src: url(yourURLhere)
}
</style>

that fixed my issue.

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

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

thank. you. so. much.

THANK YOU SO MUCH!!!!

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

Thank you man. It worked

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, works perfectly!

what about for the body text ?

This worked. Thank you!

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

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

I can't find the code!

THANK YOU!

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

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

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

wheres the code?

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