Schriften in Mobi?

[stobi_de]

Hat sich das Handling der Schriftarten in Mobi geändert?
Ich hatte jetzt diverse Mal den Effekt, dass eine Schriftart nicht mehr funktionierte
Hier eben:
https://www.eiscafepfeil.de/index.php

Die Schreibschrift ging, aber die zweite Schrift "Zen Kurenaido" ging nicht mehr und wurde vorübergehend gegen "Roboto Condensed" ausgetauscht.

Ergänzung: ich habe die Schrift aus Google neu geladen (gleiche Größe), diesmal aber in ein Verzeichnis ohne Bildestrich kopiert
also MyFonts\ZenKurenaido statt MyFonts\Zen-Kurenaido

Es geht wieder.
Andererseits funktioniert die Schrift "be-vietnam" auch mit Bindestrich.

[Tommy Herrmann]

Moin,

also ich erstelle mir für den Download meiner lokalen Schriften immer in jedem Projekt ein Verzeichnis, das ich auch

myfonts

benenne. In diesem Beispiel mit der Schrift "Jost" am Server bei dieser Testseite:

https://www.mobirise-tutorials.com/Test-Temp/

So wie auch in meinem Tutorial beschrieben:

https://www.mobirise-tutorials.com/Local-Fonts-Weights/


Dort kopiere ich dann sämtliche Schriften unverändert, so wie sie von Google benannt wurden, hinein - und zwar mit allen Font-Gewichten. Diese Schriften haben eigentlich fast immer jede Menge Bindestriche in ihren Dateinamen.

Es wurde dazu ja dann ebenfalls von Google, auf ihrer Seite "Webfonts-Helper", bereits ein CSS erstellt, das ich als Datei "style.css" gespeichert und ebenfalls in mein gleiches Verzeichnis "myfonts" kopiert habe, wie man im Screenshot oben auch sehen kann.

Diese CSS-Datei sieht dann in diesem Beispiel so aus:

https://www.mobirise-tutorials.com/Test ... /style.css

Ein Unterverzeichnis von meinem Schriftverzeichnis "myfonts" gibt es bei mir gar nicht - wozu?

Somit kann ich zu dem Bindestrich im Verzeichnisnamen nix sagen. Ich kann mir aber beim besten Willen kaum vorstellen, dass das irgendeine Auswirkung haben könnte.

In dem Link in der Projekt-Datei "project.mobirise" steht dann bei mir natürlich auch der Verweis zu dieser CSS-Datei "style.css" mit dabei, gefolgt von der Browser-Aktion zur Verwendung der Schrifttypen:

Code: Alles auswählen

"siteFonts": [
      {
        "css": "'Jost', sans-serif",
        "name": "Jost",
        "url": "https://www.mobirise-tutorials.com/Test-Temp/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i"
      }
    ],

Im HTML-Quellcode sieht es dann so aus:

<link rel="preload" href="mobirise-tutorials.com/Test-Temp/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Bei Dir steht dort gar keine css Datei dabei - keine Ahnung, warum es dann überhaupt funktioniert - oder funktioniert das durch das Attribut as="style"?

<link rel="preload" href="eiscafepfeil.de/MyFonts/ZenKurenaido/css?family=Zen+Kurenaido:400&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Verzeichnisnamen sollten im Übrigen möglichst immer mit Kleinbuchstaben beginnen, was ich aber auch oft falsch mache:

https://verwaltung.uni-koeln.de/stabsst ... x_ger.html

[Klaus]

Bei Dir steht dort gar keine css Datei dabei - keine Ahnung, warum es dann überhaupt funktioniert - oder funktioniert das durch das Attribut as="style"?

Ob da CSS steht oder nicht ist egal, da könnte auch abc oder xyz.egon stehen.
Was der Browser unter der URL findet steht im rel. (ist es ein Icon steht da dann icon)
https://www.w3schools.com/tags/att_link_rel.asp
... und es muss noch nicht mal eine Datei sein, im Falle von google ist es ein Rest API Endpunkt der dann je nach Queryparametern das entsprechende CSS "ausliefert".
https://developers.google.com/fonts/docs/css2?hl=de

Die Queryparameter machen jetzt da die CSS Datei statisch (fest) eingestellt ist keinen Sinn (mehr), stören aber auch nicht.
Queryparameter sind "get Parameter" ... die kennst Du ja noch, haben wir öfters verwendet.
http://www.tommyherrmanndesign.com/nof/ ... torial.php

