Blog

Ideas, tips and news about online marketing – Infusionsoft – WordPress.

How to Use Google Fonts with Your Infusionsoft Shopping Cart

changing_fonts_featured_image
Take advantage of the Google font library to add an extra POW and polish to your Infusionsoft shopping cart.

Why use the Google font library?

Of course, you can use other fonts with your Infusionoft shopping cart theme. But experienced web designers who use CSS style sheets frequently choose their fonts from the Google font library because the option is:

  • free
  • a hosted service (so you just need to link to the font library)
  • open-source
  • compatible with multiple devices, browsers and operating systems
  • conveniently provides the coding you’ll need to change your Infusionsoft shopping cart theme

 

To do that, you’ll need to:

  1. Choose a Google font from the Google font library
  2. Make a change in the CSS style sheet that controls the font styles for your shopping cart

To Choose Your Google font:

Go to the google fonts site at: https://www.google.com/fonts The choice (at 675 font styles to date, as of December 2014), is a little dizzying. To make it easier, I recommend filtering down your choices to using Sans Serif fonts and a Latin script (see screenshot): Filtering out Google Fons For this tutorial, I’ll select the Lato font. To do that, I click on the quick-use button (in yellow in screenshot below) below the example Lato font: Selecting a Google Font-Getting the Code

      

Depending on the font, you can have multiple options with the styles — usually variations of thin, bold, italic. I usually try to select the bold and italic options if possible (see below):

Choose the style options for your Infusionsoft e-commerce cart

Choose the style options for your Infusionsoft e-commerce cart

You can then copy the coding you’ll need to change your Infusionsoft shopping cart theme below:

Code is generated for your convenience.

Code is generated for your convenience.

Go to your Infusionsoft shopping cart theme to make the changes you need. To get there, go to:

Ecommerce tab > Ecommerce setup > Shopping Cart Theme

 

Edit an Infusionsoft Shopping Cart Theme

 

To edit your theme — click on the EDIT link at the bottom right corner of your active theme image:

You can edit your Infusionsoft shopping cart theme here

You can edit your Infusionsoft shopping cart theme here

Then, go to the tab entitled: EDIT CSS

You will then cut and paste the new code into this style sheet in the yellow areas in the screenshot below:

Change out the CSS items outlined in yellow

Change out the CSS items outlined in yellow

Cut and paste the URL provided by the Google font library code generator.

And, then change the first font into the body code to match your choice. It will look like this:

New CSS styling for your Infusionsoft shopping cart

New CSS styling for your Infusionsoft shopping cart

Don’t forget to hit the SAVE button! And then … you are done.

Comments on this entry are closed.