Schriften 'websicher'

nestor185 · 2. September 2022

Um wirklich auf der sicheren Seite zu sein, kann man die Fonts z.B. bei -> Google Webfonts Helper herunterladen, unter media/templates/site/deinTemplate/ einen Ordner /fonts anlegen und die Schriften dort ablegen.

Dann in der user.css gleich am Anfang deklarieren.

Das sieht dann ungefähr so aus:

Code

/* open-sans-regular - latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(""), url("../fonts/open-sans-v29-latin-regular.woff2") format("woff2"),
url("../fonts/open-sans-v29-latin-regular.woff") format("woff");
}
/* open-sans-700 - latin */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(""), url("../fonts/roboto-v29-latin-500.woff2") format("woff2"),
url("../fonts/roboto-v29-latin-500.woff") format("woff");
}

Alles anzeigen

So sehr ich den JCE schätze, die Schriftauswahl braucht keiner und sollte in den Einstellungen auch abgeschaltet werden.

Stef · 2. September 2022

nestor185,

Anleitung gemäss #6

Optionen in Cassiopeia

Cassiopeia bietet Optionen, die über Stile im Template-Manager angepasst werden können. Um größere Änderungen am Aussehen des Templates…

blog.astrid-guenther.de

Zitat von nestor185

So sehr ich den JCE schätze, die Schriftauswahl braucht keiner und sollte in den Einstellungen auch abgeschaltet werden.

Finde ich auch.

.

nestor185 · 2. September 2022

Na dann. Schadet aber bestimmt nicht, es ein zweites Mal zu erklären.

Stef · 2. September 2022

Zitat von ycsh

Die Schrift.zip habe ich entpackt in
a)../media/vendor/satisfy-font...

