Oct 1, 2023
How to Change Fonts in BigCommerce
In the ever-evolving world of ecommerce, standing out is key to success. Your online store's appearance plays a pivotal role in attracting and retaining customers, and one aspect that can make a significant difference is your choice of fonts custom icons. But what if you find the default font options on BigCommerce limiting? Don't worry; we've got you covered!
In this video, our CEO Kal, a seasoned developer and store owner just like you, takes you on a journey through the process of changing fonts and icons in your BigCommerce store. Whether you're a BigCommerce designer, developer, or store owner, this video is packed with valuable insights conversion techniques that will help you transform the look and feel of your online store.
Exploring Custom Fonts in BigCommerce
Before diving into the specifics, let's provide you with a sneak peek of what you can expect in the video:
Kal walks you through the BigCommerce theme customization interface.
Discover how to access global styles and locate font settings.
Learn how to change the default fonts to give your store a unique look.
Kal shares tips on optimizing font choices for performance and aesthetics.
Get hands-on guidance on editing the config.json file to add new fonts.
Understand the naming structure for Google fonts and how to integrate them seamlessly.
Witness the changes in real-time as Kal demonstrates font replacement in action.
Discover how to push your font changes to your live BigCommerce store.
Now, let's delve deeper into the process of changing fonts in BigCommerce. Kal demonstrates how you can access the store theme and customization settings, find global styles, and tweak the default fonts. The video provides step-by-step instructions, making it accessible for both beginners and experienced users.
Taking Control of Your BigCommerce Font Choices
Are you tired of the limited font choices offered by the BigCommerce platform? Kal explains how you can extend your options by editing the config.json file. While this might sound a bit technical, the video breaks it down into manageable steps. You'll learn how to change fonts' names, weights, and styles to match your store's unique branding and design requirements.
Kal also emphasizes the importance of using Google fonts for their performance benefits and compatibility with BigCommerce. You'll discover how to format the font names correctly to ensure a seamless integration into your store name code.
Ready to Transform Your BigCommerce Store?
Are you eager question learn how to unlock a world of font possibilities for custom pages in your BigCommerce store? This video is your gateway to unleashing your store's creative potential. With Kal's guidance, you'll gain the skills and knowledge needed to take control of your store's fonts and create a visually stunning and unique online shopping experience for your customers.
So, what are you waiting for? Click the video above to watch the full tutorial and start changing fonts in your BigCommerce store today!
(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.
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.