Verschiedene Google-Fonts lokal einbinden

Allgemeine Fragen
Benutzeravatar
barbara0701
Moderator
Moderator
Beiträge: 167
Registriert: So 6. Dez 2020, 09:32

Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von barbara0701 »

Hallo zusammen!

Da ich ein wenig aus der Übung bin, möchte ich mich vergewissern, dass ich bei er Einbindung der Google Fonts alles richtig mache.
  • Projekt in separates Verzeichnis als Backup gespeichert
  • Projekt noch einmal in ein separates Verzeichnis eingelegt, um dort die CSS-Dateien zu überarbeiten (sicher ist sicher)
  • Drei Schrifttypen heruntergeladen, die im Projekt in Verwendung sind
  • Schrifttypen im Ordner assets/myfonts entpackt, entsprechende CSS-Datei ebenfalls dorthin kopiert.
  • Im Editor die Datei des Projects im Test-Ordner geöffnet, überarbeitete Datei mit Löschung des Verweises auf Google und Verweis auf den Ordner myfonts gespeichert
.

Leider hat das Speichern dieser geänderten Mobirise-Datei das Projekt auf Default zurückgestellt, die Verweise wurden nicht kopiert. Ist es richtig: Editor öffnen, Datei projekt.mobirise öffnen. Datei anpassen, speichern? Und sieht man das Ergebnis lokal, oder muss man alles auf dem Server machen?
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 7758
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von Tommy Herrmann »

Hallo Babs,

Es gibt ja verschieden Möglichkeiten.

1)

Du versuchst offensichtlich gerade diese hier:

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

Wenn Du die Datei "project.mobirise" editierst, wie in meinem Tutorial beschrieben, dann muss Mobirise auf jeden Fall geschlossen sein, sonst wird die Datei sofort wieder überschrieben.



2)

Die andere Möglichkeit ist die Schriften direkt im Mobirise Schrift-Editor zu ändern, so wie ich es hier beschrieben habe:

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

Dabei müssen aber immer alles verwendeten Schriften lokal geändert werden, damit Google-Fonts nicht mehr verlinkt wird.
Benutzeravatar
barbara0701
Moderator
Moderator
Beiträge: 167
Registriert: So 6. Dez 2020, 09:32

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von barbara0701 »

Ich hab schon einen Fehler entdeckt. Korrigiere es selbst schon mal.
Benutzeravatar
barbara0701
Moderator
Moderator
Beiträge: 167
Registriert: So 6. Dez 2020, 09:32

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von barbara0701 »

Hat geklappt :tu: Danke Tommy für Dein Tutorial - https://www.mobirise-tutorials.com/Local-Fonts-Weights/
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 7758
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von Tommy Herrmann »

prima, dass das geklappt hat :tu:
Benutzeravatar
barbara0701
Moderator
Moderator
Beiträge: 167
Registriert: So 6. Dez 2020, 09:32

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von barbara0701 »

Also... es hat im Test-Verzeichnis zunächst funktioniert. Aber ich musste die Links dann für das Hauptverzeichnis editieren. Nach vielen Versuchen und Korrektur der project.mobirise Datei (auch im Ordner App Data) wird die neue Projekt-Datei - die im Ordner der lokalen Publizierung mit den richtigen Links korrigiert ist - wieder mit dem Verweis auf Google überschrieben. Irgendwas habe ich wohl falsch gemacht. Jetzt lasse ich alles so wie es ist :D .
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 7758
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von Tommy Herrmann »

Moin Babs,

da gestern der Team-Viewer nicht so wollte wie wir, ist es gerade unmöglich für mich den Fehler zu entdecken. Heute habe ich leider kaum Zeit, da ich alle möglichen Arztbesuche zu erledigen habe.

Du änderst auf jeden Fall eine falsche Projekt-Datei. Denke auch daran, die Projekt-Datei "project.mobirise" ausschließlich zu editieren, wenn die Software beendet und geschlossen ist.

Denke auch daran, nach der Änderung dieser Projekt-Datei, die Software neu zu starten und Dein Projekt neu über Mobirise lokal zu publizieren, damit die Links zu den Fonts überhaupt von Mobirise im Header der HTML-Seiten generiert werden können und kopiere nicht etwa die alten HTML-Seiten mit FileZilla zum Server :eek:

