Eine großartige Möglichkeit, Ihrer WordPress^(WordPress) -Site etwas Branding und Individualität hinzuzufügen, besteht darin, die Schriftarten in Ihrem Design zu ändern.

Typografie und andere Banding-Elemente schaffen einen guten ersten Eindruck, stimmen die Besucher Ihrer Website ein und etablieren die Identität Ihrer Marke. Studien^(Studies) haben auch herausgefunden, dass Schriftarten die Fähigkeit der Leser beeinträchtigen, zu lernen, sich an Informationen zu erinnern und sich Texte zu merken.

Wenn Sie gerade ein WordPress-Design installiert^{(installed a WordPress theme)} haben oder etwas CSS- und Programmiererfahrung haben, zeigen wir Ihnen mehrere Optionen, mit denen Sie Schriftarten in WordPress ändern können .

So ändern Sie Schriftarten in WordPress^{(How to Change Fonts in WordPress)}

Es gibt drei Hauptoptionen, mit denen Sie Schriftarten in WordPress ändern können:

• Verwenden Sie Webfonts wie Google Fonts , Fonts.com oder Adobe Edge Web Fonts , die auf einer Website eines Drittanbieters gehostet werden
• Codieren^(Code) Sie Webfonts in Ihr Design und stellen Sie sie in die Warteschlange
• Hosten^(Host) Sie Schriftarten auf Ihrer Website und fügen Sie sie Ihrem Design hinzu

1. So ändern Sie Schriftarten in WordPress mithilfe von Webfonts^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Die Verwendung von Webfonts ist eine einfachere und schnellere Möglichkeit, Schriftarten in WordPress zu ändern, als das Herunterladen und Hochladen von Schriftartdateien.

Mit dieser Option können Sie auf eine Vielzahl von Schriftarten zugreifen^{(access a variety of fonts)} , ohne sie bei jeder Änderung aktualisieren zu müssen, und es wird kein Serverplatz auf Ihrem Hosting belegt. Die Schriftarten werden mithilfe eines Plugins oder durch Hinzufügen von Code zu Ihrer Website direkt von den Servern des Anbieters bereitgestellt.

Stellen Sie^(Make) sicher, dass die Webfonts, die Sie für Ihre Website auswählen, zu Ihrer Markenidentität passen, für den Haupttext leicht lesbar sind, Website-Besuchern vertraut sind und die gewünschte Stimmung und das gewünschte Bild vermitteln.

Sie können Webfonts mit einem WordPress-Plugin^{(using a WordPress plugin)} oder manuell hinzufügen, indem Sie Ihrer Website ein paar Codezeilen hinzufügen. Lassen Sie uns beide Optionen untersuchen.

So fügen Sie Webfonts mit einem WordPress-Plugin hinzu^{(How to Add Web Fonts Using a WordPress Plugin)}

Abhängig von der von Ihnen gewählten Webschriftart können Sie ein WordPress - Plugin verwenden, um auf die Schriftartenbibliothek zuzugreifen und die gewünschte Schriftart auf Ihrer Website auszuwählen. Für diesen Leitfaden haben wir uns für Google Fonts entschieden und das Google Fonts Typography -Plugin verwendet.

1. Melden Sie sich zunächst bei Ihrem WordPress - Admin-Dashboard an und wählen Sie Plugins > Add New aus .

1. Geben Sie Google Fonts Typography in das Suchfeld ein und wählen Sie Jetzt installieren^{(Install Now)} aus .

1. Wählen Sie Aktivieren aus^(Activate) .

1. Greifen Sie als Nächstes auf den Customizer zu, indem Sie zu Appearance > Customize gehen .

1. Wählen Sie den Abschnitt Google Fonts aus.

1. Klicken Sie anschließend auf den Link, um die Einstellungen der Schriftarten zu öffnen, und konfigurieren Sie sie wie folgt:

• Legen Sie unter Grundeinstellungen^{(Basic Settings)} die Standardschriftart für Ihren Fließtext, Überschriften und Schaltflächen fest.

• Konfigurieren Sie unter Erweiterte Einstellungen^{(Advanced Settings)} den Titel und die Beschreibung Ihrer Website, das Menü, die Überschriften und den Inhalt, die Seitenleiste und die Fußzeile.

• Deaktivieren Sie^(Uncheck) alle unerwünschten Schriftstärken im Abschnitt zum Laden von Schriftarten , ^{(Font Loading)}um Ihre Website nicht zu verlangsamen^{(avoid slowing down your site)} .

Wenn auf Ihrer Website Schriftarten vorhanden sind, die nicht richtig angezeigt werden oder funktionieren, verwenden Sie den Abschnitt „ Debugging “ zur Fehlerbehebung.

