pfade zum CSS anpassen – bei dem Versuch Fonts lokal zu hosten

lebrochet
(@lebrochet)

vor 1 Jahr, 5 Monaten
hallo u. guten Tag,

habe bei einem Test bzgl. Google Fonts herausgefunden dass ich zwei Fonts von google habe:

z.B. montserrat

btw: gefunden hab ich das über diese Checker-Seite: https://www.ccm19.de/google-fonts-checker/

Der durchgeführte Scan hat folgendes ergeben, Ihre Seite:

bindet 2 verschiedene Google Font Dateien von mindestens diesen 2 verschiedenen Schriftarten ein. Zu den Details!

Varela Round
Montserrat

nun empfiehlt die Seite kopfundstift – dass man mit einem Tool die Fonts ganz gut bei gooble herunterladen kann – (vgl. hier: https://kopfundstift.de/google-fonts-lokal-einbinden/ )

das hab ich mal gemacht: `https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin

man kann nicht nur die Fonts herunterladen – sondern auch noch die CSS – und das ist toll.

Hier wird in Schritt drei wir erläutert <strong>3. Copy CSS:</strong> dass man noch die Pfade (des CSS) anpassen kann, ehe man das Ganze herunterlädt!

Choose Best Support if old browsers still need to be supported. Formats in this snippet: [eot,woff,woff2,ttf,svg]
```
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
Customize folder prefix (optional): 
../fonts/
Click on code to select all statements, then copy/paste it into your own CSS file.
```
also – wichtig ehe man herunterläd kann man die Pfade noch anpassen:

Customize folder prefix (optional):
../fonts/
Click on code to select all statements, then copy/paste it into your own CSS file.

wie würdet ihr die Pfade hier anpassen – wie lauten die Pfade?!

-Vg Lebrochet
- Dieses Thema wurde geändert vor 1 Jahr, 5 Monaten von lebrochet.

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 5 Monaten

Ich erstelle in einem Child-Theme ein Unterverzeichnis fonts, lade die Fonts herunter und entpacke sie in dieses Verzeichnis.
In der style.css des Child-Themes füge ich dann den Code ein, wobei ich das „folder proefix“ auf ./fonts/ ändere.

Dass lässt sich übrigens durch eigenes Ausprobieren und Kontrolle mit den Entwicklertools des Browsers schnell selber herausfinden und ist hier eher off topic, weil wir hier keine Grundlagen in z.B. CSS vermitteln möchten.

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 5 Monaten

Hallo,
solltest du kein Child Theme haben, kannst du die entsprechenden CSS-Regeln auch unter Design > Customizer > Zusätzliches CSS packen.

Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 5 Monaten

@hage

… und wo packt er dann die Fonts hin?

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 5 Monaten

@pixolin
das müsste ich noch mal testen. Aber ich meine, dass ich in dem Fall bei irgendeinem Projekt die fonts in einen eigenen Pfad gepackt habe und diese Pfade bei den CSS-Regeln entsprechend angegeben habe.
Ich vermute mal, dass das bei den jeweiligen Plugins, die die Google Fonts lokal hosten, ähnlich gemacht wird, denn sonst könnte man die Plugins ja nur verwenden, wenn man Child Themes im Einsatz hat.

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 5 Monaten

… bei irgendeinem Projekt die fonts in einen eigenen Pfad gepackt habe …

Kann man so machen, sieht dann aber … du weißt schon. 😉

… dass das bei den jeweiligen Plugins, die die Google Fonts lokal hosten, ähnlich gemacht wird, …

Wenn das Plugin sauber programmiert ist, löscht es das Verzeichnis auch wieder. Die Fonts wie in einer großen Sockenschublade abzulegen ist aber mit Blick auf die spätere Verwaltung nicht optimal.

Wenn es kein Child-Theme sein soll, kannst du immer noch ein eigenes Plugin schreiben. Nicht ganz optimal, weil es um Gestaltung und nicht Extra-Features geht, aber besser als … Sockenschublade.

Thread-Starter lebrochet
(@lebrochet)

vor 1 Jahr, 5 Monaten

hallo @pixolin hallo @hage

vielen Dank für die vielen Tipps, die IDEEN u. Eure Hinweise. Das hilft weiter.
Klar – ich leg ein Child noch an.

Danke auch für diesen Hinweis:

Dass lässt sich übrigens durch eigenes Ausprobieren und Kontrolle mit den Entwicklertools des Browsers schnell selber herausfinden und ist hier eher off topic, weil wir hier keine Grundlagen in z.B. CSS vermitteln möchten.

… Das leuchtet ein. Klar – über die Entwicklertools geht das auch gut. Damit kann man auch gut rausfinden wie die Pfade sind u.s.w.

Euch beiden vielen Dank für Eure Hinweise u. die Diskussion hier.

Euer Forum u. Eurer Support – das ist einfach klasse – Danke dass ihr so viel hier leistet, macht, seid. Ihr seid voll die tragende Säule…;)

DANKE!!

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 5 Monaten

Hallo,
herzlichen Dank für die nette Rückmeldung 🥳
Wir freuen uns, wenn wir helfen können.

Es wäre noch schön, wenn du kurz für Mitleser beschreibst, wie du das Problem gelöst hast und in dem Fall den Thread als gelöst markierst. Danke 😊

Viele Grüße
Hans-Gerd

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)

Das Thema „pfade zum CSS anpassen – bei dem Versuch Fonts lokal zu hosten“ ist für neue Antworten geschlossen.

Ansichten