How to Change Fonts in BigCommerce

Hello everybody! In this video, we're going to go over how to change fonts in your big commerce store.

Before we get started, my name is Kal. I am a developer and a store owner just like you, and I run an online community for stores like us. I'll have a link at the end. Let me share my screen and show you some stuff.

Okay, first of all, when we come into your Bigcommerce store, you can click into, let's see, storefront icons and themes, and then click Customize. And you can see here that I am on Cornerstone in the Cornerstone Lite version. If I click into, say, the header, for example,

See, where's the editor? Global styles? Oh, yeah, global styles. And I can see body text and links. And I have a body text font family, Karla. And I can do Karla, which actually looks all right. Or Roboto, or Source Sans Pro—not a lot of choices, right? Three whole choices in a sea of fonts So really, really, the question we're asking is, how do we add more choices than this? Right?

I'm imagining you're not watching this video because you want to choose between Carla Roboto and Source Sans Pro. And maybe you have a different theme and have different choices. But you still want to do something different.

Custom Font

All right, good news is it can be done; bad news is it has to be done, for instance. Yeah. And the reason why is that you have to edit your config.json file. And that is not editable through the the theme's code editor.

So if you're not a developer and you're not doing stencil local, you might need to reach out to somebody to help you with this. But I'm going to show you how it works. So that you can kind of understand the options. And it's not that tough once you get into it.

Alright, so I have downloaded this into my local, and I have run my npm install and all that kind of stuff. So I'm ready to go. And I should be able to start stenciling. And while it's doing that, I'm going to go into config dot JSON. And we're going to look in here, and I'm actually going to do a search for bought; I'm in the wrong window. And I'm going to go up. And I'm looking for this right here: body, dash font, and heading dash font.

Using a Google Font

So Bigcommerce is going to load two fonts; no matter what you do, they're going to load into Google fonts. And so I strongly recommend it because a Google is going to load—well, they're going to load at least one different Google font. So you can make the two fonts the same font and make it so they only load one. But I really recommend just sticking with a Google font.

They're super performant.

And Bigcommerce is already set up and optimized to support custom fonts that run Google fonts. So I think that we should just change this. So let's say we want to change the body font. And what we can do here is look at the naming structure where it says Google underlined Carla underlined 400. Well, Google means it's a Google font.

Carla is obviously the name of the font, and 400 is the weight. So if we wanted to load Karla 700 there for whatever reason, we could just change that to be 700. And when we save this and rerun it, it will actually load that completely other font like this, like I do. But you don't want a 700 font for your body.

So let's say we actually want to do interfont instead of Google, I'm sorry, instead of Karla. Now there are a couple of different places where these fonts are referenced, because there's multiple styles in here. So you can see that it actually finds four instances of body font. And so the first one is the general settings one. And then there is the second one. Let's see. I'm sorry.

The second one here is the light variant. Let's see what the first one was, and then scroll up far enough. Okay, yeah, I was right. The first one is the general one. So this is like the custom one that's been applied.

The second one is the light version. The third one is the bold version of Cornerstone. And then the third one is the warm version. Now, I always recommend you just roll with light. So you're always making that top choice. So what I would actually do is change on the general settings, the first instance of body font, change it to Google Enter, and on the second one, which is the lite version, right?

I would actually change that too. So I'm going to say Google. Enter 400 And then I'm going to read a stencil. Okay? There it goes. So if I look at my body font, let's go inspect it. And look at this: my computed font for this paragraph text is now font family enter.

So that's literally all you have to do to load this whole extra font, because Google Drive Big Commerce has a script in the base HTML that says whatever Google Fonts are supposed to load, go ahead and load them.

So as long as we follow this naming structure, then it will load them just like it did here with this enter font. Now, if you're loading a Google font that has two words, you have to look at the documentation. I think that you should separate the words with a hyphen. So you just change the space to a hyphen—not an underline, but a hyphen.

I could be wrong. But you can load any Google font on BigCommerce. Just doing that.

Now, this only affects my local instance. So I actually need to push this up into my store in order for it to be enacted in the actual store. Okay, let's push on now. And when it's all done, it'll show up in my store; it will have been entered as a choice going forward. And life will be good. And we'll be rockin' in instead of Carla.

Super cool. I'll just give it a minute. And then we'll just double-check it.

Okay, so thumb-pushing And I'll come in here and to the customizer, and you'll notice that now, where we previously had a selection, that was showing here, where it says body text font family, and it said Carla; it previously said Carla right here, because that was the selected state, but now we've overridden it.

So it's actually not going to show anything here.

You could probably edit the UI here and have it entered.

But I don't think that's necessary or recommended answer, to be honest with you. Because it is an IT service rendered. And if I come back here, let me go back to my front end.

We'll just confirm it over here. Let me go back to one of related questions on these product pages.

You can see it now. Right here, the font family enters. And so this is on the public site, so we're good to go. So that is how you change a font.

Now I do recognize it is a little bit Cody. So if you don't have a stencil, you're going to need a BigCommerce developer to help you out. It is a pretty quick thing conversion work on, as you saw in this video, so you might be able to get an upworker to help you. Or if you're interested in working with somebody on an ongoing basis, Call these guys over at Epic Design Labs. Me and my team would love to talk about whether it's a good fit to help you out.

Whether you are interested in that or not, You might be interested in joining our community at ecommerce-amplifiers.com. I appreciate you guys being here.

Leave me a comment if this was helpful. Let me know if it was helpful.

Or if you're stuck on something else, that might be my next video. Thank you guys so much, and I'll see you in the next one.