How to add new font to custom magento theme?

Question

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?

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 */
}