Sep
2
2015

Removing the Raleway Google Font from your Magento 1.9 rwd child theme

Magento Community 1.9 introduced a new theming system aimed at creating a better base theme for responsive websites.

At a basic level, the Magento rwd theme provides a great base layer to start customising to your brand’s colours and imagery. A very common query we receive from other web designers and developers working with Magento is how to remove the default Raleway font from the base rwd theme.

Removing a Google web font from Magento rwd theme

Removing this default font from a Magento theme in Community 1.9 is actually relatively easy using Magento’s local.xml file.

  1. Firstly, locate your theme’s local.xml file; this is typically in your /app/design/frontend/[package-name]/[theme-name]/layout/ directory
  2. Add the following snippet to your local.xml file:


link_rel
//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600


This removes the Google web font from your theme’s <head> element. If you don’t see the change, don’t forget to clear your caches (in the System > Cache Management menu in the Magento administration panel).

Adding a Google web font to a Magento theme

If you want to add a new Google web font in to your Magento rwd theme, you can add the following to your theme’s local.xml file:

<action method="addLinkRel">
<rel>stylesheet</rel>
<href>//fonts.googleapis.com/css?family=Open+Sans</href>
</action>

Changing the value of Open+Sans (noting that spaces in the font name should be replaced with a “+” character) will change the relevant font in your Magento theme.

You can also then change the references to typefaces in your Magento theme in the relevant Sass/SCSS files in the /skin/frontend/[package-name]/[theme-name]/scss/mixin directory in the _typography.scss partial file.

And, of course, if you’re looking for a Magento web designer and Magento consultant for your next project, we’re available!