1. Sie können diese Einstellungen im Customizer testen , um sicherzustellen, dass sie wie gewünscht funktionieren, und dann Veröffentlichen^(Publish) auswählen .

Hinweis : Wenn Sie vergessen, im ^(Note)Customizer „ Veröffentlichen“ auszuwählen, gehen alle vorgenommenen Änderungen verloren.

So fügen Sie Webfonts mithilfe von Code hinzu^{(How to Add Web Fonts Using Code)}

Sie können Webfonts installieren und verwenden, wenn Sie Zugriff auf den Code Ihres Designs haben. Dies ist eine manuelle Alternative zum Hinzufügen eines zusätzlichen Plugins, aber es ist nicht kompliziert, wenn Sie die Schritte sorgfältig befolgen.

Es sind jedoch andere Schritte zu unternehmen, wenn Sie ein Design aus dem WordPress -Designverzeichnis oder ein benutzerdefiniertes Design verwenden.

Wenn Sie ein Design aus dem WordPress -Designverzeichnis gekauft haben, erstellen Sie ein^{(create a child theme)} untergeordnetes Design und geben Sie ihm dann die Datei style.css und functions.php. Es ist einfacher, wenn Sie ein benutzerdefiniertes Design haben, da Sie das Stylesheet und die Funktionsdatei Ihres Designs bearbeiten können.

1. Wählen Sie zunächst eine Schriftart aus der Google Fonts- Bibliothek aus und klicken Sie auf das Symbol + (plus) , um sie Ihrer Bibliothek hinzuzufügen.

1. Wählen Sie als Nächstes die Registerkarte unten aus, auf der Sie den Code finden, den Sie Ihrer Website hinzufügen möchten. Gehen Sie auf der Registerkarte „Einbetten“ zum Abschnitt „ Schriftart ^{(Embed font)}einbetten “. ^(Embed)Sie finden den von Google Fonts generierten Code , der etwa so aussieht:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Hinweis^(Note) : Wir haben Work Sans für diesen Leitfaden ausgewählt, sodass der Name der Schriftart je nach Auswahl bei Ihnen anders sein kann.

1. Kopieren Sie diesen Teil des Codes: https://fonts.googleapis.com/css2?family=Work+Sans

Dadurch können Sie den Stil von Google Fonts -Servern einreihen, um Konflikte mit Plugins von Drittanbietern zu vermeiden. Es ermöglicht auch einfachere Änderungen des untergeordneten Themas.

