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

问题:

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.

回答1:

To use 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 personaly use open sans and other google fonts alot in my designs.

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

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

You ll need to convert your font to diffrent formates like: .eot, .svg, .ttf, .woff as diffrent browsers support diffrent formates. http://screencast.com/t/0KV17zkSri than add those fonts in your css like this:http://screencast.com/t/ypgKHV7lSm now use 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 specific format like "ttf to eot" and you ll find some other service there.

回答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

回答3:

You need to reference you webfont in other css files :

body{
    font-family:"eurostile_extended_2regular",Arial, ... , ;
}

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

回答4:

I would first convert my font via fontsquirrel or another service.

This will make you a zip folder with everything you need, both the font files and the css.

Then just include the css and now you can use it in your css like this, on any element you want.

html {
    font-family: "eurostile", OtherFallbackFont;
}

or for just headers:

h1 {
    font-family: "eurostile", OtherFallbackFont;
}

回答5:

Or, just install this Magento extension: http://www.magentocommerce.com/magento-connect/googlefonts.html

It will let you choose the desired font from the backend and install the font correctly all by itself. You then just have to access it via CSS.

回答6:

You need to download your font, then upload it to skin/frontend/default/your_theme/fonts, and then call it in your @font-face part of your css script, which is located at: skin/frontend/default/your_theme/css/styles_your_layout.css

回答7:

In case you make your own theme, in your theme's local.xml (which should be place at app/design/frontend/{YOUR_PACKAGE}/{YOUR_THEME}/layout/), it may look like (yours may be different than below):

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
    </default>
</layout>

Add the following link in <reference name="head"> before the addCss line to ensure it's loaded before the base.css:

<action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Cardo:400,700</href></action>

which becomes:

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Cardo:400,700</href></action>
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
    </default>
</layout>

Upload back to your theme's folder. Clear cache & reload the page, you'll see the Google Fonts CSS is added to HTML's head.

To use the Google Web Font (slightly off-topic to this question), you can apply the font to any CSS selector you want. For example:

p {
  font-family: Cardo, Arial, sans-serif;
}

回答8:

I found the absolute easiest way is to go to System->Configuration

There from the General group go to Design and on the HTML Head section use the Misc Scripts to paste something like this:

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<style> body {font-family: 'Raleway', sans-serif !Important;}</style>

Where the link is for the desired google font (why would you need any other?)