Das Einbinden von eigenen Schriftarten ist nicht ganz ohne – unter dem Strich aber doch zu einfach, um auf hübsche und besonders passende Schriftarten zu verzichten. Dr. Code zeigt Ihnen wie es auf jeden Fall klappt. Haben Sie Ihre gewünschte Schriftart gefunden? Ok – dann geht's jetzt ans Einbinden. Schriften mit @font-face einbetten, so funktioniert's | Elmastudio. Speichern Sie Ihre heruntergeladenen Schriftartdatei(en) auf Ihrem Webserver. Im Idealfall in ein spezielles Verzeichnis Ihres Child-Themes. Nennen Sie das Verzeichnis z. B.
fonts
Falls Ihre Schriftart in mehreren Dateiformaten angeboten wird, speichern Sie auch alle diese Versionen in ebendieses Verzeichnis. Das erhöht die Kompatibilität – vor allem mit Browsern älteren Jahrgangs. Gängige Font-Dateiformate sind etwa:
TrueType Font (TTF)
OpenType Font (OTF)
Embedded OpenType Font (EOT)
Web Open Font Format (WOFF)
Nehmen wir mal an, Sie verwenden die Schriftart «Coves» und haben diese bloss als TruType-Fontr (TTF) erhalten. Dann kopieren Sie nun folgenden Code in das Stylesheet Ihrer Website – Sie finden es unter Design/Customizer/Zusätzliches CSS:
@font-face {
font-family: CovesRegular;
src: url('fonts/');}
Setzen Sie den Code recht weit oben in Ihrem Stylesheet ein, damit der Browser die Schriften beizeiten lädt.
- Css schriftart einbinden download
Css Schriftart Einbinden Download
besser geeignet)
Google Fonts über die entfernen
Hier wieder mein Hinweis: bitte ein Child Theme erstellen! Nun öffnest Du die Deines Themes mit einem HTML-, PHP oder Texteditor. Bei Genesis Themes ist das in der Regel ganz einfach. Css schriftart einbinden web. Google Fonts sind hier in der Regel in der über die Funktion wp_enqueue_style() eingebunden. Du hast nun zwei Möglichkeiten:
Einfach die entsprechende Codezeile löschen. In meinen Screenshots zeige ich es Dir anhand der Beispiele für Genesis Sample und Aspire Theme (welches ich als Grundlage für meine Website verwende) – gelb markiert
Quellcode beim Genesis Aspire Theme
Oder über die Funktion wp_dequeue_style() wieder entfernen ( Diese Anleitung habe ich hier gefunden)
Dazu schauen wir uns einmal die wp_dequeue_style() Funktion genauer an:
WordPress Funktion – wp_dequeue_style( string $handle) Beschreibung – sie entfernt ein vorher eingebundenes CSS Stylesheet Parameter – $handle │ obligatorisch. Einzigartiger Name für das eingebundene Stylesheet. Ein Blick in die oder in den Quellcode verrät, welches $handle benutzt wird:
Im Falle des Aspire Themes ist es ' google-fonts ', nämlich der Teil, der im Stylesheet-Verweis unter "id" steht, ohne das Suffix -css, das WordPress noch anhängt.
Über CSS kann man für das Aussehen des Textes die Schriftfamilie auswählen. Dazu gibt es die CSS-Anweisung font-family. Wichtig für das Verständnis ist die Einteilung von Schriftfamilien sowie die Möglichkeiten und Begrenzungen durch die verschiedenen Betriebssystemen. Einteilung von Schriftfamilien
Die 3 wichtigsten Familien sind:
serif
sans-serif
monospace
Was verbirgt sich hinter den Bezeichnungen? serif: Serifen-Schriften sind Schriften mit "Standfüßchen". Die typischen Schriften in Zeitungen und alt gediegenen Publikationen. sans-serif: bei serifenlosen Schriften (daher die französische Bezeichnung "sans" für "ohne") fehlen diese Standfüße. Css schriftart einbinden live. Diese Schriften wirken moderner (erschienen auch erst 1803 auf der Bildfläche). monospace: Monospace zeichnet sich durch die gleichen Breiten aller Buchstaben und Zahlen aus. So benötigt ein "W" die gleiche Breite wie ein "i". Diese Schriften mit fester Zeichenbreite wird auch als dicktengleich bezeichnet. Vorteil ist, dass man gut Zahlen untereinander darstellen kann, ohne diese ausrichten zu müssen.