Vor allem ist es schwer vorstellbar, dass es bei Deinem Test-Projekt im Testverzeichnis problemlos funktioniert hat und nun bei Deinem eigentlichen Projekt nicht. Du musst doch lediglich das Gleiche mit den neuen Pfaden wiederholen.

Ich verwende ja das von Mobirise erstellte Projekt-Verzeichnis gar nicht, denn da kann so ein Fehler dann auch entstehen, da man dann mehrere Projekt-Dateien hat.

Gerade habe ich meine Routine zum Import in ein lokales Verzeichnis erneut für jemanden im Hersteller-Forum beschrieben:

https://forums.mobirise.com/discussion/ ... ent_119315

… hier mein deutsches Video:

viewtopic.php?t=713

... und Beschreibung dazu im Forum:

viewtopic.php?t=160
Benutzeravatar
barbara0701
Moderator
Moderator
Beiträge: 167
Registriert: So 6. Dez 2020, 09:32

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von barbara0701 »

Ein großes Dankeschön an Tommy 😘

Ich denke der Fehler lag darin, dass ich nicht bei jeder Änderung der Datei das Projekt in Mobirise importiert und erneut publiziert habe. Deshalb wurden diese Dateien immer wieder überschrieben, auch lokal.

Leider funktioniert die Anzeige der Schriften nicht optimal, wenn sie lokal eingebunden sind. Wahrscheinlich liegt es daran, dass das Projekt mit einen älteren Template erstellt war, und ich einiges händisch angepasst hatte.

Tommy meint, man sollte ein Projekt grundsätzlich im Standard M5 beginnen soll und Blöcke auf kompatiblen Template benutzen. Guter Tipp! 👍🏻 danke nochmal 😘
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 7758
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von Tommy Herrmann »

Moin Babs,

ich nehme an, dass Du versehentlich das Projekt mal mit geänderter Projekt-Datei und mal mit der originalen Projekt-Datei in das gleiche Verzeichnis lokal publiziert hast.

Ganz wichtig ist, ein Projekt zunächst in sein ureigenes lokales Verzeichnis zu importieren. Dann muss das Projekt zwingend geschlossen sein, wenn man die Projekt-Datei auf lokale Schriften ändert. Im Anschluss muss es neu publiziert werden, damit diese Änderung auch in die HTML-Seiten hinein generiert wird.

Du verwendest das uralte Thema "PortfolioM4". Dabei wäre es für Dich wahrscheinlich einfacher gewesen bei der Software "Mobirise 4" zu bleiben, andererseits ist es natürlich besser immer auf dem neuesten Stand der Software zu sein, denn die alten Software-Versionen werden nicht mehr gewartet.

Da Du nun aber die neueste Version von "Mobirise 5" verwendest ist es möglich, dass es da einige Kompatibilitätsprobleme gibt. Welche ganz genau, kann ich auch nicht auswendig sagen. Da muss man bei Bedarf jeden einzelnen Block genau ansehen.

Der große Unterschied ist ja, dass bei den alten Themen noch jQuery und eine viel ältere Bootstrap Version 4 angewendet wird. Mobirise 5 verwendet jetzt "Bootstrap v 5.0.1" und bei den alten M4 Themen wird noch "Bootstrap 4.5.0" verwendet. Nun gibt es aber Blöcke in neueren Themen, die auf "Bootstrap 5" aufbauen und dann nicht verarbeitet werden können, da die Bootstrap-Versionen unterschiedliche und zusätzliche CSS-Klassen verwenden.

Ich hatte Dir am Telefon nur das Standard-Thema "Mobirise 5" empfohlen, da dieses Thema sicherlich das meist geprüfte Thema in Mobirise überhaupt ist und es wahrscheinlich auch die meisten Blöcke hat. Das gilt ebenso für das zusätzliche Standard-Thema "StartM5". Das heißt jetzt aber nicht, dass man die anderen M5 Themen nicht verwenden könnte und auch nicht, dass man keine M4 Themen, wie Dein "Portfolio M4" Thema, verwenden sollte.