Hier mal 2 Bsp. für den Aufruf bei google ... da sieht man schön wie er je nach Abfrage unterschiedliche CSS liefert.
(Wenn das 1 mal mit allen individuellen Stilen und Gewichten geholt und fest auf der eigenen Seite ist macht das nach dem ? keinen Sinn mehr, stört aber auch nicht und man sieht wie die Abfrage an google mal ausgesehen hat.)
https://fonts.googleapis.com/css?family ... splay=swap
https://fonts.googleapis.com/css?family ... splay=swap

[Tommy Herrmann]

Hallo Klaus,

ich hatte so ein bisschen gehofft, dass Du das liest und so eine tolle Antwort lieferst

Dann ist also die Schreibweise mit meiner CSS-Datei eigentlich so nicht wirklich richtig, obwohl es geht.

Code: Alles auswählen

https://www.mobirise-tutorials.com/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap

Bei Angabe der Datei style.css mit allen Schrifttypen kann man (sollte man) also die Parameter eigentlich ganz weglassen. Also so:

Code: Alles auswählen

https://www.mobirise-tutorials.com/assets/myfonts/style.css

https://www.mobirise-tutorials.com/asse ... /style.css


Ich habe dann nur ein noch für mich nicht verständliches Problem:

Ich ändere ja auf diese Art die entfernten Google-Fonts in lokale eigene Fonts in der Projekt-Datei "project.mobirise".

So ersetze ich die URL mit meiner URL, anstelle der von Google - und das funktioniert:

Code: Alles auswählen

"url": "https://www.mobirise-tutorials.com/Test-Temp/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i"

Trage ich es ohne die Parameter ein, funktioniert es nicht:

Code: Alles auswählen

"url": "https://www.mobirise-tutorials.com/Test-Temp/assets/myfonts/style.css"

[Klaus]

Das "Fummeln" in der "project.mobirise" ist ja auch nix was "sauber" ist.

Das eine ist dass die URL
https://www.mobirise-tutorials.com/Test ... /style.css
im HTML bei einem "link rel href" so im Browser funktioniert,
das andere ist wenn Du "illegal" in den Dateien vom MR direkt Änderungen vornimmst.

MR schreibt google Fonts und eigene (lokale) Fonts unterschiedlich in die Konfigdatei.
Wenn Du da außerhalb von MR per Hand Änderungen vornimmst ist nicht gesagt dass MR damit klar kommt.

Für MR ist das was Du da einträgst immer noch eine google URL die MR selber so mal reingeschriben hat.
("Denkt" MR jedenfalls.)

MR kommt ja gar nicht auf die Idee dass da jemand per Hand was macht.
... na ja und so macht MR das was es mit google Fonts URLs halt macht es hängt ein &display=swap dran.
Problem nur damit wird die dann beim Publizieren zusammengebaute URL ungültig.
Ein abc?def=1&display=swap ist was gültiges, ein abc&display=swap ist es nicht
und damit läd der Browser dann die CSS auch nicht.

... übrigens ist auch bei Deiner Änderung die funktioniert nicht gesagt dass MR damit komplett oder immer klar kommt.

Falls MR irgendwann mal die URL läd und dann an der selber Änderungen/Anpassungen vornehmen sollte wenn sich mal die URL von google ändert kann es gut sein dass die dann zwar geladen wird in der Annahme dass es ne google URL ist (weil es halt das passende "Format" in der project hat) aber dann bei der Überprüfung "rausknallt" weil die URL unbekannt ist.
Seit einiger Zeit verwendet MR die neue Fontsadresse css2 statt der css ... falls MR jemals eine automatische Konvertierung vornehmen sollte ... KA was dann rauspurzelt oder es ggf. sogar die project "zerlegt".

[stobi_de]

Hallo Klaus,
ich habe da jetzt bei mir einen geringfügig anderen Code, aber sehe jetzt nicht den Fehler, den Du erklärt hast - nun ja, es ist spät und ich bin alt....

Code: Alles auswählen

<link rel="preload" href="https://www.afripix-web.de/MyFonts/Roboto/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://www.afripix-web.de/MyFonts/Roboto/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"></noscript>

[Klaus]

Das von Dir passt ja auch ... warum es ab und zu nicht mehr geht ... müsste man gucken wenn man eine Seite hat die gerade nicht geht ... wenn die immer schon repariert wurde sieht man halt nix.

Mein erster Beitrag hier war ja nur weil Tommy gefragt hat "... Bei Dir steht dort gar keine css Datei dabei ..."
... warum das von Dir trotzdem geht ... es geht weil keine Endung notwendig ist.

[stobi_de]

Ich werde beim nächsten Auftreten des Fehlers dann erstmal nichts ändern.

[Tommy Herrmann]

Moin,

Klaus, habe mich jetzt wohl nicht ganz richtig ausgedrückt.

