Darstellung einer Schriftfamilie in Browsern

derkps

Hallo,

ich habe eine Verständnisfrage zur Schriftfamilie, die im JCE eingestellt werden kann.

Ich bin bisher davon ausgegangen, dass letztlich der Browser befindet, wie er eine Schrift darstellt.
Wenn ich im JCE eine exotische Schrift verwende, kann ich nicht garantieren, dass diese auch identisch in allen Browsern dargestellt und nicht durch eine ähnliche ersetzt wird.
Ist das korrekt?

Aktuell soll 'anke.regular.ttf' verwendet werden. Dabei geht es um exakt EINEN einzigen Buchstaben in einem Bild (das große W), der anders dargestellt wird als mit 'arial'

Gibt es eine Lösung, 'anke' durchgängig und rechtssicher zu verwenden?

vG

drmenzelit

Es kommt drauf an ... die Schriftfamilien, die in JCE zur Auswahl stehen, sind Systemschriften, d.h. sie müssen im System des Benutzers vorhanden sein, um richtig dargestellt zu werden. Ich weiß nicht, wie du die anke-Schrift eingebunden hast. Aber ttf ist nicht das richtige Format für Web, du brauchst eher woff-Files. Am besten speichert man die Files in einem Ordner im Template und bindet sie per CSS ein.

derkps

Moin!

anke.rtf hat der Grafiker benutzt. Gefunden habe ich anke.otf und nach anke.woff2 konvertiert (kann ich am PC aber nicht öffnen?!).
In JCE habe ich nichts eingebunden, ist ja wohl auch nicht zielführend.

Wie aber binde ich eine Schrift in der user.css ein?

übrigens: ich arbeite mit Cassiopeia

Sieger66

Verwende doch auch mal die diversen Suchmöglichkeiten dann findest du z.B.:

Typografie/Schriftformatierung – SELFHTML-Wiki

Schriften 'websicher'

web.archive.org/web/20230207215821/https://blog.astrid-guenther.de/cassiopeia-optionen#schriften-aus-einem-lokalen-verzeichnis

Stef

Zitat von derkps

Wie aber binde ich eine Schrift in der user.css ein?

Leider ist die tolle Anleitung von astrid nicht mehr online. Aber hier ist auch eine:

web-eau.net/en/blog/custom-fonts-cassiopeia

hattest du schon mal:

forum.joomla.de/thread/16550-schriften-websicher

Sieger66

Zitat von Stef

Leider ist die tolle Anleitung von astrid nicht mehr online...

Die ist aber im Webarchiv weiterhin zu finden. Siehe dritten Link in #4

Zitat von Stef

hattest du schon mal:
forum.joomla.de/thread/16550-schriften-websicher

und ebenso zweiter Link in #4

Rolf Dautrich

Das CSS zum Einbetten in Deine user.css (z.B. Cassiopeia) oder custom.css (manche andere Templates) sieht ungefähr so aus (Beispiel für Google-Schrift Roboto):

Code

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v32-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Das musst Du natürlich für Deine Schrift anpassen. Wo die Fonts abgelegt werden (Eintrag src), ist abhängig von Deinem Template.

Zitat von derkps

Gefunden habe ich anke.otf und nach anke.woff2 konvertiert (kann ich am PC aber nicht öffnen?!).
In JCE habe ich nichts eingebunden, ist ja wohl auch nicht zielführend.

Du kannst aber die Schriftdatei mit einem Clouddienst (z.B. diesem) in .otf konvertieren und anschließend die .otf auf Deinem PC installieren; dann steht sie Dir auch da zur Verfügung.

Elwood

Nutzt du ein besonderes Framework?

Stef

Zitat von Elwood

Nutzt du ein besonderes Framework?

Zitat von derkps

übrigens: ich arbeite mit Cassiopeia

Elwood

Oh, habe ich überlesen.

Muss mal die Brille absetzen.

derkps

