So fügen Sie benutzerdefinierte Schriftarten zu einem WordPress-Theme hinzu

Schriftarten spielen eine wichtige Rolle für das Design, die Lesbarkeit und manchmal sogar die Funktionalität Ihrer Website. Wählen Sie die falsche und Sie könnten eine ansonsten großartig aussehende Website ruinieren. Ebenso können sowohl der Schriftstil als auch die Größe bestimmen, wie einfach (oder nicht!) Ihre Website zu verwenden ist. Aber was tun Sie, wenn Ihre ideale Schriftart in Ihrem WordPress-Theme nicht verfügbar ist? In diesem Artikel sehen wir uns verschiedene Möglichkeiten an, wie Sie die benutzerdefinierte Schriftart Ihrer Wahl verwenden können.

Lasst uns anfangen!

Warum benutzerdefinierte Schriftarten verwenden

Viele Designs verfügen jetzt über eine Auswahl an Schriftarten, aus denen Sie auswählen können, die „eingebacken“ sind. Diese sind in vielen Fällen für die von Ihnen gestaltete Website geeignet. Wenn Sie jedoch nicht in der Lage sind, die richtige Schriftart mit den bereits angebotenen Schriftarten auszuwählen, ist es an der Zeit, sich nach alternativen Schriftarten umzusehen, und dies bedeutet, dass Sie in der Lage sein müssen, Ihre benutzerdefinierten Schriftarten zu Ihrer Website hinzuzufügen.

Durch die Verwendung benutzerdefinierter Schriftarten können Sie die Vorteile einer schönen Kombination verschiedener Schriftarten auf Ihrer Website nutzen, um die Typografie und die Benutzererfahrung zu verbessern. Untersuchungen haben gezeigt, dass die Verwendung der richtigen Typografie erhebliche Vorteile bietet. Dazu gehört nicht nur eine Verbesserung der allgemeinen Benutzererfahrung, sondern auch, wie gut die Informationen auf einer Website vom Gehirn verarbeitet werden. Je einfacher dies ist, desto einfacher ist es, Ihr Geschäftsangebot/Ihre Dienstleistungen an Ihre Kunden zu kommunizieren.

Während die Verwendung benutzerdefinierter Schriftarten die Benutzerfreundlichkeit Ihrer Website definitiv verbessern kann, ist es wichtig, nicht verrückt nach Schriftarten zu werden! Eine Auswahl von zwei Schriftarten, die sorgfältig gepaart wurden, sollte ausreichend sein. Mehr, und Sie riskieren, Ihre Website zu verlangsamen.

Lassen Sie uns weitermachen und uns die Optionen ansehen, die uns zur Verfügung stehen, um benutzerdefinierte Schriftarten zu unserer WordPress-Website hinzuzufügen.

Fügen Sie Google Fonts mit dem Google Fonts-Plugin hinzu

Die einfachste und beliebteste Art, benutzerdefinierte Schriftarten zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung des Easy Google Fonts-Plugins.

Nachdem Sie dieses Plugin installiert und aktiviert haben, öffnen Sie Ihren Design-Anpasser unter dem Menü Darstellung > Anpassen. Sie werden feststellen, dass in der linken Seitenleiste ein neues Akkordeon-Dropdown-Menü namens Typografie hinzugefügt wurde.

Klicken Sie darauf, um dies zu öffnen, und dann können Sie die Schaltfläche „Schriftart bearbeiten“ verwenden, um schnell die Schriftarten Ihrer Website zu ändern, sowie deren jeweilige Gewichtung, ob sie Großbuchstaben usw. sind und mehr. Sie können auch CSS-Eigenschaften verwenden, um den Stil und die Positionierung Ihrer ausgewählten Schriftarten weiter zu ändern.

Darüber hinaus können Sie sogar Ihre eigenen Schriftsteuerelemente hinzufügen. Gehen Sie dazu auf die Plugin-Einstellungsseite unter Einstellungen > Google Fonts.

Erstellen Sie ein neues Schriftsteuerelement und definieren Sie die CSS-Selektoren. Zum Beispiel setzen wir die .entry-title Klassen, die den Beitragstiteln unseres Themas entsprechen. Wenn Sie dann den Customizer erneut besuchen, steht Ihnen ein neues Feld mit dem angegebenen Namen zur Verfügung, in dem Sie die Schriftartanpassung auf die gleiche Weise wie oben beschrieben auf die Beitragstitel anwenden können. Einfach!

Fügen Sie Google Fonts manuell hinzu

