installing additional fonts on joomla

I am trying to install two other fonts to use on a menu in a joomla templa开发者_如何学Cte, i am trying using this code but neither IE8 or chrome displays the new font.. this is part of my css

@font-face {
    font-family: Adolphus;
    src: url("../fonts/Adolphus.eot") /* EOT file for IE */
}
@font-face {
 font-family: Adolphus;
 src: url("../fonts/Adolphus.TTF") /* TTF file for CSS3 browsers */
}

/* Navigation style
----------------------------------------------------------------*/
#tx-navigation{
    background:url("../../images/style3/nav-bg.png") repeat scroll 0 0 ;
    margin-top: -3px;
    font-family: Adolphus;

    /*font-family:Opificio;*/
    /*font-family:chiser;*/
}

I would recommend you use FontSquirrel. It will generate the font formats for you and generate the CSS. Tried and tested and worked perfectly everytime.

The most obvious thing I see is that your second declaration is not CSS3, which means that IE reads it just fine and tries using the TTF which won't work in IE. Your CSS should look something like this -

@font-face {
font-family: "Adolphus";
src: url("../fonts/Adolphus.eot")
src: local("Adolphus"), url(../fonts/Adolphus.TFF) format("truetype");

The other thing that comes to mind is the .TFF extension being uppercase, is the extension actually uppercase on the server? It's case sensitive (assuming you are on a LAMP server) so that might be causing the problem with Chrome.

<title>Adolphus @font-face kit sample</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style media="screen" type="text/css">/*<![CDATA[*/@import 'stylesheet.css';/*]]>*/</style>
<style media="screen" type="text/css">/*<![CDATA[*/@import 'demo-files/demo.css';/*]]>*/</style>
<style type="text/css">#title,#glyphs p{font-family:"Adolphus"}</style>

<div id="wrapper">
    <div id="title">
        Adolphus        </div>
    <div id="logo">
        <a href="http://www.fonts2u.com" target="_blank"><img src="demo-files/fonts2u_logo.gif" width="250" height="69" alt="Fonts2u.com logo" /></a>
    </div>
    <div class="clr"></div>

    <div id="menu">
        <ul>
            <li class="selected"><a href="#glyphs">Glyph Chart</a></li>
        <ul>
        <div class="clr"></div>
    </div>

    <div id="content">

        <div id="glyphs">
            <div class="g">&amp;#32;<p> </p></div><div class="g">&amp;#33;<p>!</p></div><div class="g">&amp;#34;<p>"</p></div><div class="g">&amp;#35;<p>#</p></div><div class="g">&amp;#36;<p>$</p></div><div class="g">&amp;#37;<p>%</p></div><div class="g">&amp;#38;<p>&</p></div><div class="g">&amp;#39;<p>'</p></div><div class="g">&amp;#40;<p>(</p></div><div class="g noborder">&amp;#41;<p>)</p></div><div class="clr"></div><div class="g">&amp;#42;<p>*</p></div><div class="g">&amp;#43;<p>+</p></div><div class="g">&amp;#44;<p>,</p></div><div class="g">&amp;#45;<p>-</p></div><div class="g">&amp;#46;<p>.</p></div><div class="g">&amp;#47;<p>/</p></div><div class="g">&amp;#48;<p>0</p></div><div class="g">&amp;#49;<p>1</p></div><div class="g">&amp;#50;<p>2</p></div><div class="g noborder">&amp;#51;<p>3</p></div><div class="clr"></div><div class="g">&amp;#52;<p>4</p></div><div class="g">&amp;#53;<p>5</p></div><div class="g">&amp;#54;<p>6</p></div><div class="g">&amp;#55;<p>7</p></div><div class="g">&amp;#56;<p>8</p></div><div class="g">&amp;#57;<p>9</p></div><div class="g">&amp;#58;<p>:</p></div><div class="g">&amp;#59;<p>;</p></div><div class="g">&amp;#60;<p><</p></div><div class="g noborder">&amp;#61;<p>=</p></div><div class="clr"></div><div class="g">&amp;#62;<p>></p></div><div class="g">&amp;#63;<p>?</p></div><div class="g">&amp;#64;<p>@</p></div><div class="g">&amp;#65;<p>A</p></div><div class="g">&amp;#66;<p>B</p></div><div class="g">&amp;#67;<p>C</p></div><div class="g">&amp;#68;<p>D</p></div><div class="g">&amp;#69;<p>E</p></div><div class="g">&amp;#70;<p>F</p></div><div class="g noborder">&amp;#71;<p>G</p></div><div class="clr"></div><div class="g">&amp;#72;<p>H</p></div><div class="g">&amp;#73;<p>I</p></div><div class="g">&amp;#74;<p>J</p></div><div class="g">&amp;#75;<p>K</p></div><div class="g">&amp;#76;<p>L</p></div><div class="g">&amp;#77;<p>M</p></div><div class="g">&amp;#78;<p>N</p></div><div class="g">&amp;#79;<p>O</p></div><div class="g">&amp;#80;<p>P</p></div><div class="g noborder">&amp;#81;<p>Q</p></div><div class="clr"></div><div class="g">&amp;#82;<p>R</p></div><div class="g">&amp;#83;<p>S</p></div><div class="g">&amp;#84;<p>T</p></div><div class="g">&amp;#85;<p>U</p></div><div class="g">&amp;#86;<p>V</p></div><div class="g">&amp;#87;<p>W</p></div><div class="g">&amp;#88;<p>X</p></div><div class="g">&amp;#89;<p>Y</p></div><div class="g">&amp;#90;<p>Z</p></div><div class="g noborder">&amp;#91;<p>[</p></div><div class="clr"></div><div class="g">&amp;#92;<p>\</p></div><div class="g">&amp;#93;<p>]</p></div><div class="g">&amp;#94;<p>^</p></div><div class="g">&amp;#95;<p>_</p></div><div class="g">&amp;#96;<p>`</p></div><div class="g">&amp;#97;<p>a</p></div><div class="g">&amp;#98;<p>b</p></div><div class="g">&amp;#99;<p>c</p></div><div class="g">&amp;#100;<p>d</p></div><div class="g noborder">&amp;#101;<p>e</p></div><div class="clr"></div><div class="g">&amp;#102;<p>f</p></div><div class="g">&amp;#103;<p>g</p></div><div class="g">&amp;#104;<p>h</p></div><div class="g">&amp;#105;<p>i</p></div><div class="g">&amp;#106;<p>j</p></div><div class="g">&amp;#107;<p>k</p></div><div class="g">&amp;#108;<p>l</p></div><div class="g">&amp;#109;<p>m</p></div><div class="g">&amp;#110;<p>n</p></div><div class="g noborder">&amp;#111;<p>o</p></div><div class="clr"></div><div class="g">&amp;#112;<p>p</p></div><div class="g">&amp;#113;<p>q</p></div><div class="g">&amp;#114;<p>r</p></div><div class="g">&amp;#115;<p>s</p></div><div class="g">&amp;#116;<p>t</p></div><div class="g">&amp;#117;<p>u</p></div><div class="g">&amp;#118;<p>v</p></div><div class="g">&amp;#119;<p>w</p></div><div class="g">&amp;#120;<p>x</p></div><div class="g noborder">&amp;#121;<p>y</p></div><div class="clr"></div><div class="g">&amp;#122;<p>z</p></div><div class="g">&amp;#123;<p>{</p></div><div class="g">&amp;#124;<p>|</p></div><div class="g">&amp;#125;<p>}</p></div><div class="g">&amp;#126;<p>~</p></div><div class="g">&amp;#160;<p> </p></div><div class="g">&amp;#161;<p>¡</p></div><div class="g">&amp;#162;<p>¢</p></div><div class="g">&amp;#163;<p>£</p></div><div class="g noborder">&amp;#165;<p>¥</p></div><div class="clr"></div><div class="g">&amp;#167;<p>§</p></div><div class="g">&amp;#168;<p>¨</p></div><div class="g">&amp;#169;<p>©</p></div><div class="g">&amp;#170;<p>ª</p></div><div class="g">&amp;#171;<p>«</p></div><div class="g">&amp;#172;<p>¬</p></div><div class="g">&amp;#173;<p>­</p></div><div class="g">&amp;#174;<p>®</p></div><div class="g">&amp;#176;<p>°</p></div><div class="g noborder">&amp;#177;<p>±</p></div><div class="clr"></div><div class="g">&amp;#180;<p>´</p></div><div class="g">&amp;#182;<p>¶</p></div><div class="g">&amp;#186;<p>º</p></div><div class="g">&amp;#187;<p>»</p></div><div class="g">&amp;#191;<p>¿</p></div><div class="g">&amp;#192;<p>À</p></div><div class="g">&amp;#193;<p>Á</p></div><div class="g">&amp;#194;<p>Â</p></div><div class="g">&amp;#195;<p>Ã</p></div><div class="g noborder">&amp;#196;<p>Ä</p></div><div class="clr"></div><div class="g">&amp;#197;<p>Å</p></div><div class="g">&amp;#198;<p>Æ</p></div><div class="g">&amp;#199;<p>Ç</p></div><div class="g">&amp;#200;<p>È</p></div><div class="g">&amp;#201;<p>É</p></div><div class="g">&amp;#202;<p>Ê</p></div><div class="g">&amp;#203;<p>Ë</p></div><div class="g">&amp;#204;<p>Ì</p></div><div class="g">&amp;#205;<p>Í</p></div><div class="g noborder">&amp;#206;<p>Î</p></div><div class="clr"></div><div class="g">&amp;#207;<p>Ï</p></div><div class="g">&amp;#209;<p>Ñ</p></div><div class="g">&amp;#210;<p>Ò</p></div><div class="g">&amp;#211;<p>Ó</p></div><div class="g">&amp;#212;<p>Ô</p></div><div class="g">&amp;#213;<p>Õ</p></div><div class="g">&amp;#214;<p>Ö</p></div><div class="g">&amp;#217;<p>Ù</p></div><div class="g">&amp;#218;<p>Ú</p></div><div class="g noborder">&amp;#219;<p>Û</p></div><div class="clr"></div><div class="g">&amp;#220;<p>Ü</p></div><div class="g">&amp;#223;<p>ß</p></div><div class="g">&amp;#224;<p>à</p></div><div class="g">&amp;#225;<p>á</p></div><div class="g">&amp;#226;<p>â</p></div><div class="g">&amp;#227;<p>ã</p></div><div class="g">&amp;#228;<p>ä</p></div><div class="g">&amp;#229;<p>å</p></div><div class="g">&amp;#230;<p>æ</p></div><div class="g noborder">&amp;#231;<p>ç</p></div><div class="clr"></div><div class="g">&amp;#232;<p>è</p></div><div class="g">&amp;#233;<p>é</p></div><div class="g">&amp;#234;<p>ê</p></div><div class="g">&amp;#235;<p>ë</p></div><div class="g">&amp;#236;<p>ì</p></div><div class="g">&amp;#237;<p>í</p></div><div class="g">&amp;#238;<p>î</p></div><div class="g">&amp;#239;<p>ï</p></div><div class="g">&amp;#241;<p>ñ</p></div><div class="g noborder">&amp;#242;<p>ò</p></div><div class="clr"></div><div class="g">&amp;#243;<p>ó</p></div><div class="g">&amp;#244;<p>ô</p></div><div class="g">&amp;#245;<p>õ</p></div><div class="g">&amp;#246;<p>ö</p></div><div class="g">&amp;#247;<p>÷</p></div><div class="g">&amp;#249;<p>ù</p></div><div class="g">&amp;#250;<p>ú</p></div><div class="g">&amp;#251;<p>û</p></div><div class="g">&amp;#252;<p>ü</p></div><div class="g noborder">&amp;#255;<p>ÿ</p></div><div class="clr"></div><div class="g">&amp;#338;<p>Œ</p></div><div class="g">&amp;#339;<p>œ</p></div><div class="g">&amp;#376;<p>Ÿ</p></div><div class="g">&amp;#710;<p>ˆ</p></div><div class="g">&amp;#732;<p>˜</p></div><div class="g">&amp;#894;<p>;</p></div><div class="g">&amp;#8211;<p>–</p></div><div class="g">&amp;#8212;<p>—</p></div><div class="g">&amp;#8216;<p>‘</p></div><div class="g noborder">&amp;#8217;<p>’</p></div><div class="clr"></div><div class="g">&amp;#8218;<p>‚</p></div><div class="g">&amp;#8220;<p>“</p></div><div class="g">&amp;#8221;<p>”</p></div><div class="g">&amp;#8226;<p>•</p></div><div class="g">&amp;#8230;<p>…</p></div><div class="g">&amp;#8249;<p>‹</p></div><div class="g">&amp;#8250;<p>›</p></div><div class="g">&amp;#8364;<p>€</p></div><div class="g">&amp;#8482;<p>™</p></div>            </div>

        <div class="clr"></div>

    </div>

    <div id="footer">
        <div id="copyright"><strong>Adolphus</strong> | <strong>License:</strong> GNU/GPL</div>
        <div id="generated"><strong>@font-face kit</strong> by <a href="http://www.fonts2u.com" target="_blank">Fonts2u.com</a></div>
        <div class="clr"></div>
    </div>
</div>
<div id="support">Generated @font-face kit is compatible with western languages.</div>