Benutzung eines eigenen Webfonts

Jay Konrad

Hallo,

ich suche nach einer Anleitung, wie man eigene Webfonts einbetten kann. Ich habe einen Webfont (im WOFF2-Format) - aber ich finde kein Howto, wie ich ihn in Zeta benutzen kann, um ihn in einer Seite zu benutzen. Es werden immer nur Google-Fonts behandelt. Kann mir jemand helfen?

Mit freundlichen Grüßen

Jay

Steffen T.

Hallo,

im Prinzip, wie hier beschrieben: https://docs.zeta-producer.com/webfonts-selbst-hosten.html.

Die Schritte mit den Google-Fonts runterladen, müssen Sie natürlich dann nicht ausführen.

Jay Konrad

Leider scheint das nicht so ganz zu funktionieren. Ich habe zwei Webfonts:

fontawesome-webfont.WOFF

kapiqad.WOFF

Es geht mir um den zweiten Font, dieser enthält Non Latin Characters. Der erste WOFF ist nur zum Testen.

Ich habe, laut Anleitung, ein Verzeichnis namens "webfonts" angelegt und die beiden WOFF-Dateien dort abgelegt. Ich habe dann folgendes CSS eingestellt:

<style>

/* kapiqad - piqad */

@font-face {

font-family: 'kapiqad';

font-style: normal;

font-weight: normal;

src: local('kapiqad normal'), local('kapiqad-normal'),

url('<$=page.pathToRoot$>media/files/webfonts/kapiqad.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

/* font awesome */

@font-face {

font-family: 'fontawesome';

font-style: normal;

font-weight: normal;

src: local('fontawesome normal'), local('fontawesome-normal'),

url('<$=page.pathToRoot$>media/files/webfonts/fontawesome-webfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

</style>

Allerdings kann ich beide Fonts - auch nach einem Neustart des Programms - nicht im Dropdown finden. Was mache ich falsch?

phil-web

Hallo,

Die Fonts tauchen dann nicht automatisch im Dropdown auf. Ich weiß gerade nicht, ob man in dem Textfeld auch eine eigenen Schriftart eingeben kann.

Falls nicht, müssten Sie dann eigenes CSS einsetzen, um die Schriftart auf gewisse Elemente oder die gesamte Webseite anzuwenden.

FontAwesome wird von Zeta Producer bereits selbst eingebunden, allerdings in der etwas älteren Version 4.7. Falls dort alle Icons verfügbar sind, die Sie nutzen wollen, brauchen Sie diese Einbindung also nicht und könnte so etwas Dateigröße beim Laden der Webseite sparen.

phil-web

PS: Ich habe gerade erst gelesen, dass die FontAwesome Font nur zum Testen gedacht war. Meine Bemerkung dazu kann also ignoriert werden

Jay Konrad

P.S.: Ich habe den Webfont übrigens dann mit einer simplen html page, die ich schnell im Editor geschrieben habe, getestet. Der Webfont funktioniert einwandfrei.

HTML

<html>
<head>


<style>
@font-face {  font-family: 'kapiqad';  src: url('kapiqad.woff') format('woff');  font-weight: normal;  font-style: normal;
}

body {  font-family: kapiqad, serif;
}
</style>
</head>

<body>
<div>
This is text
</div>
</body>

</html>

Alles anzeigen

Jay Konrad

Zitat von phil-web

Die Fonts tauchen dann nicht automatisch im Dropdown auf. Ich weiß gerade nicht, ob man in dem Textfeld auch eine eigenen Schriftart eingeben kann.

Hallo Phil - vielen lieben Dank für Deine Hilfe.

In dem von Steffen verlinkten Artikel steht aber:

"Wir haben nun die Schriftart "Open Sans" in leicht, leicht kursiv, normal, kursiv, fett und fett kursiv geladen und dürfen daher nun in den Layout-Einstellung in den Feldern zur Schriftauswahl über den Button "Weitere Schriftarten" auch die Schrift gleichen Namens auswählen."

OpenSans ist das Beispiel in dem Artikel. Wenn ich also - statt der OpenSans - die kapiqad einbetten will, müsste diese dann doch - bei Verwendung des gleichen CSS-Codes - ebenfalls dort erscheinen. Oder habe ich da einen Denkfehler?

phil-web

Zitat von Jay Konrad

Oder habe ich da einen Denkfehler?

Der Denkfehler ist, dass die im Beispiel verwendete Font von Google Fonts stammt und deshalb Zeta Producer bekannt ist. In der Auswahl werden einfach alle Schriftarten von Google Fonts angezeigt, unabhängig davon, ob diese auch wirklich manuell eingebunden wurden oder nicht. (Seit 16.8 passiert die Einbindung von Google Fonts ja automatisch, daher ist das nur noch in einem Fall wie Ihrem relevant).

Stefan S

Das Menü "Weitere Schriftarten" kann hierfür nicht verwendet werden. Aber man kann im Layout-Editor in den Feldern für Schriftarten ja beliebigen Text eingeben, also auch die Namen der von Ihnen installierten Schriftarten inkl. Fallback. Zum Beispiel also: kapiqad, serif oder 'Schrift mit Leerzeichen', serif.

Benutzung eines eigenen Webfonts

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?