a) url('../media/vendor/satisfy-font/satisfy-v17-...

Das "vendor" Verzeichnis nicht verwenden, da dieses bei einer Aktualisierung der Joomla Kerndateien veränderbar ist.

.

derkps · 4. September 2022

Hallo,

ich bin wie beschrieben verfahren, aber es funktioniert nicht!

aclonica-v18-latin.zip entpackt

media/templates/site/cassiopeia_es/fonts/aclonica/aclonica-v18-latin.zip (entpackt!)

media/templates/site/cassiopeia_es/css/user.css

Code

/* aclonica-regular - latin */
@font-face {
font-family: 'Aclonica';
font-style: normal;
font-weight: 400;
src: url('../fonts/aclonica/aclonica-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/aclonica/aclonica-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/aclonica/aclonica-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/aclonica/aclonica-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/aclonica/aclonica-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/aclonica/aclonica-v18-latin-regular.svg#Aclonica') format('svg'); /* Legacy iOS */
}

h6,
.h6 {
font-family: "Aclonica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";   font-weight: 700;
}

Alles anzeigen

Jetzt müsste ein Text formatiert mit H6 in der anderen Schrift dargestellt werden.

Aber es passiert garnichts

JCE Codefenster: <h6>text</h6>
Füge ich in einem Absatz Text ein und weise per Schriftauswahl im JCE die neue Schrift zu, wird in der Ersatzschrifft dargestellt

JCE Codefenster: <p><span style="font-family: Impact;">Text</span></p>

drmenzelit · 4. September 2022

Was erwartest du im Code Fenster von JCE zu sehen? Es wird kein Inline Style eingefügt, die Schrift solltest du im Frontend sehen.

derkps · 4. September 2022

Ich erwarte, dass die andere Schrift dargestellt wird.

Im Editor, in der Vorschau oder im FE.

Die eingestellte Ersatzschrift und alles aus der Liste wird ja auch dargestellt.

drmenzelit · 4. September 2022

Damit du in JCE die Schriften vom template siehts, musst du in JCE die entsprechende css Datei einbinden

derkps · 4. September 2022

In JCE/Profile/default Schriftarten habe ich die neue Schriftart per Namen mit Ersatzschrift Impact hinzugefügt.

Von css Datei steht da nichts.

Der Name der neuen Schrift erscheint auch in der Liste. Dargestellt wird aber nur die bereits vorhandene Ersatzschrift im Editor, Vorschau, FE

Und die andere Variante mit <h6> (Code von astrid ) zeigt auch keine Wirkung, soll aber bei den anderen ( Stef) funktionieren!?

Stef · 4. September 2022

Das Problem ist, dass du überall andere font-family per Editor eingefügt hast.

H6 wird die Aclonica Schrift im Frontend angezeigt, aber nur wenn man die inline Regel säubert. Im Moment hast du für den h6 im Footer, arial eingefügt, gemäss code.

Hier säubern (arial, usw...) und KEINE Schrift per Editor wählen wenn möglich. Die Schriften sollen nur per CSS greifen.

Code

<h6 style="background-image: url('/images/stories/pension/bg_unten.png'); text-align: center;"><br><strong><span style="font-size: 18pt;"><span style="font-family: arial, helvetica, sans-serif;">&nbsp;Taxi M. Dreive GmbH</span></span></strong><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: 12pt;"><span style="text-decoration: underline;"><span style="color: #000000; text-decoration: underline;"><br><br></span></span><span style="color: #000000;"><span style="text-decoration: underline;"><a href="/impressum" target="_blank" style="color: #000000; text-decoration: underline;">Impressum</a></span>&nbsp; &nbsp; &nbsp;</span><span style="text-decoration: underline; color: #000000;"><a href="/datenschutz" target="_blank" style="color: #000000; text-decoration: underline;"><span>Datenschutz<br><br></span></a></span></span></span></h6>

Im Moment hast du diese Regel (gemäss Code)

Code

Element {
  font-family: arial, helvetica, sans-serif;
}

drmenzelit · 4. September 2022

Zitat von Stef

Hier säubern (arial, usw...) und KEINE Schrift per Editor wählen wenn möglich. Die Schriften sollen nur per CSS greifen.

Das wird hier schon die ganze Zeit wiederholt, aber anscheinend noch nicht ernst genommen...

Code

<h6 style="background-image: url('/images/stories/pension/bg_unten.png'); text-align: center;"><br><strong><span style="font-size: 18pt;"><span style="font-family: arial, helvetica, sans-serif;">&nbsp;Taxi M. Dreive GmbH</span></span></strong><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: 12pt;"><span style="text-decoration: underline;"><span style="color: #000000; text-decoration: underline;"><br><br></span></span><span style="color: #000000;"><span style="text-decoration: underline;"><a href="/impressum" target="_blank" style="color: #000000; text-decoration: underline;">Impressum</a></span>&nbsp; &nbsp; &nbsp;</span><span style="text-decoration: underline; color: #000000;"><a href="/datenschutz" target="_blank" style="color: #000000; text-decoration: underline;"><span>Datenschutz<br><br></span></a></span></span></span></h6>

Ach du meine Güte....

derkps · 4. September 2022

Uhps, eigentlich sollte auf der Seite kein H6 sein. Aber bleiben wir mal bei den drei letzten Zeilen 'Impressum Datenschutz'.

Das verstehe ich nicht!
Wenn ich in css h6, .h6 {font-family: "Aclonica", ,,,} zuweise, gehe ich doch davon aus, dass das Format Überschrift 6 immer "Aclonica" ist. So habe ich das bei @Astrid's Tutorial verstanden.
Bei allen anderen Schriften funktioniert das mit der Auswahl im Editor doch auch. Über den Weg in der letzten Zeile ist es sehr umständlich.

Und der Inspector zeigt immer an: <span style="font-family: ...

Stef · 4. September 2022

Du benutzt per Editor eingefügt auf deiner Seite https://www.taxi.derkps.de/ die Schrift «Comic Sans». Diese Schrift wird ein Mac, Linux,… User gar nicht sehen, den er hat keine «Comic Sans» auf seinem Computer. Darum nur installierte Fonts per CSS benutzen.

derkps · 4. September 2022

Ich beziehe mich auf auf meine Frage #1 und komme zu dem Schluss, dass JCE keine weiteren Schriften einbinden kann. WYSIWYG gilt also nur eingeschränkt.

Die Taxi-Seite habe ich nicht genannt, da sie im Entwicklungsstadium ist offensichtlich noch viel geerbten Codeschrott enthält und die eingesetzten Schriften habe Erprobungscharakter.

Nach meinem Urlaub werde ich nochmal bei astrid zum Thema ' lokale Schriften' nachlesen. Vielleicht habe ich das falsch verstanden.

Ich bleibe bei Arial und gehe davon aus, dass das alle sehen können. Sonst... ja, was dann. Gleichwohl kenne ich viele teure Seiten mit exotischen Schriften.

Die #Frage, ob die vorinstallierten Schriften im JCE websicher sind ist ja auch nicht beantwortet worden. Da muss ich bei Google Webfonts Helper nochmal nachlesen.

Danke für die Unterstützung.

CurlY BracketS · 4. September 2022

Zitat von ycsh

Die #Frage, ob die vorinstallierten Schriften im JCE websicher sind ist ja auch nicht beantwortet worden. Da muss ich bei Google Webfonts Helper nochmal nachlesen.

Ich habe deine Frage in #3 beantwortet.

Stef · 4. September 2022

Zitat von ycsh

Nach meinem Urlaub werde ich nochmal bei astrid zum Thema ' lokale Schriften' nachlesen. Vielleicht habe ich das falsch verstanden.

Die Aclonica Schrift hast du ja jetzt lokal installiert und sie funktioniert wie ich ja getestet habe. Kannst die Aclonica also online benutzen und jeder wird sie sehen können.

Und ja CurlY BracketS hat es ja im #3 auch schon erklärt.

derkps · 4. September 2022

Tja, das ist so eine Sache mit dem gemeinsamen Sprachraum.

Websicher bedeutet für mich, das alle Plattformen damit zurecht kommen. Und die lokalen Schriften habe ich so verstanden, dass sie auf alle Plattformen geladen und somit ersatzlos dargestellt werden.

Acloncia geht dann wohl nicht auf Mac oder doch?!
Und Arial geht auch nicht auf Mac (habe ich gelesen) und das ist blöd, weil m.w. viele Künstler auf dieser Plattform unterwegs sind, die wir dann nicht wirklich erreichen.

Ich kann damit umgehen, denke aber an die vielen Designer die schrecklich stolz auf die Vielfalt der eingesetzten exotischen Schriften sind.

solong

Stef · 4. September 2022

Zitat von ycsh

Acloncia geht dann wohl nicht auf Mac oder doch?!

Ja, die ist jetzt auf alle Plattformen sichtbar, weil du sie lokal installiert hast.

Du kannst also egal welche exotischen Schriften lokal wie die Aclonica installieren.

WEBMONTEUR · 12. September 2022

Hallo Leute,

muss mich nochmal melden.

Habe hier noch eine Seite sv-rittersdorf.de die immer noch fonts.googleapis angibt. Jedoch ich finde die css nicht, wo dies noch drin steht. Kann mir jemand helfen und mir diese css nennen wo diese liegt?

Habe alles schon gemacht (oder übersehen) und finde den Fehler nicht.

Vielen lieben Dank

(nutze das Plugin System - JT - ALDEF)

Joomla 3 (ich weiß, wird bis nächstes Jahr geändert)

Joomla 3 aktuell alle Plugins/Komponente aktuell

php 7.4

Joomla aktuell

Stef · 12. September 2022

Auf jeden Fall auch aus Google API's - GoogleMap die GFonts nachladen.

Tags