Eigenes Template - Font wird im "Content" Bereich nicht angezeigt

derHarry · 31. Mai 2015

Einen wunderschönen guten Morgen,

bin noch sehr neu in Joomla, habe ein eigenes Template erstellt, das funktioniert soweit auch wunderbar.

Nun habe ich einen eigenen Font eingebunden (Jura), diesen möchte ich gern auch anzeigen lassen, nur leider funktioniert das im "Content" Bereich, dort wo die Articles eingefügt werden leider nicht. Beim Menü hingegen wird der Font tadellos angezeigt.

Beim Erstellen von Artikeln ignoriert TinyMCE scheinbar rigoros den Font und gibt da einfach Standard-Fonts aus:

Zitat

<p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: #000000; font-family: Arial, Helvetica, sans;">

Wie schaffe ich es nun, dass der Font auch für Articles verwendet wird (also im FrontEnd korrekt ausgegeben wird)?

Verwendet wird Joomla 3.4.1

So sieht meine index.php aus:

Spoiler anzeigen

und so meine template.css:

Spoiler anzeigen

Code

@charset "utf-8";


@font-face {
    font-family: 'juramedium';
    src: url('../fonts/jura-medium-webfont.eot');
    src: url('../fonts/jura-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/jura-medium-webfont.woff2') format('woff2'),
         url('../fonts/jura-medium-webfont.woff') format('woff'),
         url('../fonts/jura-medium-webfont.ttf') format('truetype'),
         url('../fonts/jura-medium-webfont.svg#juramedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


*
{
    margin                                : 0px;
    padding                                : 0px;
    border                                : 0px;
}


html, body
{
    height                                : 100%;
    background                            : #FFFFFF;
}


body
{
    font-family                            : juramedium, Arial, Helvetica, sans-serif;
    font-size                            : 13px;
    color                                : #000000;
    line-height                            : 1.5em;
}


#container
{
    position                            : relative;
    margin                                : 0px auto;
    padding                                : 0px;
    min-height                            : 100%;
    width                                : 800px;
    background                            : #FFFFFF;
}


* html #container
{
    height                                : 100%;
}


#top-logo
{
    width                                : 800px;
    height                                : 84px;
    border                                : none;
    background                            : url('../images/top-logo.jpg') no-repeat;
}


#section-pic
{
    width                                : 800px;
    height                                : 300px;
    border                                : none;
}


#menu
{
    width                                : 800px;
    height                                : 70px;
    border                                : none;
    background                            : url('../images/bg_menu.jpg') repeat-x;
    clear                                : left;
}


#content
{
    padding                                : 30px 30px 70px 30px;
    font-family                            : juramedium, Arial, Helvetica, sans-serif;
    font-size                            : 13px;
    color                                : #000000;
    line-height                            : 1.5em;
}


#footer
{
    position                            : absolute;
    bottom                                : 0;
    margin                                : 0px auto;
    padding                                : 0px;
    height                                : 63px;
    width                                : 800px;
    background                            : url('../images/bg_footer.jpg') repeat-x;
}


#menu ul
{
    list-style                            : none;
    margin-left                            : 9px;
}


#menu li
{
    display                                : block;
    float                                : left;
    /*border-right                        : 1px solid #000000;*/
}


#menu li a
{
    display                                : block;
    float                                : left;
    padding-left                        : 11px;
    padding-right                        : 11px;
    height                                : 20px;
    padding-top                            : 14px;
    text-decoration                        : none;
    text-align                            : center;
    color                                : #000000;
    font-size                            : 17px;
}


#menu ul.menu li.current a {
    color                                : #FFFFFF;
    text-decoration                        : none;
    border-bottom                        : 2px solid #FFFFFF;
    padding-bottom                        : 1px;
}


#menu li a:active, #menu li a:hover, #menu li a:focus
{
    color                                : #FFFFFF;
    text-decoration                        : none;
    border-bottom                        : 2px solid #FFFFFF;
    padding-bottom                        : 1px;
}


#content .item-page p
{
    font-family                            : juramedium, Arial, Helvetica, sans-serif;
}

Alles anzeigen

Bin schon leicht am Verzweifeln, habe die halbe Nacht googlenderweise verbracht...

Häng noch einen Screenshot an, da wird das Problem klarer...

Danke,
SG,

der Harry

firstlady · 31. Mai 2015

Was hier zielführend wäre wäre in link zu deiner Seite. Sie wird ja auf Dauer doch nicht geheim bleiben
Ich nehme an dass der Text im Beitrag direkt formatiert ist und alles andere aushebelet.

NinjaTurtle · 31. Mai 2015

Fehlt da nicht im <head> </head> Bereich der index.php vom Template etwas?

anka · 31. Mai 2015

Zitat von NinjaTurtle

Fehlt da nicht im <head> </head> Bereich der index.php vom Template etwas?

Was vermisst du denn?

NinjaTurtle · 31. Mai 2015

Ich muss z.B.

einfügen, damit es wirklich in allen Browsern vo allem mobil angezeigt wird

anka · 31. Mai 2015

Ja, aber in diesem Fall wird die Schriftart im CSS vom "eigenen" Server geladen:

Spoiler anzeigen

Das hat u.a. den Vorteil, dass man beim Laden der Seite nicht auf den Server von Google warten muss.

christine2 · 31. Mai 2015

Hallo Ninja,

brauchst doch nicht. Wär ja nur, wenn Du es via google dings einpflegst. Siehe oben: Im 2. spoiler ist es ja in der template.css durch: "@font-face { }
eingebunden worden. Glaub ich mal so.

Gruß, Christine

Edit: Anka war schneller & ich zu langsam. Bin zu nix zu gebrauchen.

Indigo66 · 31. Mai 2015

Um auf die Frage vom TE zurück zu kommen.
So wie ich Dich verstehe, möchtest Du die Schriftart im Editor zu Verfügung haben. Wenn Du den JCE verwendest dann so: https://www.joomlacontentedito…adding-and-removing-fonts

Ich würde aber den Weg über die CSS gehen und einer speziellen Klasse die dem p-Tag zuordnen kannst, wenn die Schrift nicht ausschließlich für den kompletten Content immer angtezeigt werden soll.
Soll das aber sein, dann kannst Du die Schriftart auch gleich per CSS dem body zuweisen.

derHarry · 31. Mai 2015

Hallo alle,

vorweg: vielen Dank für die schnellen und vielen Antworten, war den ganzen Tag off und bin jetzt doch sehr überrascht

Nun mal zu den verschiedenen Antworten:

firstlady: die Seite ist momentan noch lokal bei mir am Rechner, werde das aber heute noch hochladen, dann den Link posten.

@Ninja, Anka, Christine: Richtig, der Font wird in der template.css eingebunden und liegt lokal am Server. Prinzipiell funktioniert das auch, habe bevor ich das Template im Joomla eingebunden habe, das Template als reine HTML Seite designed, da funktioniert auch alles wie es soll (--> Font im Menü und im Content).

@Indigo: Verwende den Standard-Editor, soweit ich das beurteilen kann ist das TinyMCE..? Sollte ich den anderen verwenden, ist der besser?

Prinzipiell soll der Font auf der ganzen Seite verwendet werden, deswegen habe ich ihn auch im body deklariert. Dies wird aber vom Editor dadurch überschrieben, dass jeder Absatz mit

<p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: #000000; font-family: Arial, Helvetica,sans;">

generiert wird.
Definiere ich jetzt im CSS, wie der <p> tag aussehen soll, wird das ja trotzdem überschrieben, oder sehe ich das falsch?
Zum besseren Verständnis hier noch der Quelltext der Joomla Seite, bis ich das Ganze hochgeladen habe:

Spoiler anzeigen

HTML

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" ><head>	  <base href="http://localhost/muhr/" />  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <meta name="author" content="Super User" />  <meta name="generator" content="Joomla! - Open Source Content Management" />  <title>seit 1666...</title>  <link href="http://localhost/muhr/index.php" rel="canonical" />  <link rel="stylesheet" href="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/themes/nivo-slider.css" type="text/css" />  <link rel="stylesheet" href="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/themes/default/style.css" type="text/css" />  <style type="text/css">#ais_88_wrapper{max-width:800px;}#ais_88{width:100%;height:auto;}.ari-image-slider-loading #ais_88{height:300px;}#ais_88_wrapper .nivoSlider
{
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}  </style>  <script src="/muhr/media/jui/js/jquery.min.js" type="text/javascript"></script>  <script src="/muhr/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>  <script src="/muhr/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>  <script src="/muhr/media/system/js/caption.js" type="text/javascript"></script>  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>  <script src="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/jquery.noconflict.js" type="text/javascript"></script>  <script src="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/jquery.nivo.slider.js" type="text/javascript"></script>  <script type="text/javascript">jQuery(window).on('load',  function() {				new JCaption('img.caption');			});
jQuery(window).load(function() { var $ = window.jQueryNivoSlider || jQuery; var opts = {"effect":"sliceUpDownLeft","animSpeed":850,"pauseTime":4000,"controlNav":false,"keyboardNav":false,"pauseOnHover":false,"directionNav":false,"directionNavHide":false,"responsive":true}; $("#ais_88").nivoSlider(opts); });  </script>  <!--[if IE]><link rel="stylesheet" href="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/themes/nivo-slider.ie.css" type="text/css" /><![endif]-->  <!--[if lt IE 7]><link rel="stylesheet" href="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/themes/default/style.ie6.css" type="text/css" /><![endif]-->  <!--[if IE]><link rel="stylesheet" href="/muhr/modules/mod_ariimageslider/mod_ariimageslider/js/themes/default/style.ie.css" type="text/css" /><![endif]-->  <!--[if lt IE 8]><style type="text/css">BODY #ais_88_wrapper,BODY #ais_88{width:800px;height:300px;}</style><![endif]-->
	<link rel="stylesheet" href="/muhr/templates/muhr-seit1666/css/template.css" type="text/css" /></head>
<body>	<div id="container">		<div id="top-logo"></div>		<div id="section-pic">		<div class="moduletable">						<div id="ais_88_wrapper" class="ari-image-slider-wrapper ari-image-slider-loading ari-is-theme-default">
	<div id="ais_88" class="ari-image-slider nivoSlider">
					<img src="/muhr/images/muhr/emo_pics/emo_pic_01.jpg" alt="" title="" class="imageslider-item" />
							<img src="/muhr/images/muhr/emo_pics/emo_pic_02.jpg" alt="" title="" class="imageslider-item" style="display:none" />
							<img src="/muhr/images/muhr/emo_pics/emo_pic_03.jpg" alt="" title="" class="imageslider-item" style="display:none" />
							<img src="/muhr/images/muhr/emo_pics/emo_pic_04.jpg" alt="" title="" class="imageslider-item" style="display:none" />
							<img src="/muhr/images/muhr/emo_pics/emo_pic_05.jpg" alt="" title="" class="imageslider-item" style="display:none" />
							<img src="/muhr/images/muhr/emo_pics/emo_pic_06.jpg" alt="" title="" class="imageslider-item" style="display:none" />
							<img src="/muhr/images/muhr/emo_pics/emo_pic_07.jpg" alt="" title="" class="imageslider-item" style="display:none" />

	</div>
	</div>		</div>	</div>		<div id="menu">		<div class="moduletable_menu">						<ul class="nav menu"><li class="item-101 current active"><a href="/muhr/index.php" >seit 1666...</a></li><li class="item-105"><a href="/muhr/index.php/menueplan" >menüplan</a></li><li class="item-106"><a href="/muhr/index.php/essen-trinken" >essen &amp; trinken</a></li><li class="item-107"><a href="/muhr/index.php/oeffnungszeiten" >öffnungszeiten</a></li><li class="item-108"><a href="/muhr/index.php/reservierung" >reservierung</a></li><li class="item-109"><a href="/muhr/index.php/veranstaltungen" >veranstaltungen</a></li></ul>		</div>	</div>		<div id="content"><div class="item-page" itemscope itemtype="http://schema.org/Article">	<meta itemprop="inLanguage" content="en-GB" />																					<div itemprop="articleBody">		<p style="text-align: justify; font-size: 11px; line-height: 14px; margin: 0px 0px 14px; padding: 0px; color: #000000; font-family: Arial, Helvetica, sans;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis ultrices lorem. Maecenas sit amet semper felis. Sed semper nunc justo, posuere auctor odio rhoncus non. Mauris rutrum leo vitae accumsan porttitor. Duis tristique vulputate mollis. Vivamus vel elit in lacus vestibulum eleifend id ac nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non rhoncus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis, ante vel ultrices fermentum, enim enim suscipit ligula, nec ultricies magna velit nec ligula. Vestibulum non iaculis elit. Curabitur sit amet mi posuere, rhoncus nibh sed, ornare augue. Suspendisse vehicula nibh non egestas placerat. Duis vehicula bibendum felis, eget tempus quam placerat sit amet.</p>
 </div>
							</div>
</div>		<div id="footer"></div>	</div></body></html>

Alles anzeigen

Wenn ich z.B. die Artikelinformationen anzeigen lasse (Autor, erstellt wann etc) wird dieser Block schon im Jura Font dargestellt, der eigentliche Text, der im Editor eingegeben wird allerdings nicht

Danke für Eure Unterstützung,

SG,
der Harry

Indigo66 · 31. Mai 2015

Wenn de Editor Deinen style für den Body überschreibt, dann verwendest Du Inline-styles aus dem Editor. Wenn Du im Editor keine Styleangaben machst, wird die externe CSS greifen.

derHarry · 31. Mai 2015

Badauz!

Das wars :-D:-D
Offensichtlich hat sich da Formatierung eingeschlichen, die Option "Clear Formatting" hat alles weggemacht - jetzt greift mein CSS!!

Vielen, vielen Dank,

SG,
der Harry

Indigo66 · 31. Mai 2015

Zitat von derHarry

Offensichtlich hat sich da Formatierung eingeschlichen

Kann bei Copy/Paste passieren. Der JCE kann das in den meisten Fällen rausfiltern.
BTW: Ich halte den JCE für den besseren Editor.

derHarry · 31. Mai 2015

Dann werd ich den mal ausprobieren.

Thx & schönen Abend noch,
der Harry

firstlady · 31. Mai 2015

Zitat

Offensichtlich hat sich da Formatierung eingeschlichen,

Ich bin anscheindend im Harvey-Modus

Übrigens, bei allem Respekt, Indigo66: Der JCE ist ein besserer Editor, da stimme ich dir zu. Ich halte den JCE aber nur dann für nötig, wenn Redakteure da sind. Sonst ist er doch eher ein Klotz am Bein und will gepflegt werden (was ich auch immer wieder vergesse).
Aus Sicherheitsgründen setze ich ihn daher nur ein wenn es absolut notwendig ist. Solche Fehler, dass Leute den Text im Editor direkt formatieren oder aus Word kopieren vermeidet er auch nicht.

Indigo66 · 31. Mai 2015

Zitat von firstlady

aus Word kopieren vermeidet er auch nicht.

Man kann das Nachformatieren im Editor durch Einschränkungen im Profil einschränken und Wordformatierungen kann er mittlerweile ziemlich gut ausfiltern.
Ich halte ihn auch darum als den besseren Editor (auch wenn administrativ aufwändeiger wegen Updates, was aber sehr gut gelöst ist), weil er einen fantsatischen Extendet-Image- und Mediamanager und Contentemplater hat. Beides leider kostenpflichtige Plugins.

@derHarry: Es muss klar sein, jede Erweiterung die nicht Joomla-Core ist, muss extra überwacht und upgedatet werden.