How to add new font to custom magento theme?

css, fonts, magento

Solution

I tried to add new font to my custom magento theme

You should include the `.ttf` file in your template folder. Like:

skin/frontend/default/{theme_name}

From your question observation, it seems your custom theme name is "master".

The url you mentioned for font-face declaration is:

../../CoCo/magento/skin/frontend/default/master/fonts/Pacifico.ttf

I am sure that the url you mentioned to declare the `font-face` is wrong as it is going outside the project folder.

Let me explain you with an example on how to set a url in this case:

For just explanation, I am assuming the following directory to your {custom_theme} for skin.

skin/frontend/default
    --> {custom_theme_name}     #which is 'master', I think
         --> fonts
             --> Pacifico.ttf
         --> CSS
             --> main.css

For example, If you are declaring the new font-face in `main.css` then it should be something like this:

@font-face {
    font-family: font-one;
    src: url(../fonts/Pacifico.ttf);  /* check this */
}

Problem

I tried to add new font to my custom magento theme which not include in fonts. But it not work. This is the CSS i used. ``` @font-face { font-family: font-one; src: url(../../CoCo/magento/skin/frontend/default/master/fonts/Pacifico.ttf); } .font-one{ font-family: font-one; color:#b02c1d; } ``` I put font file in skin mytheme folder. and this is the way i added it. ``` <h3 class="top font-one">-- New --</h3> ``` Can anyone help me to correct this matter?

Original source