Es ist nur logisch, dass am in älteren M4 Themen vorsichtig mit M5 Blöcken sein muss, umgekehrt ebenso. Es ist immer sicherer bei Blöcken der gleichen Themen-Generation zu bleiben.

Warum bei Dir an manchen Stellen die Schriften extrem abweichen, müsste man noch analysieren. Bist Du denn ganz sicher auch die richtigen Schrift von Google-Fonts herunter geladen und verwendet zu haben? Da muss man sehr aufpassen.

Vielleicht wäre es ansonsten auch ratsam mal an den Support zu schreiben, den Link zu Deiner Seite nicht vergessen, und dort ganz speziell auf einen Block und dessen Schrift zu verweisen. Vielleicht bekommst Du dann den entscheidenden Tipp.


P.S.:

Ich habe übrigens gerade nochmals auf diesen Block (Screenshot) geguckt, bei dem Du ja meintest, dass alle Cards gleich hoch seien. Das ist reiner Zufall, fügst Du etwas mehr Text hinzu, wie ich es jetzt im Browser am linken Block getan habe, verändert sich die Höhe. Das ist zum Beispiel ein alter Bug im Thema "Portfolio M4". Diesen Block gibt es auch im Standard-Thema "Mobirise 5" und dort bleibt dann die höhe aller Cards immer gleich, egal wie viel Text man verwendet.


Block.jpg


Da Du nach dem Einbau der lokalen Schriften anscheinend etwas andere Font-Weights hast (ich meine auch eine falsche Line-Height), kann sich natürlich dadurch der Abstand vom Text in diesen Cards verändern. Vielleicht musst Du dann nur bei den anderen beiden Cards entsprechend noch eine Leerzeile einfügen.

Hier hatte ich dieses alte Problem mit den Card-Decks in "Bootstrap 4" übrigens mal mit eigenem Code gelöst:

https://www.mobirise-tutorials.com/Busi ... ontent7-4w

… genau wie hier auf der Bootstrap-Seite beschrieben:

https://getbootstrap.com/docs/4.0/compo ... card-decks


Eigentlich ist das ein recht gutes Beispiel was passiert, wenn man mit alten Vorlagen und Themen arbeitet und jahrelang keine Updates gemacht hat. In Mobirise 5 wurde dieses Problem längst gelöst. Wir sprechen hier von einem Problem, das vielleicht so 4-5 Jahre zurückliegt :(
Benutzeravatar
barbara0701
Moderator
Moderator
Beiträge: 167
Registriert: So 6. Dez 2020, 09:32

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von barbara0701 »

Vielen Dank, lieber Tommy! Macht alles Sinn. Ja die Boxen waren nicht fixiert sondern der Text wurde von mir entsprechend editiert (jetzt das Du es sagst 😅).

Überhaupt hatte ich viele Abweichungen vom Template eingebaut und einiges im Code Editor geändert. Nach so vielen Jahren weiß ich nicht mehr, was ich damals getan habe.

Ja die Schriften habe ich alle heruntergeladen, die Style.css mit Copy and Paste eingefügt.

Da ist jetzt aber alles nicht so schlimm. Wahrscheinlich fange ich irgendwann neu an.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 7758
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von Tommy Herrmann »

Babs,

ich habe bemerkt, dass der Link "Impressum" in Deiner Navigation beim Mouseover die Seite öffnet. Das ist ziemlich verwirrend und störend.

Am besten wäre es, wenn Du diesen Link einfach löschst und ihn in der Navigation neu erstellst.
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 444
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von struggle »

Da das Thema hier im Forum behandelt wird und Tommy offensichtlich die Seite kennt, wäre es für alle Interessierten schön, wenn es zur Seite einen Link gäbe 😄
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 7758
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Google-Fonts lokal einbinden

Ungelesener Beitrag von Tommy Herrmann »

Moin Reinhard,

das müsste Babs dann hier posten. Bin mir nicht ganz sicher, ob sie die Seite hier öffentlich stellen will.

Du findest diese aber hier:

viewtopic.php?p=14760#p14760
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Amazon [Bot], Bing [Bot] und 5 Gäste