In this blog post we will be looking at setting a new font for you to use in your OpenCart store. We will use Google Fonts as they have hundreds of free, open-source fonts to use which are compatible and you save a lot of time by not having to download multiple files and install them manually into the system. This is a quick, (relatively) painless process. All you need to do is add a line to the header and edit a bit of code in the Stylesheet!
Choosing Your New OpenCart Store Font
This is the hard part! Just go to the Google Web Fonts page and choose a new font that you want to display in your store. There are a few hundred at the minute and a wide range of styles and looks so there is a good chance that there is something that fits your brand!
Go to Google Fonts and choose a new typography for your OpenCart store
When you have found a font that you like just click on the “Quick Use” link in the bottom right of the box and you will see a new page with a few bits of code you will need. Keep an eye out for the blue box about halfway down with a line of code (make sure the Standard tab is selected at the top!).
Integrating Your New Font Into OpenCart
Open up your OpenCart header template file located at:
- catalog/view/theme/[YOUR THEME]/template/common/header.tpl
And find the first line that looks like:
Now just copy that line of code on the Google Web Fonts page directly underneath this line of code and yo have just integrated a new Google Web Font into your OpenCart store! Remember to take out the “http://” section at the start of the Google Web Font link so it just looks like . This is to avoid problems when using an SSL certificate!
Defining The New OpenCart Font In The Stylesheet
Now you just need to tell OpenCart to start using this new font for all the text on the store. Open up your theme stylesheet file which is located at:
- catalog/view/theme/[YOUR THEME]/stylesheet/stylesheet.css
Now you need to copy the code which Google Fonts has provided for the Stylesheets, it will look like:
Now, the theme stylesheet might use several different fonts throughout the file for different sections, you will need to find all of these blocks by doing a quick Find scan (usually by using “CTRL + F” or “CMD +F”) and replace all the instances with the “font-family” line from your Google Fonts page.
And that’s it, you now have a brand new font for your OpenCart store! Make sure to clear your browser cache if the font is not displaying straight away or check in another browser! If you have any questions or want to ask me anything then leave me a comment below and I’ll see if I can help.