Wenn Sie lieber kein Plugin verwenden, aber trotzdem die Vorteile der Verwendung von Google Fonts auf Ihrer WordPress-Website nutzen möchten, dann ist das kein Problem. Diese können relativ einfach manuell hinzugefügt werden. Schauen wir uns an, wie. Natürlich gibt es auch eine manuelle Möglichkeit, Google Fonts zu Ihrer Website hinzuzufügen.

Schritt eins:

Zuerst müssen Sie Ihren Font-Link von der Google-Fonts-Site abrufen.

Angenommen, Sie möchten die Roboto-Schriftfamilie verwenden. Wenn Sie auf diese Schriftart klicken, werden Sie zu ihrer Seite weitergeleitet, auf der Sie eine Vorschau des Textes anzeigen können, um sicherzustellen, dass die Schriftart zu Ihnen passt. Auf der rechten Seite sehen Sie ein Feld „Im Web verwenden“, das den Link enthält, den Sie zum Hinzufügen zu Ihrer Website benötigen.

Um Google Fonts ordnungsgemäß in WordPress einzureihen, öffnen Sie die Datei functions.php Ihres Themes mit Ihrem bevorzugten Editor und fügen Sie am Ende den folgenden Code ein:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Kopieren Sie die im Google-Link-Text angegebene URL (beginnt mit https://) und ersetzen Sie diese dann im obigen Code (in unserem Beispiel ist dies derzeit https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Verwenden Sie dann in der style.css-Datei Ihres Designs die Schriftart genauso wie jede andere Schriftart, indem Sie die von Google bereitgestellten „CSS-Regeln zur Angabe von Familien“ befolgen.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Jetzt sollten Sie im Frontend Ihrer Website die Roboto-Schriftart sehen, die auf die Bereiche angewendet wurde, in denen sie in Ihrer CSS-Datei angegeben wurde.

Fügen Sie Adobe-Schriftarten hinzu

Eine tolle Alternative zu Google Fonts sind Schriftarten von Adobe Fonts. Das Plugin Custom Adobe Fonts hilft Ihnen, diese Schriftarten einfach in Ihre WordPress-Website einzubetten und funktioniert derzeit mit dem Astra-Design, dem Beaver Builder-Design, dem Beaver Builder-Plugin und dem Elementor Page Builder.

Installieren Sie zunächst das Plugin und gehen Sie dann zur umfangreichen Schriftartenbibliothek von Adobe, um eine Schriftart zu finden, die zu Ihnen passt (Sie müssen sich registrieren, um sich anzumelden).

Es gibt unzählige Möglichkeiten, Schriftarten zu filtern, und das System ist ziemlich intuitiv zu bedienen. Wenn Sie eine Schriftart gefunden haben, die Ihnen gefällt, klicken Sie darauf und sehen Sie oben rechts auf der Seite nach, wo „Zum Webprojekt hinzufügen“ steht. Es öffnet sich ein Feld wie das folgende. Geben Sie Ihrem Webprojekt einen Namen und wählen Sie die Schriftvarianten aus, die Sie darin aufnehmen möchten.

Nachdem Sie ihm einen Namen gegeben und auf die Schaltfläche „Erstellen“ geklickt haben, gelangen Sie zum nächsten Bildschirm, auf dem ein HTML-Einbettungscode und die CSS-Regeln bereitgestellt werden. Sie haben jetzt zwei Möglichkeiten. Sie können entweder a) das Plug-in „Custom Adobe Fonts“ weiterhin verwenden oder b) diese Schriftarten manuell einbetten.

Verwenden des Plug-ins für benutzerdefinierte Adobe-Schriftarten

Dies ist der einfachste Weg, um Ihre Adobe-Schriftarten in Ihre Website zu ziehen. Nachdem Sie Ihr Projekt erstellt haben, klicken Sie auf „Webprojekte“ und suchen Sie Ihr Projekt in der Liste. Oben sehen Sie einen „Projekt-ID“-Code (wie unten gezeigt). Gehen Sie nun zu den Plugin-Einstellungen von Adobe Font und klicken Sie im Menü auf „Benutzerdefinierte Typekit-Schriftarten“. Geben Sie dann diese Projekt-ID in dieses Feld ein und speichern Sie.

Sie sehen diese Schriftart jetzt entweder im WordPress Customizer, Elementor oder einem anderen kompatiblen Seitenersteller, den Sie verwenden. Auswählen und schon kann es losgehen.

Benutzerdefinierte Schriftarten manuell einbetten

