[TomatoCart] Store Google fonts in your web server directly

It is important to use beautiful web font for your store to enhance the user experience. Google hosts a lot of  beautiful and open source web fonts. In most cases, fonts are adopted onto websites using one of the 2 following methods:

  1. Link the font directly in the head tag of HTML:
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
  2. Import the font in the CSS:
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,300,500');

Really simple, isn’t it? Sure, it has its advantages though it also has one huge disadvantage.  What is Google’s network is not accessible for any of your users (It happens)? Either your site won’t completely load, it will load very slowly or your visitors browser will use a default font in its place potentially making your website look off.

The solution? Save the Google fonts you plan to use on your web server and load them locally. This way, if your visitors can access your site then they can load the font and everything will look as it should without the dependency on an additional 3rd party (Google).

Download the google font manually

There is an excellent online tool for providing google font package. We will use it here.


  1. Access http://www.localfont.com/.
  2. Select the needed font and then select the variant.Snip20160224_21
  3. Click the download button to get whole font package.

I have download a open sans font with 300,400,600,700 variants to test.

Integrate the google font package into tomatocart

Now that we got the open sans font package, it’s easy to use it within tomatocart.

  1. Unzip the font package, you will see following files:Snip20160224_24
  2. Create a fonts fold under tomatocart directory > ext fold.
  3. Copy Open-Sans fold into tomatocart directory > ext > fonts fold.
  4. Open tomatocart directory > ext > fonts > css > font.css to replace the all of code with:
    @font-face {
      font-family: 'Open Sans';
      font-weight: 400;
      font-style: normal;
      src: url('../fonts/Open-Sans-regular/Open-Sans-regular.eot');
      src: url('../fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
           local('Open Sans'),
           url('../fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
           url('../fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
           url('../fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
           url('../fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
  5. Open templates > bootstrap > index.php with editor.
  6. Find following line in it:
    <link rel="apple-touch-icon-precomposed" href="templates/<?php echo $osC_Template->getCode(); ?>/images/apple-touch-icon-57-precomposed.png">
  7. Add following line after it:
    <link rel="stylesheet" type="text/css" href="ext/fonts/Open-Sans/css/fonts.css" />
  8. Add following style before </head> tag:
    body {
      font-family: "Open Sans",Tahoma,sans-serif;

Done. Refresh your store front, you will see the font is really beautiful.


Final word

You could try download other fonts for your store. I recommend the Lato and Roboto font. If you need to use the italic font, don’t forget to select the italic variant.


Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting

Tags: , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

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