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.