How To: Use Google Fonts on Your Magento Store

Google has blessed us with google.com/webfonts – a killer resource for free fonts to use.

But how do you use them on your Magento store? Simple enough …

Here’s How To Do It

    1. Find the font you want to use on google.com/webfonts > click “Quick-use”.
    2. In the “Standard” tab, copy the code that will look something like …
<link href="http://fonts.googleapis.com/css?family=Eater" rel="stylesheet" type="text/css" />
  1. In your Magento admin, navigate to System > Configuration > General > Design > HTML Head > Miscellaneous Scripts > paste code from step 2 & Save.
  2. Update your css to call for the font. i.e.
    font-family: 'Eater', cursive;

Example in CSS:

.producttitle h1 {font-size:36px;font-family: 'Eater', cursive;color:#b70000;margin: 5px 20px 5px 20px;}

In Page:

<div class="producttitle">
<h1>Title</h1>
</div>

Beware though …

Your customers may be getting an SSL error on your checkout! Learn why, and how to fix it.

About Jeremy Blake

Jeremy is a self-proclaimed socially-awkward penguin living in Utah. He makes money online. As he sleeps.

Connect with Jeremy on Google+.

  • Summer

    Hi there
    I am trying to follow the instructions you have here but am stuck on updating the CSS to call for the font. I have a template which I am using and have added it as a font family in the ‘style’ page? Do I need to add it in other CSS pages too? Could you give me a few pointers on doing that?

  • interSales AG

    Meanwhile there is also an extension for this: It let’s you pick the desired font from the backend of your Magento store – and you are done. http://www.magentocommerce.com/magento-connect/googlefonts.html
    Regards, A.