Hallo,
ich bin den Anweisungen [#7, #5]gefolgt (warum es in 2022 [#5, #6] nicht geklappt hat kann ich nicht sagen) und habe folgendes eingetragen:

in media/templates/site/cassiopeia_child/css/user.css (gleich unterhalb von :root)

Code

/* anke-regular */
    @font-face {
    font-family: 'Anke Regular';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
    url('../fonts/anke') format('woff2');
    url('../fonts/anke') format('ttf'); 
}
    h6, .h6
{
    font-family: "Anke Regular";
    }

Alles anzeigen

hier wird anke.woff bzw. anke.ttf eingefügt

Code

 media/templates/site/cassiopeia_child/css/font/anke/

Wenn ich den Text in JCE nun in <h6> statt in <p> bzw. <div> schreibe, wird Anke im JCE angezeigt.
In Chrome und Edge funktioniert es, in Firefox und Safari (iOS) funktioniert es nicht. Jeweils aktuelle Version auf Win11.

SEITE 6
Was ist falsch?

vG

derkps

Hallo,
das Problem mit Firefox(Win) hat sich erledigt!

Wenn ich das richtig verstanden habe, ist das woff-Format auch für Apple-Safari und Mac OS geeignet. s.a. #7
Wenn ich das richtig verstanden habe, liegt die Schrift auf 'meinem' Server und wird an den Browser übertragen (wie auch Bilder), ohne dass die Schrift im Browser bereits vorhanden ist.
Oder irre ich?

Von der Schriftfamilie 'Anke' sind die Formate woff, woff2, ttf, otf eingebunden und h6 zugeordnet.

Code

h6
{
 font-family: "anke", impact; 
} /* "anke" wie Dateiname anke.woff2 */

Alles gut, nur bei iOS funktioniert es nicht. Weder bei Safari noch bei Firefox. Stattdessen wird der Ersatz 'impact' angezeigt. Warum, was ist falsch???

1. Ist das bei euren iOS-Geräten auch so?
2. Was sagen die Nutzer von Mac und Android?

Home

derkps

oops, fascher Link. Seite 6

SEITE 6

Sieger66

Deine Schriftdatei liegt dort:

http://test.derkps.de/media/templates/site/cassiopeia_mus/fonts/anke/anke.woff

dann musst du den richtigen Dateipfad zur Schriftdatei dort:

http://test.derkps.de/media/templates/site/cassiopeia_mus/css/user.css

korrekt und vollständig eintragen z.B.:

url('../fonts/anke/anke.woff') format('woff');

Aus welcher Anleitung hast du deine fehlerhafte unvollständige Dateipfadangabe abgeleitet ?

Außerdem ist auch diese Angabe in #11 ist zumindest derzeit offensichtlich fehlerhaft:

Zitat von derkps
hier wird anke.woff bzw. anke.ttf eingefügt
Code
 media/templates/site/cassiopeia_child/css/font/anke/

weil in diesem Dateiverzeichnis die gennanten Schriftendateien sich nicht befinden.

Sieger66

Außerdem darfst du nicht einmal:

font-family: 'Anke Regular';

und dann wieder:

font-family: "anke";

benutzen wenn es funktionieren soll!

Das wären zwei völlig unterschiedliche Schriften !

font-family: 'Anke Regular'; ist ungleich font-family: "anke";

Aus welcher Anleitung hast du deine fehlerhaften Schriftfamiliennamen abgeleitet ?

derkps

#14, 15
Ja, ich weiß. Den Fehler habe ich korrigiert und dann funktionierte es auch mit Chrome, Edge und Firefox.
Dann habe ich auf einer anderen URL weiter probiert wg. iOS und vergessen, das Ergebnis auf test.derkps.de zu speichern; sorry

Bzgl. iOS bin ich auf all unseren Geräten auf den sehr nachhaltigen Cache herein gefallen.
Aktuell ist m.E. jetzt alles gut.

Es wäre nett, wenn Android und Mac-Nutzer diesen Link öffnen und bestätigen. Sie sollten folgendes Schriftbild sehen

Vielen Dank für die Unterstützung!

Aber nochmal für mein Verständnis:
1. Die neue Schrift wird wie ein Bild an den Browser übertragen und liegt dann dort lokal vor. Richtig?
Dann erübrigt es sich auch eine Ersatzschrift zu definieren. Richtig?

2. Diese Zuweisung der neuen Schrift scheint mir zwingend erforderlich. Richtig?
h6 { font-family: "anke"; }

Sie wird in Anleitungen aber nur selten erwähnt?! Mein altes Problem aus 2022 #4

vG

Sieger66

Zitat von derkps

1. Die neue Schrift wird wie ein Bild an den Browser übertragen und liegt dann dort lokal vor. Richtig?

Ja.

Zitat von derkps

1. ...
Dann erübrigt es sich auch eine Ersatzschrift zu definieren. Richtig?

Nein. Weil im Browser des Websitebesuchers kann es z.B. verboten werden deine lokale Schrift zu laden oder zu verwenden. Oder wenn du mal wieder "mist baust" und die Schrift nicht im richtigen Dateiodner ist...

Zitat von derkps

2. Diese Zuweisung der neuen Schrift scheint mir zwingend erforderlich. Richtig?
h6 { font-family: "anke"; }

Ja.

Du musst dem Browser des Websitebesuchers natürlich mitteilen für was bzw. wann er deine Schrift verwenden soll.

Ist übrigens in meinem ersten Linkziel in #4 auch so vorhanden.

Sieger66

Zitat von derkps

#14, 15
Ja, ich weiß. Den Fehler habe ich korrigiert und dann funktionierte es auch mit Chrome, Edge und Firefox.
Dann habe ich auf einer anderen URL weiter probiert wg. iOS und vergessen, das Ergebnis auf test.derkps.de zu speichern; sorry

Das kam reichlich spät und damit bist du kurz davor auch auf meiner Ignorier-Liste zu landen...

Insbesondere auch da es kaum Links zum jeweils echten Problem auf einer "realen Website" gibt sondern häufig nur irgendwelche "Testsites"...

Rolf Dautrich

Zitat von derkps

Es wäre nett, wenn Android und Mac-Nutzer diesen Link öffnen und bestätigen. Sie sollten folgendes Schriftbild sehen

Mit Android getestet und funktioniert.

derkps

Vielen Dank!

Wenn ich eine Thema abschließe, fasse ich das Ergebnis immer zusammen, damit die Nachwelt auch etwas davon hat.
Aus sovielen Posts eine Lösung abzulesen ist schwierig.

Also: Comming soon!

vG

Es wäre nett, wenn Android und Mac-Nutzer diesen Link öffnen und bestätigen. Sie sollten folgendes Schriftbild sehen

Vielen Dank für die Unterstützung!

Es wäre nett, wenn Android und Mac-Nutzer diesen Link öffnen und bestätigen. Sie sollten folgendes Schriftbild sehen

Tags