Mar
11
2017

Adding a Google Font to your Magento theme using local.xml layout file

A fairly common task for building custom Magento themes these days is to use a web font. Whilst there are plenty of services which offer hosted web fonts for use on Magento and other website platforms, Google Fonts has a reasonable library of fonts available for us on the web.

This guide will show you how to add your own Google Font to your Magento 1.9 theme the proper way – using your theme’s local.xml file to add the request to load the font to your Magento store’s <head> element.

Add your Google Font as a block in local.xml

Your first step is to open your theme’s local.xml file; this should be present in the app/design/frontend/[package]/[theme]/layout directory, where [package] and [theme] represent the package your theme belongs to, and its name, respectively. The local.xml file is there to overwrite anything you want to change from your parent Magento theme (typically, your parent Magento theme would be rwd, Magento’s default responsive theme).

Once there, locate the <reference name=”head”> line within the <default> handle (this means it applies to all pages in your Magento store); this contains all of the things we want to do in your Magento theme’s <head> element. The highlighted code below (in bold) shows the <block> element which is added to add a link to an external CSS file in Magento 1.9 – which is essentially what all you need to embed a Google Font in to your own store:

<?xml version="1.0"?>
<layout>

<default>
<reference name="head">
<block type="core/text" name="google.fonts.opensans">
<action method="setText">
<text><![CDATA[<link href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css" rel="stylesheet" />]]></text>
</action>

</block>

</reference>

It’s worth being wary of page load times with fonts, so it pays to be careful in how many Google web fonts you add to your Magento store, as well as the weights (see Google Fonts itself for information on that).

And if you need more pointers for Magento’s local.xml layout file, take a look at the boilerplate local.xml on Maksold’s Github account, or you can contact us about our Magento consultancy services.