1. Um die Schriftart einzureihen, öffnen Sie die Funktionsdatei und fügen Sie den folgenden Code hinzu. ( Ersetzen Sie^(Replace) den Link durch den Link, den Sie von Google Fonts erhalten ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

1. Sie können Ihrer Funktion eine neue Zeile hinzufügen oder derselben Zeile, wenn Sie in Zukunft weitere Schriftarten hinzufügen möchten, wie folgt:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

In diesem Fall haben wir sowohl Cambria- als^(Cambria) auch Work Sans - Schriftarten in die Warteschlange gestellt.

Der nächste Schritt besteht darin, die Schriftarten zum Stylesheet Ihres Designs hinzuzufügen, damit die Schriftart auf Ihrer Website funktioniert.

1. Öffnen Sie dazu die style.css-Datei Ihres Designs und fügen Sie den Code hinzu, um einzelne Elemente wie folgt mit Ihren Webfonts zu gestalten:

body {
Schriftfamilie: 'Work Sans', serifenlos; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
Schriftfamilie: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

In diesem Fall ist die Hauptschriftart Work Sans , während Kopfzeilenelemente wie h1, h2 und h3 Cambria verwenden .

Wenn Sie fertig sind, speichern Sie das Stylesheet und überprüfen Sie, ob Ihre Schriftarten so funktionieren, wie sie sollten. Wenn nicht, überprüfen Sie, ob die Schriftarten im Stylesheet nicht überschrieben werden, oder leeren Sie Ihren Browser-Cache und versuchen Sie es erneut.

1. Stellen Sie eine Sicherungsschrift bereit, um sicherzustellen, dass die Schriftarten gerendert oder einfach aufgerufen werden können, insbesondere für Benutzer mit alten Geräten, schlechten Verbindungen oder wenn der Schriftartenanbieter technische Probleme hat. Gehen Sie dazu zum Stylesheet und bearbeiten Sie das CSS wie folgt:

body {
Schriftfamilie: 'Work Sans', Arial, serifenlos; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
Schriftfamilie: 'Cambria', Times New Roman, Serife; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Wenn alles in Ordnung ist, sehen die Besucher Ihrer Website Ihre Standard-Webfonts, in unserem Fall Work Sans und Cambria . Wenn es Probleme gibt, sehen sie die Backup-Schriftarten, in unserem Fall beispielsweise Arial oder Times New Roman .

2. So ändern Sie Schriftarten in WordPress, indem Sie Schriftarten hosten^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Das Hosten von Schriftarten auf Ihren eigenen Servern hilft Ihnen, die Leistung Ihrer Webschriftarten zu optimieren, aber es ist auch eine sicherere Methode^{(a more secure way)} , anstatt Ressourcen von Websites Dritter abzurufen.

Mit Google^(Google) Fonts und anderen Webfonts können Sie Schriftarten zur Verwendung als lokal gehostete Schriftarten herunterladen, aber Sie können weiterhin andere Schriftarten auf Ihren Computer herunterladen, sofern die Lizenzen dies zulassen.

1. Laden Sie zunächst die Schriftartdatei herunter, entpacken Sie sie, laden Sie sie auf Ihre Website hoch und verlinken Sie sie dann in Ihrem Stylesheet. In diesem Fall müssen Sie die Schriftarten nicht wie bei den Web-Schriftarten in die Datei functions.php einreihen. Bestätigen Sie, dass die Dateien, die Sie hochladen, im .woff -Format vorliegen, bevor Sie sie auf Ihrer Website verwenden.

1. Gehe als Nächstes zu wp-content/themes/themename , um die Schriftartdatei in dein Theme hochzuladen. 
2. Öffnen Sie das Stylesheet und fügen Sie den folgenden Code hinzu (in diesem Fall verwenden wir die Schriftart Work Sans , aber Sie können diese durch Ihre eigenen Schriftarten ersetzen):

@font-face {
Schriftfamilie: 'Work Sans'; ^{(font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
Schriftstärke: normal; ^{( font-weight: normal;)}
Schriftstil: normal; ^{( font-style: normal;)}
}

@font-face {
Schriftfamilie: 'Work Sans'; ^{( font-family: ‘Work Sans’;)}
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
Schriftstärke: fett; ^{( font-weight: bold;)}
Schriftstil: normal; ^{(font-style: normal;)}
}

@font-face {
Schriftfamilie: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
Schriftstärke: normal; ^{( font-weight: normal;)}
Schriftstil: normal; ^{( font-style: normal;)}
}

Hinweis^(Note) : Mit @fontface können Sie Fett, Kursiv und andere Variationen Ihrer Schriftart verwenden, danach können Sie die Stärke oder den Stil für jede Schriftart angeben.

1. Fügen Sie als Nächstes wie folgt Stile für Ihre Elemente hinzu:

body {
Schriftfamilie: 'Work Sans', Arial, serifenlos; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
Schriftfamilie: 'Cambria', Times New Roman, Serife; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Passen Sie Ihre WordPress-Typografie an^{(Customize Your WordPress Typography)}

Das Ändern von Schriftarten in WordPress ist eine großartige Idee, um das Branding und die Benutzererfahrung zu verbessern. Es ist keine einfache Aufgabe, aber Sie haben mehr Kontrolle über Ihr Thema.

Konnten^(Were) Sie die Schriftarten Ihrer Website mithilfe der Schritte unter Verwendung der Tipps in diesem Leitfaden anpassen? Sag^(Tell) es uns in den Kommentaren.

How to Change Fonts in WordPress

A great way to add some branding and indiνidualіsm to your WordPress site iѕ to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• So verschieben Sie eine WordPress-Site von einem Host auf einen anderen

• So installieren und konfigurieren Sie WordPress auf Microsoft Azure

• So führen Sie blitzschnelles WordPress auf Microsoft Azure aus

• So konfigurieren Sie den Datenschutz in WordPress und warum es wichtig ist

• So installieren Sie WordPress auf der Google Cloud Platform

• So beschleunigen Sie jede WordPress-Site mit .HTACCESS

• So machen Sie eine WordPress-Site sicher

• So sichern Sie Ihre WordPress-Site

• Child-Theme in WordPress erstellen

• WordPress zeigt HTTP-Fehler beim Hochladen von Bildern

• Squarespace Vs WordPress: Welches ist die bessere Site-Plattform?

• So steigern Sie die Leistung in WordPress durch eine Datenbankbereinigung

• So installieren Sie ein Theme auf WordPress

• 9 Muss Plugins für neue WordPress-Installationen haben

• So beschleunigen Sie eine WordPress-Site in 11 Schritten

• Die 3 besten SEO-Plugins für WordPress

• Muss WordPress Yoast SEO-Einstellungen 2022 haben

• So duplizieren Sie eine Seite in WordPress

• Schützen und sichern Sie die WordPress-Website vor Hackern

• So verwenden Sie WP Super Cache im WordPress-Blog