Frank und ich haben diese Technik der Änderung von Google-Fonts auf lokale Fonts unabhängig voneinander damals entwickelt. Ich war auch damals erstaunt, dass er das anders macht als ich und beides geht. Da aber meines auch ging und ich schon meine Tutorials alle für lange Zeit fertig geschrieben hatte, habe ich es so gelassen.

https://www.mobirise-tutorials.com/Local-Fonts-Weights/

Ich habe von Anfang an eine CSS-Datei erstellt, so wie es beim "Google-Helper" ja auch beschrieben steht.

Auch Mobirise selbst erstellt ja eine solche CSS-Datei "style.css", wenn man eine lokale Schrift im Schrift-Editor von Mobirise anwendet und das eben nicht über die Projekt-Datei vornimmt.

Google selbst schreibt da nur "CSS", so wie es Frank auch macht.

Bei mir geht das nicht - wenn ich nicht explizit dort auf meine Datei style.css verweise habe ich gar keine Schrift - der Link zur CSS fehlt dann und es entsteht ein Fehler.

Mobirise generiert immer noch folgende Zusatz da hinten dran, der so aber nicht mit in der Projekt-Datei "project.mobirise" steht:

&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'

Ehrlich gesagt weiß ich auch nicht, was das alles genau bewirkt. Ich weiß nur, dass "swap" den Browser anweist, bis zum Laden der Schrift eine Schrift aus der Liste der Alternativen zu benutzen und auf den Webfont umzuschalten, wenn die Schrift geladen ist. Wie das genau funktioniert, weiß ich aber nicht.


Also dann so - und das geht bei mir ausschließlich, wenn ich anstelle von "css" dort "style.css" stehen habe.


So geht es NICHT (nur "css"):

Code: Alles auswählen

<link rel="preload" href="https://www.mobirise-tutorials.com/Test-Temp/assets/myfonts/css
?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i
&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

So geht es ("style.css"):

Code: Alles auswählen

<link rel="preload" href="https://www.mobirise-tutorials.com/Test-Temp/assets/myfonts/style.css
?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i
&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Das ist meine Frage und das verstehe ich nicht.

Ich befürchte, dass entweder ich oder Frank an dieser stelle etwas falsch oder ganz anders machen.

Ich müsste das schon richtig machen, schon wegen meines Tutorials und weil ich über 200 Projekte mit dieser Technik, also mit der Angabe der Datei "style.css", erstellt und online habe

Allerdings habe ich die unterschiedlichsten Schriften in all diesen 200 Projekten, auch wenn es meist "Jost" ist (wird vom Mobirise5 Standard Thema verwendet), und alle Schriften werden auch korrekt angezeigt. Dennoch muss ich wissen, warum es dann bei mir mit der Angabe von nur "css" nicht geht.

Hier mal als Beispiel meine allerneueste Seite, die mit "Mobirise AI" erstellt wurde und die Schrift "Inter Tight" beinhaltet:

https://www.mobirise-tutorials.com/Test ... nerated-3/

Hier die vom Google-Helper erstellte CSS-Datei:

https://www.mobirise-tutorials.com/Test ... /style.css

[Tommy Herrmann]

Klaus,

sorry - jetzt war ich echt schwer von Kapee

Ich denke immer die Dateierweiterung ist nicht notwendig - ist sie ja auch nicht. Nur muss dann bei mir natürlich da nicht "css" stehen sondern eben "style"

Code: Alles auswählen

<link rel="preload" href="https://www.mobirise-tutorials.com/Test-Temp/assets/myfonts/style
?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i
&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Einmal gedanklich verrannt - immer gedanklich verrannt

Wobei ich sagen muss, eine Datei "css" wie eine Dateierweiterung zu benennen, finde ich schon grenzwertig und für meine eingebaute KI eher unlogisch. Ich benenne meine Seite "Impressum" ja auch nicht "html"

Also ist alles bei allen Projekten richtig so und mein Tutorial auch - danke für Deine Mühe


P.S.:

… und danach habe ich eigentlich auch gesucht:

https://stackoverflow.com/questions/327 ... chronously

Vorladen und asynchrones Laden kombiniert:

Sie benötigen vorab geladene und asynchrone CSS. Diese Lösung kombiniert einfach zwei Zeilen aus der oben dokumentierten Antwort und macht sie so etwas übersichtlicher. Wie bereits ausführlich in der oben dokumentierten Antwort erläutert, kann das Vorladen möglicherweise nicht wirklich vorteilhaft sein.

Code: Alles auswählen

<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Anscheinend ist es besser, onload="this.rel='stylesheet'; this.onload = null" zu verwenden. Es ist notwendig, this.onload auf null zu setzen, um zu vermeiden, dass es in einigen Browsern zweimal aufgerufen wird.