M\u00f6chtest du deine WordPress Website einfach ein wenig individueller gestalten und die Schriftart deiner Seite \u00e4ndern? Immerhin sind Schriften ja Geschmacksache und man muss sich mit der Optik der eigenen Website wohlf\u00fchlen. Wie du in WordPress die Schriftart \u00e4ndern kannst, verrate ich Einsteigern und Fortgeschrittenen in diesem Artikel.<\/p>
\u00dcber die beiden Buttons kannst du ausw\u00e4hlen, wie du deine Schriftarten \u00e4ndern m\u00f6chtest. Ich w\u00fcrde dir immer empfehlen, deinen Code selbst anzupassen. Alternativ zeige ich dir aber auch, wie du die \u00c4nderung mit Hilfe eines Plugins durchf\u00fchren kannst.<\/p>
Alles, was mit der Optik deiner Website zu tun hat, wird \u00fcber das so genannte Stylesheet gesteuert. Eine unheimlich praktische Datei namens style.css, in der festgehalten ist, wie deine Seite aussehen soll.<\/p>
\u00c4nderst du in dieser Datei eine Anweisung, \u00e4ndert sich deine komplette Website entsprechend ab.<\/p>
Um das Stylesheet deiner Seite zu \u00e4ndern, gibt es gleich zwei Wege, die die meisten Einsteiger schnell auf dem Kasten haben:<\/p>
Seit noch gar nicht so langer Zeit bietet dir WordPress im Administrationsbereich eine M\u00f6glichkeit, eigenes, zus\u00e4tzliches CSS in deine Seite einzuf\u00fcgen.<\/p>
Das geht ganz einfach \u00fcber den Men\u00fcpunkt Design -> Customizer.<\/p>
Im Customizer siehst du rechts eine eine Vorschau deiner Website und auf der linken Seite findest du den Men\u00fcpunkt Zus\u00e4tzliches CSS.<\/p>
Das Textfeld, dass sich jetzt auftut, ist f\u00fcr eigene CSS Anweisungen gedacht. Was genau du dort eintragen musst, erkl\u00e4re ich dir gleich weiter unten.<\/p>
Wenn deine \u00c4nderungen ein wenig ausf\u00fchrlicher werden sollen, kommst du um das Bearbeiten deines Stylesheet, also der Datei style.css, nicht rum. <\/p>
Um deine style.css bearbeiten zu k\u00f6nnen, m\u00fcsstest du normalerweise per FTP auf deinen Server zugreifen. Viel Bimbam f\u00fcr Menschen mit guten Grundwissen, aber f\u00fcr Einsteiger ein wenig zu kompliziert.<\/p>
Deshalb gibt es im Administrationsbereich deiner Website den so genannten Theme Editor. Diesen kannst du \u00fcber den Men\u00fcpunkt Design<\/strong> -> Theme-Editor<\/strong> aufrufen und dort die style.css aufrufen.<\/p>
Um die Sache hier m\u00f6glichst einfach zu halten, werde ich dir im Folgenden beschreiben, wie du deine \u00c4nderungen \u00fcber den Customizer einf\u00fcgst.<\/p>
Wenn du die Schriftart \u00e4ndern m\u00f6chtest, musst du im ersten Schritt erstmal eine neue Schriftart zu deiner WordPress Seite hinzuf\u00fcgen. Das ist in etwa vergleichbar mit deinem Rechner, auf dem Schriftarten erst installiert werden m\u00fcssen, bevor du sie verwenden kannst.<\/p>
Am besten daf\u00fcr geeignet sind Google Webfonts. Google stellt dir mit diesem Service hunderte von Schriftarten kostenlos zur Verf\u00fcgung, die du v\u00f6llig frei in deine Website einf\u00fcgen kannst.<\/p>
Seit Inkrafttreten der DSGVO sind Google Fonts allerdings rechtlich etwas umstritten. Jedenfalls wenn du sie so einbindest, wie Google es urspr\u00fcnglich vorschl\u00e4gt.<\/p>
Wenn du dem Tutorial oben gefolgt bist, kennt deine Website bereits die neue Schriftart und wei\u00df, an welcher Stelle sie nachschauen muss, um die Schriftart in deine Seite zu ziehen. <\/p>
Wir m\u00fcssen jetzt nur noch per CSS festlegen, f\u00fcr welche Bereiche deiner Website diese neue Schriftart \u00fcberhaupt verwendet werden soll.<\/p>
M\u00f6gliche Bereiche w\u00e4ren:<\/strong><\/p>
\u00dcberschriften sind immer hierarchisch aufgebaut. Der Titel einer Seite, also deine Haupt\u00fcberschrift, wird immer mit dem Tag h1 gekennzeichnet. <\/p>
Um ausschlie\u00dflich die Titel deiner Beitr\u00e4ge und Seiten anzupassen, kannst du folgende CSS-Anweisung in den Bereich Zus\u00e4tzliches CSS<\/strong> im Customizer einf\u00fcgen:<\/p>
h1 {\n font-family: \"Times New Roman\", Times, serif;\n}<\/code><\/pre>
Die Schriftart f\u00fcr deine Zwischen\u00fcberschriften \u00e4ndern<\/h3>
Zwischen\u00fcberschriften werden in HTML & CSS immer mit den Tags h2 bis h6 gekennzeichnet. Am h\u00e4ufigsten wirst du f\u00fcr deine Website h2 und h3 verwenden.<\/p>
Wenn du die Schriftart deiner Zwischen\u00fcberschriften in WordPress \u00e4ndern m\u00f6chtest, sieht das fast genauso aus, wie bei deinem Seitentitel. Du sagt per CSS nur, dass du die Zwischen\u00fcberschriften h1 bis h6 \u00e4ndern m\u00f6chtest:<\/p>
h2,\nh3,\nh4,\nh5,\nh6 {\n font-family: \"Times New Roman\", Times, serif;\n}<\/code><\/pre>
Die Schriftart f\u00fcr deinen Flie\u00dftext \u00e4ndern<\/h3>
Der \u201enormale\u201c Text, also der Flie\u00dftext deiner Website wird immer mit einem p umschrieben.<\/p>
Wenn du die Schriftart f\u00fcr deinen Flie\u00dftext anpassen m\u00f6chtest, musst du also nur die Klasse p in deinem CSS ansprechen:<\/p>
p {\n font-family: \"Times New Roman\", Times, serif;\n}<\/code><\/pre>
Easy, oder? Und das Sch\u00f6nste kommt noch:<\/p>
Wenn du weitere Anpassungen an deinen Schriften vornehmen m\u00f6chtest, musst du den oben beschriebenen Anweisungen nur noch weitere Infos hinzuf\u00fcgen.<\/p>
Und weil wir gerade dabei sind, passen wir in unseren Beispielen direkt mal die Schriftgr\u00f6\u00dfe und die Textfarbe an. <\/p>
In WordPress die Schriftgr\u00f6\u00dfe \u00e4ndern<\/h2>
Fangen wir mal mit der Haupt\u00fcberschrift deiner Artikel und Seiten in WordPress an.<\/p>
Um f\u00fcr diesen Titel die Schriftgr\u00f6\u00dfe \u00e4ndern zu k\u00f6nnen, musst du nur die Zeile mit \u201efont-size“ der gerade geschriebene Anweisung hinzuf\u00fcgen:<\/p>
h1 {\n font-family: \"Times New Roman\", Times, serif;\n font-size:28px;\n}<\/code><\/pre>
CSS Anweisungen werden \u00fcbrigens immer mit einem Semikolon voneinander getrennt. Deshalb endet jede Zeile mit einem Semikolon.<\/p>
Um auch die Gr\u00f6\u00dfe deiner Zwischen\u00fcberschriften in einer anderen Gr\u00f6\u00dfe darzustellen, f\u00fcgst du den Klassen h2 bis h6 einfach ebenfalls eine \u201efont-size\u201c Anweisung hinzu:<\/p>
h2,\nh3,\nh4,\nh5,\nh6 { \nfont-family: \"Times New Roman\", Times, serif;\nfont-size:22px; \n} <\/code><\/pre>
Wenn du die Schriftgr\u00f6\u00dfe deines normalen Flie\u00dftextes \u00e4ndern m\u00f6chtest, geht das ebenfalls sehr einfach. <\/p>
p { \n font-family: \"Times New Roman\", Times, serif; \n font-size:18px; \n} <\/code><\/pre>
War doch gar nicht so schwer, oder? Jetzt bist du ja fast schon Experte f\u00fcr Schrift\u00e4nderungen per CSS. Deshalb k\u00f6nnen wir auch gleich noch die Farbe des Textes \u00e4ndern, wenn du magst.<\/p>
Die Schriftfarbe \u00e4ndern<\/h2>
Farben werden online h\u00e4ufig mit einem so genannten Hexadezimalcode angegeben. Eine dumme Sache, weil sich diese Codes keiner merken kann. Aber et k\u00fctt, wie et k\u00fctt.<\/p>
CSS-Anweisungen f\u00fcr Textfarben sehen immer so aus:<\/strong><\/p>
color: #003d58;<\/code><\/pre>
Das Wort Color<\/strong> am Anfang sagt aus, dass eine Textfarbe ge\u00e4ndert werden soll. Das #003d58 ist der Hexadezimalcode f\u00fcr die Farbe. In diesem Fall das sch\u00f6ne Dunkelblau der MightyPress Seite.<\/p>
Diese Angabe musst du jetzt nur noch in einer neuen Zeile deinem CSS-Code hinzuf\u00fcgen:<\/p>
p { \n font-family: \"Times New Roman\", Times, serif; \n font-size:18px; \n color: #003d58;\n} <\/code><\/pre>
Das Resultat: Dunkelblauer Flie\u00dftext in der Schriftart Times New Roman mit einer Textgr\u00f6\u00dfe von 18px.<\/p>
Ein Plugin zum \u00c4ndern der Schriftart in WordPress nutzen<\/h2>
Wenn dir das Ganze zu kompliziert war und du einfach keine Lust auf die ganze CSS-Code-Schwurbelei hast, kannst du das alles auch anders l\u00f6sen.<\/p>
F\u00fcr jedes noch so kleine WordPress Problem gibt es nat\u00fcrlich auch immer ein passendes Plugin. Das gilt auch f\u00fcr das \u00c4ndern der Schriftarten auf deiner Website.<\/p>
Auch wenn ich dir rate, \u00fcber die oben beschriebene Methode selbst Hand anzulegen, will ich dir an dieser Stelle ein paar Plugins vorstellen, mit denen du die Fonts deiner Website sehr schnell ab\u00e4ndern kannst.<\/p>
Use Any Font ist ein Plugin, mit dem du die komplette Freiheit \u00fcber die Schriftarten deiner Website hast.<\/p>