Font Problem

[stobi_de]

Ich habe für einen Kunden seine Firmen-Schrift eingebaut.
Diese einfach vom PC geladen und in Mobi publiziert.
Funktioniert gut - aber nur auf meinem PC.
Kunde hat Times.

Und das ist der Grund im Assets/font folder im Web !!!

Code: Alles auswählen

@font-face {
   font-family: 'ConduitITCPro-Medium';
   font-display: swap;
   src: url('file:///D:/InternetProjekte/fallprotection/fonts/ConduitITCPro-Medium/font.ttf');
}

Das Projectfile sieht korrekt aus
"file": "@PROJECT_PATH@/fonts/Conduit%20ITC%20W02%20Light/font.ttf"

Aber @PROJECT_PATH wird nicht ersetzt.

So haben wir es bislang gemacht

Code: Alles auswählen

"siteFonts": [
      {
        "css": "'Conduit-ITC-W02-Medium'",
        "name": "Conduit-ITC-W02-Medium",
        "url": "https://www.afripix.de/hold/myfonts/Conduit-ITC-W02-Medium/css?family=Conduit-ITC-W02-Medium:400,500,600,700"
      },
      {
        "css": "'Conduit-ITC-W02-Light'",
        "name": "Conduit-ITC-W02-Light",
        "url": "https://www.afripix.de/hold/myfonts/Conduit-ITC-W02-Light/css?family=Conduit-ITC-W02-Light:100,200,300"
      }

Das steht im css - und das klappt nicht

Code: Alles auswählen

@@font-face {
  font-family: 'Conduit-ITC-W02-Medium';
  font-style: normal;
  font-weight: 400;
  display: swap;
  src: local(''),
       url('font.ttf') format('ttf'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       
}

[Tommy Herrmann]

Moin,

nee - einen lokalen Verweis darf es natürlich nicht geben. Ich habe gerade letzte Woche eine neue Beispielseite zum Mobirise Design-Thema "StockM5" erstellt - wegen des Slider-Problems, das Du hast:

https://www.mobirise-tutorials.com/StockM5/

Dort habe ich - wie immer - meine Methode "Lokale Font Weights" für den Font "Reddit Sans" angewendet:

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


Hier meine durch Google-Webfonts-Helper erstellte CSS-Datei "style.css", die im gleichen Verzeichnis (hier "myfonts") wie der Font liegen muss, damit die von Google generierten, relativen Pfade auch stimmen:

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

In meinem Fall lege ich immer ein Verzeichnis "myfonts" im "assets" Verzeichnis eines jeden Projektes an und kopiere dort die von Google generierte Datei "style.css" hin:

/assets/myfonts/style.css

So sieht meine Änderung der "url" dann entsprechend in der Datei "project.mobirise" aus:

Code: Alles auswählen

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

Das funktioniert mit der aktuellen v6.0.5 von Mobirise ebenso wie mit allen anderen Versionen zuvor. Da hat sich nichts geändert.




Was heißt denn scr: local (' ') - das sieht so aus, als würde gar keine CSS-Datei existieren und Mobirise eine Dummy-Datei erstellt hätte:

Code: Alles auswählen

@@font-face {
  font-family: 'Conduit-ITC-W02-Medium';
  font-style: normal;
  font-weight: 400;
  display: swap;
  src: local(''),
       url('font.ttf') format('ttf'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       
}

Bei mir sieht das in der CSS-Datei dann eher so aus:

Code: Alles auswählen

/* reddit-sans-regular - 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: 'Reddit Sans';
  font-style: normal;
  font-weight: 400;
  src: url('reddit-sans-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Der src CSS-Deskriptor steht ja für "source" (Quelle) und das muss natürlich eine URL sein.

[stobi_de]

So wie Du habe ich es auch, oben hatte ich was vergessen.
Ich baue es nochmal!

Sag mal, haben wir in den M4-Blocken eigentlich ein Features-Element mit gleich hohen Cards?
Oder ein M5, was auch in M4 läuft?
Das mit Card-Deck kenne ich, aber wenn es das von der Stange gibt, nehme ich natürlich das!

[Tommy Herrmann]

Moin,

Du - ich glaube nicht, das mit der gleichen Höhe gab es eher erst ab Version 5. Ich denke mal, dass ich deshalb damals ein selbst erstelltes Card-Deck hier vorgestellt hatte:

https://www.mobirise-tutorials.com/Busi ... -Deck.html

… bin mir aber gar nicht sicher. Nur kann ich jetzt schlecht alle M4 Themen danach durchsuchen, zumal ich gar nicht alle Themen installiert habe.

[Tommy Herrmann]

Diese Card-Decks (News) aus dem Standard-Thema "Mobirise5" sollten (und sind) mit "M4" Themen kompatibel:

[stobi_de]

Wenn Du gerade Zeit hast, könntest Du mal schaun, ob Du den Conduit Font siehst. (Upload noch 3 Minuten)
Auf meinen ganzen Rechnern ist der installiert (ha ha "ganze Rechner", 2 sind es)
Der Kunde sagte gestern, dass er nur Times sieht - allerdings Apple.

Das Projekt ist 8 Jahre alt, ich finde es vom Design immer noch gut. Bissl muss aufgeräumt werden aber an den Schriften hatte ich nicht gespielt.
Das Original ist hier www.lifeline-hold.com und sollte, wenn überhaupt, das gleiche Schriftproblem haben.

[stobi_de]

Mit einem "/" - hä?

[stobi_de]

So. da klappt gar nix.
Jetzt habe ich auch Times.
....
Nun aber bei mir OK.

Features: Ich hatte da welche aus StartM5 verwendet, das klappte nicht. Danke für den Tipp

[Tommy Herrmann]

… also hier sieht alles richtig aus:

https://www.lifeline-hold.com/assets/fonts/style.css

https://www.lifeline-hold.com/assets/fo ... m/font.ttf

Du hast aber den Font dort über Mobirise lokal eingepflegt und nicht über die Datei "project.mobirise"

[Tommy Herrmann]

Könnte sein, dass der "Cookie Alert" von Mobirise da mal wieder zickt und die CSS nicht beim ersten Laden eingelesen wird.

Kunde sollte mal Cache neu laden:

Strg + Fn + F5

... oder Du musst anderen Cookie Alert verwenden.

[stobi_de]

Die neue Version www.afripix.de/hold sollte aber den Projektfont haben.
Cookie: ich werde ihm auch den Cookiefirst einbauen

[Tommy Herrmann]

Ja - das klappt auch:

https://www.afripix.de/hold/myfonts/Condiut/

nur sieht Deine CSS-Datei komisch aus. Verwendest Du den die CSS vom "Google Webfonts Helper"?

Dort dann "Modern Browsers"?

... da finde ich die Schrift "conduit" überhaupt nicht

Das ist offensichtlich eine gekaufte Schrift.

[stobi_de]

Conduit ist nicht aus Google.
Wenn das Google wäre, gäbe es gar keine Probleme.
Es gibt zwar sehr ähnliche in Google, aber er wollte schon vor einigen jahren die Conduit haben - klappte ja so ziemlich.

[Tommy Herrmann]

Ich kenn mich jetzt mit der CSS für Fonts nicht aus, ich würde dann aber dennoch als Vorbild diese CSS von Google nehmen - hast Du das mal so ausprobiert:

Code: Alles auswählen

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

Das "font-display: swap;" fehlt ja jetzt bei Dir völlig in der CSS-Datei, dennoch gibst Du es ja als Parameter in der URL an:

<link rel="preload" href="https://www.afripix.de/hold/myfonts/Con ... 00,500,600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

Die CSS-Deklaration font-display: swap; wird innerhalb der @font-face-Regel verwendet und steuert, wie Schriftarten (Fonts), die über das Web geladen werden, angezeigt werden.

Bedeutung von font-display: swap;

Sie weist den Browser an:

Zeige zuerst eine System-Schriftart an (Fallback-Font), solange die Web-Schriftart noch nicht geladen ist. Sobald die Web-Schriftart geladen ist, tausche sie gegen die gewünschte aus.


Beispiel:

Code: Alles auswählen

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans.woff2') format('woff2');
  font-display: swap;
}

Vorteile:

> Verbesserte Performance: Der Text wird sofort mit einer Fallback-Schriftart angezeigt – keine weiße Fläche (FOIT: Flash of Invisible Text).

> Bessere User Experience: Nutzer sehen sofort Inhalte.

> SEO-freundlich: Suchmaschinen können Inhalte besser lesen, da sie nicht auf das Laden der Webfont warten müssen.


Vergleich zu anderen Werten von font-display:

Wert Verhalten auto Standardverhalten des Browsers block Wartet kurz auf die Webfont (FOIT), zeigt dann Fallback swap Zeigt sofort Fallback, tauscht später gegen Webfont (FOUT) fallback Zeigt Fallback, tauscht nur aus, wenn Webfont sehr schnell geladen wird optional Wie fallback, aber kann Webfont auch gar nicht laden, z. B. bei langsamen Verbindungen

[stobi_de]

Genau das will der Kunde nicht.
Er will auf keinen Fall zuerst Times sehen und dann Conduit.
Also er will auf gar keinen fall irgendwo Times sehen.
Dann muss ich das SWAP aus der projektdatei nehmen
Scheinbar hat er eine Times Allergie.

Na super, das SWAP stammt von Mobi. Dann muss ich es wohl doch in die css im Netz schreiben.

[Tommy Herrmann]

… ja - so wird es ja auch empfohlen und so machen es eigentlich alle Webseiten.

Das sieht man normalerweise ja auch gar nicht. Ich sehe es ja auch auf der Kundenseite nicht. Was hat Dein Kunde denn für eine Internetverbindung - vielleicht wird die ja noch von Windmühlen angetrieben

[stobi_de]

Windmühlen?
Wie kannst Du nur sowas sagen?
In Österreich nutzt man Wasserkraft
ich werd ihm mal interviewen. Momentan ist er halt überlastet, weil plötzlich weltweiter Erfolg von seinem System - und auch hierzulande gibt es keine guten Arbeitskräfte - egal, was man zahlt.

[Tommy Herrmann]

... na den weltweiten Erfolg hat er ja dann auch Dir und der tollen Webseite zu verdanken - und - das alles trotz "Times"