установка дополнительных шрифтов на Joomla

Question

Я пытаюсь установить два других шрифта для использования в меню в шаблоне joomla, я пытаюсь использовать этот код, но ни IE8, ни chrome не отображают новый шрифт ... это часть моего 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;*/
}

Answer 1

Я бы порекомендовал вам использовать FontSquirrel .Он будет генерировать форматы шрифтов для вас и генерировать CSS.Пробовал и проверял и отлично работал каждый раз.

Answer 2

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

Answer 3

Самое очевидное, что я вижу, это то, что ваше второе объявление не CSS3, что означает, что IE читает его очень хорошо и пытается использовать TTF, который не будет работать в IE.Ваш CSS должен выглядеть примерно так -

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

Еще одна вещь, которая приходит на ум, - это расширение .TFF в верхнем регистре, является ли расширение на самом деле прописным на сервере?Он чувствителен к регистру (при условии, что вы находитесь на сервере LAMP), поэтому может быть причиной проблемы с Chrome.