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!).
This is the line of code you will need to use in your OpenCart Header File
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:
<link rel="stylesheet" type="text/css" href="catalog/view/theme/[YOUR THEME]/stylesheet/stylesheet.css" />
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 <link href=”fonts.google…>. 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:
Add your stylesheet code to start using the new OpenCart Font
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.
Posted By Jack Davis
hiya:
I got problem with my opencart control panel, there is no view/stylesheet panel under catalog in my control panel, I tried to install different themes to sort it out, but still not there, could you please help?? really appreciate for that
regards
jay b
Hi Jay,
Do you mean your web hosting control panel? I would send your hosting provider a message, they may disable folders from showing for whatever reason. You could also try seeing if the folder permissions are different via an FTP client such as FileZilla.
If you need a hosting provider focused on secure OpenCart hosting: Destrove OpenCart Web Hosting.
Cheers,
Jack
Hi,
Thanks for your blog! I am following the same instructions.I want to use Lucida Handwriting in my opencart website.But the font is not changing.
Help appreciated !!
Hi Ferhat,
Glad you like the blog! Go onto your homepage and right click anywhere and select “View Source”. You need to make sure that the Google Font meta tag is visible within the
section. Next click on your main stylesheet and make sure that the @font element is visible, usually best if it is at the top.Also make sure that you have edited the files within your active theme. If you have changed the default files but not the files of the OpenCart theme you’re using then it will not change the font. Next, make sure that you delete your browser cache and clean out the Opencart cart cache in the “System” folder.
Cheers,
Jack
Hi Jack,
Thanks for ur reply,
I tried & tried but it didnt worked
I got my mistake…..earlier i was using my own class…..now i did like <h1 style=…..blah blah
and used h1…..so it worked
work greatly. Thanks!!!!!!!!!
Thanks for the very useful post, as I’m very new to OpenCart it’s useful to have some experts like you, worked like a treat.
Hello,
I was hoping to get a choice of fonts to use, this method just replaces everything with the new google font. Is there a way of adding a google font to appear in the drop-down font menu in Opencart ?I’m just looking to use a google font in just one section of text.
Cheers
Gavin
Hi Gavin,
Sure, just import your Google Web Font as usual and in the CSS just put the “font-family” line inside the element you want to use that font such as:
h1 {
font-family: YOUR GOOGLE FONT;
}
Don’t replicate it anywhere else and your header 1 tags will just use the font. You can import as many fonts as you want but just be wary of the page speed impact
Hope this helps!
Jack
Thank you very much Jack Davis! This quick tip helps a lot, I’m new to OpenCart but, so far everything is a mix between learning and pure fun. You have helped me on having fun!
Glad I helped out!
Cheers,
Jack