Das manuelle Einbetten Ihrer Adobe-Schriftarten erfolgt genauso, wie wir es für das Einbetten von Google-Schriftarten beschrieben haben. In der Webprojekt-Übersicht sehen Sie einen Link zum Einbetten eines Stylesheets, der von Adobe bereitgestellt wird (siehe unten). Um CSS-Klassen anzuzeigen, klicken Sie auf den Text „Projekt bearbeiten“. Diese werden neben jedem Schriftstil angezeigt.

So finden Sie benutzerdefinierte Schriftarten und koppeln sie

Sie können auch die ideale Schriftart für Ihre Website finden und herunterladen und aus den Ordnern Ihrer Website laden, da es viele Ressourcen gibt, die kostenlose oder Premium-Schriftarten in einer großen Auswahl anbieten.

Sie können auch Hilfe vom Online-Tool für Schriftpaare erhalten, das sich hervorragend für die Vorschau von Schriftkombinationen eignet, damit Sie Schriften nach Belieben mischen und anpassen können. So wie es die Schriftpaare präsentiert, ist es auch einfach, andere Paarungsvorschläge beim Durchsuchen zu entdecken.

In unserem Blog finden Sie außerdem zwei tolle Artikel zum Thema Schriftpaarung. Es gibt den Guide to Font Pairing für Webdesigner + 30 erstaunliche Beispiele! für den Fall, dass Sie mehr über die gestalterische Kombination von Schriftarten erfahren möchten, mit einer großartigen Beratung, worauf Sie Wert legen sollten und wie Sie die beste Lesbarkeit und Haptik erreichen. Weitere Einzelheiten zu den Tools zum Paaren von Schriftarten finden Sie in unserem Artikel „Die 10 besten Tools zum Paaren von Schriftarten für Webdesigner“.

Laden Sie benutzerdefinierte Schriftarten aus Ordnern

Obwohl Google Fonts und Adobe Fonts eine großartige Auswahl bieten, aus der Sie wählen können, und eine einfache Möglichkeit, diese auf Ihrer Website zu verwenden, ist dies nicht die einzige Option, die Ihnen bei Ihrer Suche nach der perfekten Schriftart offen steht.

Es gibt mehrere ausgezeichnete Websites, die benutzerdefinierte Schriftarten verkaufen, die sorgfältig von Designern erstellt wurden. Font Squirrel zum Beispiel bietet eine große Schriftbibliothek und vor allem eine kommerzielle Nutzung und ein einfach zu implementierendes Format für diese Schriften. Auf der Website gibt es eine Mischung aus kostenlosen und „Premium“-Schriftarten (für die bezahlt werden muss).

Eine großartige Schriftart, die Sie von Font Squirrel in Betracht ziehen sollten, ist Fira Sans. Lassen Sie uns dies als Beispiel verwenden, um herauszufinden, wie Sie es auf unserer WordPress-Website zur Verwendung installieren können.

Klicken Sie zunächst auf die Registerkarte „Webfont Kit“. Aktivieren Sie das Kontrollkästchen „WOFF“ und klicken Sie dann auf „@Font-Face-Kit herunterladen“.

Sie erhalten eine ZIP-Datei, die nun entpackt werden muss. In diesem Ordner finden Sie die Schriftdatei zusammen mit einer stylesheet.css-Datei, die den Code enthält, den Sie für Ihr eigenes CSS-Stylesheet benötigen.

Für den OpenSans-ExtraBold-Webfont müssen wir beispielsweise das folgende CSS verwenden:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Am besten platzieren Sie alle Schriftdateien aller Formate in einem geeigneten Verzeichnis Ihrer Wahl unter Ihrem Themenordner. In unserem Beispiel befindet es sich im Ordner /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

Erstellen Sie im selben Ordner eine open-sans.css-Datei und platzieren Sie den gesamten CSS-Code jeder stylesheet.css-Datei, sodass der Inhalt wie folgt aussieht:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Dies hilft auch den verschiedenen Browsern bei der Auswahl der unterstützten Schriftart. Wenn Sie die CSS-Datei der Schriftarten auf WordPress-Weise einreihen müssen, sollten Sie dies in der functions.php wie folgt tun:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

Vergessen Sie nicht, die URL durch den Pfad zu Ihrer open-sans.css-Datei zu ersetzen.

Fazit

Die Wahl der richtigen Schriftart beim Erstellen Ihrer Website hat einen erheblichen Einfluss darauf, wie Ihre Website aussieht und funktioniert. Bei so vielen erstaunlichen Schriftarten zur Auswahl müssen Sie sich nicht nur an die Schriftarten halten, die von Ihrem Design bereitgestellt werden. Hoffentlich zeigt Ihnen dieser Artikel, wie Sie fast jede geeignete Schriftart für Ihre WordPress-Website verwenden können!