How can i use custom font to my theme in magento?

Question

I am trying to develop a magento theme, i am going well with every other thing, except one, i want to use custom font in my magento theme as per my client requirement, the font is "eurostilebold", i tried as i do it core php, like i putted the font files in font folder and placed the font folder into

D:\xampp\htdocs\clothing_site\skin\frontend\default\gwcc\

this directory. Now i am using that font family in my css and calling like that :

@font-face {
font-family: 'eurostile_extended_2regular';
src: url('fonts/eurostile_extended_2-webfont.eot');

All i want to know how to use any custom downloaded font family in magento, any help would be appreciated, thanks in advance, thanks in advance.

Solution 1

To use a custom font on your website you have 3 options.

1. Use open-source and free online fonts like google fonts and font squirrel, please search free web font on google. I personally use open sans and other google fonts a lot in my designs.

2. Use some paid font service. (I never used this so no experience)

3. Embed your local font on your website. here is how:

You'll need to convert your font to different formats like .eot, .svg, .ttf, .woff as different browsers support different formats. http://screencast.com/t/0KV17zkSri Then, add those fonts in your CSS like this: http://screencast.com/t/ypgKHV7lSm Now, use a font like this: http://screencast.com/t/NheSnxPCE1SN

there are several services available online that converts a given format to all other required like http://www.fontsquirrel.com/tools/webfont-generator. If these services blacklist your font then try to search a specific format like "ttf to eot" and you ll find some other service there.

Solution 2

@font-face {
    font-family: 'Adobe Garamond Regular';

    src: url('../fonts/Adobe Garamond Regular.eot');
    src: url('../fonts/Adobe Garamond Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Adobe Garamond Regular.woff') format('woff'),
         url('../fonts/AGaramondPro-Regular.otf') format('otf'),
         url('../fonts/Adobe Garamond Regular.ttf') format('truetype'),
         url('../fonts/Adobe Garamond Regular.svg#Adobe Garamond Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{  font-family:'Adobe Garamond Regular';  } //added to code