MAGENTO 1.X – IMPORT A NEW FONT ON MAGENTO

In some cases, you will need to import a new font on your Magento store.

This could be from two different ways:

From a google repository

Add it on the local.xml file under tag default of your layout as follow:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <default>
     <reference name="head">
        <block type="core/text" name="google_font_englebert">
           <action method="setText"><text><![CDATA[<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,400italic,500,700,100">]]></text></action>
           <action method="setText"><text><![CDATA[<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,600,700">]]></text></action>
           <action method="setText"><text><![CDATA[<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Abel">]]></text></action>
           <action method="setText"><text><![CDATA[<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo">]]></text></action>
        </block>
     </reference>
  </default>
</layout>

When the xml is renderized, it should add all the @font-face tags into your main css file.

From an otf file.

Include the fontface media tag on your css file, and then, the corresponding font under the body tag:

1
2
3
4
5
6
7

@font-face {
font-family: Museo;
src: url(../fonts/museo/MuseoSans.otf);
}
body{
font:75%/150% Museo, "Museo", Arial, "Arial";
}

In both cases, you will need to add the font for a particular class, this should be adding the font-family, like below:

.my-class-name{

font-family: Museo, "Museo", Arial, "Arial";

}

IMPORTANT

It’s always a bad practice to use the @import url on your css file, to import your new fonts.

eg:

1	@import url('//fonts.googleapis.com/css?family=Boogaloo');