Cart Advisor is for sale!

Read more here

How To Set A New Font In OpenCart Using Google Fonts

By Jack
In OpenCart
Feb 29th, 2012
18 Comments
7215 Views

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

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:

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

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

Has 60 Posts

The founder of Cart Advisor, is an eCommerce developer specialising in OpenCart development and content SEO. Based in Lincoln, UK, Jack has worked with hundreds of businesses and runs his own company Destrove which offers OpenCart Development, OpenCart Theme Design and more.

18 Responses to “How To Set A New Font In OpenCart Using Google Fonts”

  1. jay b says:

    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

  2. Ferhat says:

    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

  3. Ferhat says:

    Hi Jack,

    Thanks for ur reply,

    I tried & tried but it didnt worked :-(

  4. Ferhat says:

    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

  5. alex hary says:

    work greatly. Thanks!!!!!!!!!

  6. Julian says:

    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.

  7. Gavin Goodman says:

    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

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

  9. Hello,
    Opencart 1.5.4.1
    Thanks for this clear and concise Font information.
    Within minutes I had been able to correct the rough edges of my H1 tags by installing one of the Google Fonts.
    Regards, Alvin

  10. SamB says:

    Hi Jack,
    this is fantastic, really helpful blog. Please note as I’ve got a site with SSL, when editing the header.tpl file I removed the http: from the front of the Google address as instructed but I had to leave the // on. Taking them off as well stopped the fonts from working, ie so I copied in something like this:

    Cheers,
    Sam

    • Jack Davis says:

      Hi Sam,

      I can’t see your code but yes leaving the double slash at the start of a link but taking the http: off will let the link decide whether or not it needs to be SSL but I don’t know if this works on all servers/browsers.

      Cheers,

      Jack

  11. Jen K says:

    Hi Jack,
    I’m a bit late to the party here, but I can’t seem to make my new font work. I’ve put the Google Font link in my Opencart header and made the appropriate changes in my stylesheet. I’ve cleared my browser cache and Opencart system cache. However, the new font will not show up. Here’s the strange (to me) thing: I’ve gone to my homepage and viewed the source, but the Google Font tag is not there. What IS there are Font Face links to my now-incommunicado webdesigner’s website, which I HAD deleted. I don’t know what she did, but those links won’t go away, and I’m worried they’re causing the problem. Any advice?
    Thanks,
    Jen

    • Jack says:

      Hi Jen,

      Does your site use more than one theme? Could you be making changes to a different template than the one which is live?

      Jack

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>