Darstellung einer Schriftfamilie in Browsern

    Joomla Version
    5.1.4
    PHP Version
    PHP 8.3.x
    Hoster
    fc-hosting

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

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

    vG

    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.

    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

    Einmal editiert, zuletzt von Indigo66 (26. September 2024 um 09:42) aus folgendem Grund: Ein Beitrag von derkps mit diesem Beitrag zusammengefügt.

    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

    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

    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.

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

    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)

    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

    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

    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.

    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 ?

    #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

    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.

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