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.
- Firstly, locate your theme’s local.xml file; this is typically in your /app/design/frontend/[package-name]/[theme-name]/layout/ directory
- 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!