Google Fonts Lokal Hosten

Post Reply
User avatar
RalfKerkhoff
Sr. Bludit
Posts: 35
Joined: Sun Jan 03, 2021 11:16 am
Location: Germany
Has thanked: 1 time
Contact:

Hallo Zusammen,

ich habe mir gedacht ich gebe Bludit nochmal eine Chance und stelle gerade fest, dass einige Themes die Google Fonts in der head.php einbinden - zum Beispiel beim Editorial Theme:

Code: Select all

<!-- Link to Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">
Ich habe mir schon diese Seite angesehen:
https://gwfh.mranftl.com/fonts/open-sans?subsets=latin

um die Fonts lokal einzubinden.

Ich habe aber ehrlich gesagt keine Idee was ich dann in der head.php eintragen soll.
Einen Link auf das Stylesheet welches auf der Seite:
https://gwfh.mranftl.com/fonts/open-sans?subsets=latin

generiert wird ?

Ich sehe gerade den Wald vor lauter Bäumen nicht.

Gruss
Ralf
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 55 times
Been thanked: 78 times
Contact:

RalfKerkhoff wrote: Fri Oct 13, 2023 6:03 pm Ich habe mir schon diese Seite angesehen:
https://gwfh.mranftl.com/fonts/open-sans?subsets=latin

um die Fonts lokal einzubinden.
Du kannst gemäss den Schritten auf der Website vorgehen, nämlich
  1. Wahl des Fonts,
  2. Wahl der Zeichensätze (charsets),
  3. Wahl der Schriftschnitte (styles),
  4. CSS kopieren und in das Feld "Head" des Plugins HTML-Code kopieren,
  5. ZIP-Datei mit den Fonts herunterladen, entpacken und auf den Server laden, beispielsweise in ein Verzeichnis fonts im Verzeichnis des Themes (die Pfade von src im CSS von Schritt 4 müssen auf dieses Verzeichnis zeigen!).
Ein Beispiel findest Du hier:

https://github.com/bludit-themes/log/tree/master/assets

Hier sind die Fonts im Verzeichnis log/assets/webfonts/ gespeichert, die Datei mit dem CSS für die Fonts in der Datei bludit.css im Verzeichnis log/assets/css/.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
RalfKerkhoff
Sr. Bludit
Posts: 35
Joined: Sun Jan 03, 2021 11:16 am
Location: Germany
Has thanked: 1 time
Contact:

Hi,
super - das hilft mir sehr!

Ich nehme an, wenn ich die Fonts in ein Verzeichnis namens "Fonts" direkt im root Verzeichnis der Bludit Installation hochlade, dann müsste der Pfad im CSS zum Beispiel so aussehen:

Code: Select all

  src: url('/fonts/abel-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
Korrekt?

Gruss
Ralf
User avatar
RalfKerkhoff
Sr. Bludit
Posts: 35
Joined: Sun Jan 03, 2021 11:16 am
Location: Germany
Has thanked: 1 time
Contact:

Hallo nochmal,

wenn ich den CSS Code derf mir hier angezeigt wird, 1:1 in den head Bereich des plugins kopiere, dann wird mir der CSS Code im Browser komplett angezeigt.

Irgendetwas passt da noch nicht.

Gruss
Ralf
User avatar
RalfKerkhoff
Sr. Bludit
Posts: 35
Joined: Sun Jan 03, 2021 11:16 am
Location: Germany
Has thanked: 1 time
Contact:

Ich habe es nun etwas anders gelöst:

1. Den CSS Code in eine CS. Datei gepackt.
2. die CSS Datei hochgeladen
3. Im html Plugin im Head Bereich den Verweis auf die CSS Datei eingefügt:

Code: Select all

<link rel="stylesheet" type="text/css" href="https://UrlZurSeite/Fontverzeichnis/font.css">
Läuft :-)
maik
Jr. Bludit
Posts: 5
Joined: Sat Dec 09, 2023 10:56 am
Been thanked: 1 time

danke dir, funktioniert für mich jetzt auch
Post Reply