Möchten Sie benutzerdefinierte Schriftarten in WordPress hinzufügen? Benutzerdefinierte Schriftarten verbessern die Typografie und das Benutzererlebnis Ihrer Website, indem sie Ihnen die Verwendung einer Vielzahl schöner Schriftarten ermöglichen.
Bei WPBeginner haben wir benutzerdefinierte Schriftarten zu vielen unserer Partner-Websites hinzugefügt, daher wissen wir, wie sehr sie die visuelle Attraktivität einer Website verbessern können.
Neben einem guten Aussehen können benutzerdefinierte Schriftarten auch dazu beitragen, die Lesbarkeit zu verbessern, ein Markenimage zu schaffen und die Zeit zu erhöhen, die Benutzer auf Ihrer WordPress-Website verbringen.
In diesem Artikel zeigen wir Ihnen, wie Sie benutzerdefinierte Schriftarten in WordPress mit Google Fonts, TypeKit und der CSS3 @Font-Face-Methode hinzufügen.
Hinweis: Das Laden zu vieler Schriftarten kann Ihre Website verlangsamen. Wir empfehlen, zwei Schriftarten auszuwählen und diese auf Ihrer gesamten Website zu verwenden. Wir zeigen Ihnen auch, wie Sie diese richtig laden, ohne Ihre Website zu verlangsamen.
Bevor wir uns ansehen, wie man benutzerdefinierte Schriftarten in WordPress hinzufügt, werfen wir einen Blick darauf, wie man benutzerdefinierte Schriftarten findet, die man verwenden kann.
Benutzerdefinierte Schriftarten in WordPress finden
Schriftarten waren früher teuer, aber das ist nicht mehr der Fall. Es gibt viele Orte, an denen man großartige kostenlose Webfonts findet, wie z. B. Google Fonts, Adobe Fonts (früher Typekit), FontSquirrel und fonts.com.
Wenn Sie nicht wissen, wie man Schriftarten mischt und kombiniert, probieren Sie Font Pair. Es hilft Designern, schöne Google-Schriftarten zu kombinieren.
Wenn Sie Ihre Schriftarten auswählen, denken Sie daran, dass die Verwendung zu vieler benutzerdefinierter Schriftarten Ihre Website verlangsamt. Deshalb sollten Sie zwei Schriftarten auswählen und diese in Ihrem gesamten Design verwenden. Dies bringt auch Konsistenz in Ihr WordPress-Design.
Mit diesen Worten wollen wir uns ansehen, wie man benutzerdefinierte Schriftarten in WordPress hinzufügt. Dies werden wir in diesem Tutorial behandeln:
- Benutzerdefinierte Schriftarten in WordPress von Google Fonts hinzufügen
- Benutzerdefinierte Schriftarten in WordPress mit Adobe Fonts hinzufügen
- Benutzerdefinierte Schriftarten in WordPress mit CSS3 @font-face hinzufügen
Benutzerdefinierte Schriftarten in WordPress von Google Fonts hinzufügen
Google Fonts ist die größte, kostenlose und am häufigsten genutzte Schriftbibliothek unter Webentwicklern. Es gibt verschiedene Möglichkeiten, Google Fonts in WordPress hinzuzufügen und zu verwenden.
Methode 1: Google Fonts mit einem WordPress-Plugin hinzufügen
Wenn Sie Google Fonts zu Ihrer Website hinzufügen und verwenden möchten, ist diese Methode bei weitem die einfachste und für Anfänger empfohlen.
Das Erste, was Sie tun müssen, ist das Google Fonts Typography Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress Plugins.
Angebot: Wenn Sie die Premium-Version des Plugins erhalten möchten, stellen Sie sicher, dass Sie unseren Google Fonts für WordPress Gutschein für einen Rabatt von 20% verwenden. Damit können Sie die Schriftfarbe und -größe in Ihrem WordPress-Theme und mehr ändern.
Nach der Aktivierung haben Sie die Möglichkeit, Ihre E-Mail-Adresse einzugeben, um den offiziellen Quickstart-Leitfaden zu erhalten.
Als Nächstes müssen Sie im Admin-Seitenmenü auf Schriftarten-Plugin » Schriftarten anpassen klicken.
Dies führt Sie automatisch zum WordPress Theme Customizer und öffnet automatisch den neuen Abschnitt 'Fonts Plugin'.
Hier können Sie die Standardschriftarten für Ihre Website im Abschnitt „Grundeinstellungen“ und die Schriftarten für die spezifischen Teile Ihrer Website unter „Erweiterte Einstellungen“ auswählen.
Beginnen wir mit einem Klick auf „Grundeinstellungen“. Von hier aus können Sie die Schriftarten für Ihre Inhalte, Überschriften, Schaltflächen und Felder auswählen.
Die Dropdown-Menüs „Schriftfamilie“ ermöglichen es Ihnen, eine neue Schriftart auszuwählen. Oben finden Sie die Standardschriftart, dann die Systemschriftarten und schließlich eine riesige Liste von über 1455 Google-Schriftarten.
Wenn Sie eine neue Schriftart auswählen, ändert sich die Vorschau automatisch, um Ihnen zu zeigen, wie sie aussieht.
Jetzt können Sie die erweiterten Einstellungen des Plugins verwenden, um Ihre Schriftarteinstellungen fein abzustimmen.
Sie müssen auf den Pfeil-Zurück-Button '<' oben links auf der Seite klicken und dann auf den Abschnitt 'Erweiterte Einstellungen' klicken.
Hier finden Sie Einstellungen für die verschiedenen Bereiche Ihrer Website, wie z. B. den Website-Titel, das Navigationsmenü, den Inhaltsbereich, die Seitenleiste und die Fußzeile.
Zum Beispiel gibt Ihnen der Abschnitt „Inhalt“ Optionen, um die Schriftart Ihrer verschiedenen Überschriftenebenen und Zitate zu ändern.
Sie können die benutzerdefinierten Schriftarten, die Sie verwenden möchten, aus den Dropdown-Menüs auswählen.
Sie können auf ähnliche Weise benutzerdefinierte Schriftarten für Ihren Sidebar-Bereich auswählen.
Klicken Sie einfach auf die Zurück-Schaltfläche und rufen Sie die Einstellungen für die „Seitenleiste“ auf. Dort finden Sie Dropdown-Menüs, um Schriftarten für Ihre Seitenleistenüberschriften und -inhalte auszuwählen.
Wenn Sie mit Ihrer benutzerdefinierten Schriftauswahl zufrieden sind, vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.
Methode 2: Google Fonts manuell in WordPress hinzufügen
Diese Methode erfordert, dass Sie Code zu Ihren WordPress-Theme-Dateien hinzufügen. Wenn Sie dies noch nie getan haben, lesen Sie unseren Leitfaden, wie Sie Code in WordPress kopieren und einfügen.
Besuchen Sie zuerst die Google Fonts-Bibliothek und wählen Sie eine Schriftart aus, die Sie verwenden möchten. Auf der Schriftartenseite sehen Sie die verfügbaren Stile für diese Schriftart.
Wählen Sie die Stile aus, die Sie in Ihrem Projekt verwenden möchten, und klicken Sie dann oben auf die Schaltfläche „Ausgewählte Familien anzeigen“.
Dies öffnet eine Seitenleiste, in der Sie den Einbettungscode kopieren können.
Es gibt zwei Möglichkeiten, diesen Code zu Ihrer WordPress-Site hinzuzufügen.
Zuerst können Sie die header.php-Datei Ihres Themes bearbeiten und den Code vor dem <body>-Tag einfügen.
Wenn Sie jedoch mit der Codebearbeitung in WordPress nicht vertraut sind, können Sie ein Plugin verwenden, um diesen Code einfach hinzuzufügen.
Installieren und aktivieren Sie einfach das WPCode-Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.
Nach der Aktivierung gehen Sie zur Seite Code Snippets » Header & Footer und fügen Sie den Einbettungscode in das Feld 'Header' ein.
Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Änderungen zu speichern. Das Plugin lädt nun den Google Font-Einbettungscode auf allen Seiten Ihrer Website.
Sie können diese Schriftart wie folgt in die Stylesheet-Datei Ihres Themes einfügen:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
Um mehr zu erfahren, lesen Sie unseren Leitfaden, wie Sie Google Fonts in WordPress-Themes einfügen.
Benutzerdefinierte Schriftarten in WordPress mit Adobe Fonts hinzufügen
Adobe Fonts, früher bekannt als Typekit, ist eine weitere kostenlose und Premium-Ressource für großartige Schriftarten, die Sie in Ihren Designprojekten verwenden können. Sie haben ein kostenpflichtiges Abonnement sowie einen begrenzten kostenlosen Plan, den Sie nutzen können.
Melden Sie sich einfach für ein Adobe Fonts-Konto an und besuchen Sie den Abschnitt 'Schriftarten durchsuchen'. Von hier aus müssen Sie auf die Schaltfläche </> klicken, um eine Schriftart auszuwählen und ein Projekt zu erstellen.
Als Nächstes sehen Sie den Einbettungscode mit Ihrer Projekt-ID. Er zeigt Ihnen auch, wie Sie die Schriftart in der CSS Ihres Themes verwenden.
Sie müssen diesen Code kopieren und in den <head>-Bereich Ihrer Website einfügen.
Es gibt zwei Möglichkeiten, diesen Code zu Ihrer WordPress-Site hinzuzufügen.
Zuerst können Sie die header.php-Datei Ihres Themes bearbeiten und den Code vor dem <body>-Tag einfügen.
Wenn Sie jedoch mit der Codebearbeitung in WordPress nicht vertraut sind, können Sie ein Plugin verwenden, um diesen Code hinzuzufügen. Installieren und aktivieren Sie einfach das kostenlose WPCode Plugin.
Gehen Sie nach der Aktivierung zur Seite Code Snippets » Header & Footer und fügen Sie den Einbettungscode in das Feld 'Header' ein. Klicken Sie dann auf die Schaltfläche 'Änderungen speichern'.
Das ist alles. Sie können nun die von Ihnen ausgewählte Typekit-Schriftart in der Stylesheet-Datei Ihres WordPress-Themes wie folgt verwenden:
h1 .site-title {
font-family: gilbert, sans-serif;
}
Für detailliertere Anweisungen lesen Sie unser Tutorial, wie Sie mit Adobe Font (Typekit) großartige Typografie in WordPress hinzufügen.
Benutzerdefinierte Schriftarten in WordPress mit CSS3 @font-face hinzufügen
Der direkteste Weg, benutzerdefinierte Schriftarten in WordPress hinzuzufügen, ist die Verwendung der CSS3 @font-face Methode. Diese Methode ermöglicht es Ihnen, jede beliebige Schriftart auf Ihrer Website zu verwenden.
Zuerst müssen Sie die Schriftart, die Ihnen gefällt, in einem Webformat herunterladen. Wenn Sie das Webformat für Ihre Schriftart nicht haben, können Sie es mit dem FontSquirrel Webfont Generator konvertieren.
Sobald Sie die Webfont-Dateien haben, müssen Sie sie auf Ihren WordPress-Hosting-Server hochladen. Der beste Ort zum Hochladen der Schriftarten ist ein neuer Ordner „fonts“ in Ihrem Theme- oder Child-Theme-Verzeichnis.
Sie können FTP oder den Dateimanager Ihres cPanel verwenden, um die Schriftart hochzuladen.
Nachdem Sie die Schriftart hochgeladen haben, müssen Sie die Schriftart mit der CSS3 @font-face-Regel wie folgt in die Stylesheet-Datei Ihres Themes laden:
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Vergessen Sie nicht, die Schriftfamilie und die URL durch Ihre eigenen zu ersetzen.
Danach können Sie diese Schriftart überall in der Stylesheet-Datei Ihres Themes wie folgt verwenden:
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
Das direkte Laden von Schriftarten mit CSS3 @font-face ist nicht immer die beste Lösung. Wenn Sie beispielsweise eine Schriftart von Google Fonts oder Typekit verwenden, ist es am besten, die Schriftart für eine optimale Leistung direkt von deren Server zu laden.
Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie benutzerdefinierte Schriftarten in WordPress hinzufügen. Möglicherweise möchten Sie auch lernen, wie Sie Farben auf Ihrer WordPress-Website anpassen, oder unsere Liste der besten Drag-and-Drop-WordPress-Seitenersteller ansehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Dennis Muthomi
Ich habe das in Methode 1 erwähnte Google Fonts Typography Plugin für meine Kunden verwendet und es war eine enorme Hilfe. Ein Punkt, den man vielleicht in Betracht ziehen sollte, ist die Auswirkung auf die Ladegeschwindigkeit Ihrer Website. Die Auswahl einer Teilmenge der Schriftart (z. B. nur lateinische Zeichen) kann die Ladezeiten erheblich verkürzen und trotzdem das gewünschte Aussehen erzielen.
WPBeginner Kommentare
Die Rendergeschwindigkeit wäre in beiden Fällen gleich.
Kushal Phalak
Ich kann nicht auf benutzerdefinierte Schriftarten verzichten. Es ist, als ob etwas unvollständig wäre, wenn ich keine benutzerdefinierte Schriftart verwende. Als Designer und Entwickler möchte ich, dass meine Marken sorgfältig ausgearbeitet werden, da dies der wichtigste Schritt ist, und wenn ich irgendeine Schriftart verwende, fühlt es sich nicht gut an. Ich weiß, dass einige Standardschriftarten gut sind, aber ich finde darin nicht genug Abwechslung. In WordPress sollte diese Funktion meiner Meinung nach integriert sein, da dies den zusätzlichen Aufwand für das Hinzufügen benutzerdefinierter Schriftarten erspart.
WPBeginner Support
It would depend on the theme but maybe in the future there will be an easier way
Admin
Jiří Vaněk
Danke für den nützlichen Artikel. Unsere Sprache hat bestimmte Besonderheiten und Merkmale. Die tschechische Sprache verwendet Buchstaben wie ěščřž. Manchmal ist es sehr problematisch, eine Schriftart zu finden, die diese Zeichen berücksichtigt und sie nicht anders darstellt. Deshalb danke ich Ihnen für diese Anleitung, die mir endlich helfen wird, das ewige Problem des Schreibens in der tschechischen Sprache zu lösen.
Jozef Fekete
As a Slovak I know exactly what you are talking about
In cases like this, it is advisable to use a filter to make searching for a suitable font easier. For example, look for fonts in the “Latin extended” category that support Czech and Slovak language.
Jiří Vaněk
Das ist ein guter Rat. Vielen Dank dafür. Ich habe bereits einige der Buchstaben verfolgt. Einige Kunden sind jedoch nicht zufrieden damit und wünschen sich eine dekorative. Ich werde Ihren Suchrat befolgen.
Moinuddin Waheed
Es gibt viele Google-Schriftarten, die sehr gut sind und von vielen Top-Entwicklern verwendet werden.
Ich bin seit einiger Zeit ein Fan von Poppins und Roboto und habe sie auf meinen statischen Websites und auch auf WordPress-Websites verwendet.
Ich habe Leute sagen hören, dass man Google-Schriftarten aus einer lokalen Bibliothek verwenden soll,
Ich weiß nicht, was das bedeutet?
Sie argumentieren, dass das Abrufen vom Server die Geschwindigkeit der Website verlangsamen kann.
Wenn das so ist, wie können wir diese Schriftarten aus unserer eigenen lokalen Bibliothek hinzufügen, angesichts der Tatsache, dass es sich um Google-Schriftarten handelt?
WPBeginner Support
Das Plugin aus unserem Leitfaden bietet die Option, die Schriftartdatei lokal zu hosten. Wenn Sie die Datei nicht lokal hosten, bedeutet dies, dass Ihre Benutzer warten müssten, bis die Schriftart von Google geladen wird, um diese Schriftart auf Ihrer Website anzuzeigen.
Admin
Moinuddin Waheed
Danke für die Anleitung, die Schriftarten lokal zu speichern.
Das Abrufen von Google ist aus Geschwindigkeitsgründen keine gute Idee. Ich werde daran denken, wenn ich Google Fonts verwende, sie lokal zu halten.
Jiří Vaněk
Wenn eine Schriftart lokal verwendet wird, bedeutet dies, dass sie im Web gespeichert ist. Das heißt, per FTP, genau wie WordPress. Dies liegt daran, dass WordPress sonst auf Google-Server für Schriftarten zugreifen müsste, was die Antwortzeit der Website verlangsamt. Darüber hinaus kann es vorkommen, dass die Server von Google derzeit langsam sind, was sich auf die Geschwindigkeit auswirkt. Wenn Sie Ihre Website mit einem Messwerkzeug wie Pagespeed Insight oder GTmetrix testen, sehen Sie, wie viel Zeit das Laden von Schriftarten von Google-Servern in Anspruch nehmen kann. Daher ist es üblich, Schriftarten lokal auf die Website hochzuladen, was sowohl die Reaktionsfähigkeit als auch die Metriken der Website verbessert. Ich habe es auch so gemacht.
Ahmed Omar
Vielen Dank nochmals für einen nützlichen Artikel.
Wissen Sie, warum meine Schriftart auf dem Laptop korrekt angezeigt wird, aber nicht auf dem Mobiltelefon?
WPBeginner Support
Der wahrscheinlichste Grund wäre, wenn Ihr Theme die Stile für mobile Geräte überschreibt. Wenn Sie sich an den Support Ihres Themes wenden, sollten sie Ihnen helfen können.
Admin
Brayden Fraser
Sie hätten sagen sollen, dass man dafür ein Business-Wordpress-Mitglied sein muss. Irreführend.
WPBeginner Support
Alle unsere Inhalte sind für WordPress.org-Websites bestimmt. Sie befinden sich auf WordPress.com. Sie können unseren Vergleich zwischen den beiden in unserem Artikel unten einsehen:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Tarun Kashyap
Welche Schriftart verwenden Sie auf dieser Website? Sie sieht sehr attraktiv aus.
WPBeginner Support
We’re currently using Proxima Nova
Admin
Joshua
Können Sie mir bitte sagen, wie Sie solche schönen animierten Fotos für Ihren Blog erstellen? Welche Software verwenden Sie?
WPBeginner Support
There are multiple tools, for the moment you may want to take a look at Recordit for an option for creating a GIF
Admin
Manuel
Vielen Dank, ich habe @font-face auf WordPress ausprobiert, aber die Schriftart wurde nicht angezeigt. Deshalb habe ich die Empfehlungen befolgt, die Schriftarten im Theme-Verzeichnis zu platzieren, und siehe da!
WPBeginner Support
Glad our recommendation could help
Admin
Roshni Kanchan
Vielen Dank nochmals für einen nützlichen Artikel.
Wissen Sie, warum meine Schriftart auf dem Laptop korrekt angezeigt wird, aber nicht auf dem Mobiltelefon?
WPBeginner Support
Ihr spezifisches Theme hat möglicherweise gerätespezifisches CSS, das die von Ihnen hinzugefügte Schriftart überschreibt. Wenn Sie sich an den Support Ihres Themes wenden, können sie Ihnen dies mitteilen.
Admin
Vlad
Vielen Dank!
WPBeginner Support
You’re welcome
Admin
Katherine
Vielen Dank für dieses einfache Video. Mit der zweiten Methode konnte ich meine Schriftart in wenigen Minuten beheben. Sie haben mir viel Zeit beim Herumfummeln am Theme-Code erspart. Sehr geschätzt!
WPBeginner Support
Hallo Katherine,
Gern geschehen. Wir freuen uns, dass Sie es hilfreich fanden.
Admin
Oder
Hallo, meine Schriftart ist keine Google-Schriftart. Ich habe sie mit Font Face hochgeladen, aber ich sehe sie nicht im Customizer meines Themes. Irgendwelche Ratschläge?
giri
Hallo, ich habe absolut viel Wert aus deinem Beitrag gezogen. Bitte, ich habe 2 schnelle Fragen.
1. Welche Anzahl von Plugins sollte jeder Blogger nicht überschreiten? Ich habe derzeit etwa 18 installiert, würdest du diese Zahl als übertrieben betrachten? Könntest du bitte auch meine Seite besuchen und mir einen
2. Deine Schriftart ist wirklich schön. Würdest du Plugins empfehlen, die mir schöne Schriftarten wie deine geben würden?
Zum Schluss, würdest du ein paar Sekunden Zeit haben
WPBeginner Support
Hallo Giri,
1. Bitte lesen Sie unseren Artikel über wie viele WordPress-Plugins Sie auf Ihrer Website installieren sollten.
2. Für Schriftarten siehe bitte die besten Typografie-Plugins für WordPress.
Admin
Roshani
Ich habe benutzerdefinierte Schriftarten-URLs in font-face hochgeladen, aber in den Entwicklertools wird ein 404-Fehler angezeigt. Bevor die Webseite geladen wird, werden normale Schriftarten angezeigt.
Bitte helfen Sie mir dabei.
Chamnan
Ich habe Probleme mit der Khmer-Schriftart bei der Verwendung von Google Fonts. Das Problem ist, dass einige Texte Symbole anzeigen.
ahmed aboubakr
Danke für Ihre Tutorials, sie helfen wirklich, und danke für Ihre freundliche Mühe.
Fadl
Okay, egal… Ich konnte es herausfinden, indem ich den @font-face-Code aus dem benutzerdefinierten CSS-Feld entfernt habe
Amy
Dies ist wirklich der beste Leitfaden zum Hinzufügen von Schriftarten, den ich gefunden habe. Alle Methoden sind an einem Ort und jede Methode ist einfach zu befolgen. Ich habe die letzten Tage damit verbracht, das Internet zu durchsuchen, um herauszufinden, wie ich eine benutzerdefinierte Schriftart hinzufüge, die nicht von Google oder Typekit stammt, und endlich habe ich einen Leitfaden gefunden, der einfach zu befolgen war. Danke!
Amber
Okay, ich habe Font Squirrel benutzt und die @font-face-Kits bekommen. Ich habe sie in mein Theme bei Siteground hochgeladen. Dann habe ich sichergestellt, dass ich die URL im WP Editor -> Fonts geändert habe. Hier ist ein Beispiel, was ich getan habe:
@font-face { font-family: ‘walpurgis_nightregular’; src: url(‘www.example.com/public_html/wp-content/themes/pique/fonts/walpurgisnight-regular-webfont.woff2’) format(‘woff2’), url(‘www.wanderlustconqueror.com/public_html/wp-content/themes/pique/fonts/walpurgisnight-regular-webfont.woff’) format(‘woff’); font-weight: normal; font-style: normal;
}
Trotzdem wird die Schriftart nicht im Abschnitt „Typografie“ der Anpassungsoptionen angezeigt. Ich dachte, ich müsste sie vielleicht auch zum „Zusätzlichen CSS-Editor“ hinzufügen, also habe ich sie auch dort eingefügt. Das schien auch nicht zu funktionieren.
Ich möchte meine Schriftart nur für meine Überschriften verwenden können. Was mache ich hier falsch? Damit dieser Leitfaden für Anfänger gedacht ist, fühle ich mich wirklich dumm. Habe ich einen Schritt übersehen? Gibt es einen besseren, detaillierteren Leitfaden nur zur Verwendung der @font-face-Option? Hilfe!
WPBeginner Support
Hallo Amber,
Wir sind uns nicht sicher. Bitte versuchen Sie noch einmal, die oben genannten Schritte auszuführen.
Admin
Dan
Ich habe ein ähnliches Problem wie Amber. Trotz Schritt-für-Schritt-Anleitung werden meine Schriftarten immer noch nicht geladen.
Ich verwende ein benutzerdefiniertes Theme, das auf dem Twenty Seventeen Theme basiert. Meine CSS-Datei befindet sich unter wp-content/themes/twentyseventeen-child. Hier habe ich auch meine Schriftarten platziert. In der CSS-Datei habe ich Folgendes:
Meine Website zeigt diese Schriftart jedoch immer noch nicht an! Was mache ich falsch?
Syed Abbas Ali Shah
Ich habe auch eine Frage. Ich habe die .ttf-Dateien in meinem hochgeladen
publichtml/ordnername-der-website/wp-content/theme/font
und ich habe den Namen der Schriftart in die Stylesheet-CSS des Themes im WordPress-Editor eingefügt. Aber es wird die Schriftart nicht übernommen.
Bitte geben Sie mir die Lösung
Raghava
Vielen Dank für die wertvollen Informationen. Ich habe es versucht und es funktioniert gut. Ich habe zwei Schriftarten von Google verwendet, und wenn ich Google Fonts verwende, ist die Website-Leistung etwas langsam.
Wenn Sie detailliert beschreiben können, wie man Schriftarten direkt in WordPress hochlädt, wäre das sehr willkommen.
Thanks,
Raghava
Allix
Wenn ich ein "Glyph" über Photoshop ansehe, das ein Sonderzeichen in einer Schriftart ist, die ich gekauft habe – wie kann ich dieses Glyph in Photoshop übertragen?
Danke!
dsb
dumme Fragen, da bin ich mir sicher! Aber in der URL – wo es heißt „your theme“ – wird das durch den Titel unseres Themes ersetzt, richtig? Oder lassen wir diesen Teil so, wie er ist?
Außerdem, bei Schriftarten mit langen Namen, müssen Sie einfach Leerzeichen dazwischen lassen oder Pluszeichen oder etwas anderes hinzufügen?
Zum Beispiel:
@font-face { font-family: Arvo example one; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo example one-Regular.ttf); font-weight: normal; }1-click Use in WordPress
Vielen Dank
WPBeginner Support
Hallo dsb,
Ja, Sie müssen your-theme durch den tatsächlichen Namen Ihres Theme-Ordners ersetzen. Wenn Sie Ihre Schriftart in das Schriftartenverzeichnis Ihres aktuellen Themes hochgeladen haben, können Sie sehen, wie die Schriftartdatei heißt. Oder kopieren Sie den Dateinamen und fügen Sie ihn einfach in CSS ein.
Admin
Vincent
„Der beste Ort, um die Schriftarten hochzuladen, ist in einem neuen Ordner „fonts“ im Verzeichnis Ihres Themes oder Child-Themes.“
Warum ist das genau der beste Ort? Das Erstellen eines Child-Themes für eine einzelne Schriftart ist etwas ärgerlich, aber das Hochladen in das Theme selbst bedeutet, dass es bei einem Update des Themes verschwinden könnte, richtig? Oder ist es davon noch sicher, da es sich technisch gesehen um eine nicht verwandte Datei handelt?
Andrew
Ich würde wahrscheinlich sagen, dass es generell unsinnig ist, kein Child-Theme zu haben, unabhängig davon, wofür man es verwendet.
Und nein, es wäre nicht sicher, wenn Ihr Theme ein Update erhält. Es würde durch das Update überschrieben werden.
DaVince
> Ich würde wahrscheinlich sagen, es ist albern, generell kein Child-Theme zu haben, egal wofür man es verwendet.
Warum denkst du das? Betrachten Sie den Fall, dass jemand das Theme in keiner Weise, Form oder Gestalt ändert. Es wäre völlig sinnlos, ein Child-Theme zu verwenden, und fügt in diesem Fall nur eine weitere Code-Schicht hinzu.
> Und nein, es wäre nicht sicher, wenn Ihr Theme ein Update erhält. Es würde durch das Update überschrieben werden.
Das habe ich mir irgendwie gedacht. Ich finde, das sollte im Artikel hervorgehoben werden, sonst werden einige Leute unglücklich sein.
Shah
Hallo,
Ich habe keine Probleme damit, benutzerdefinierte Schriftarten irgendwo in meinem Theme hinzuzufügen, nur als ich versuchte, die Schriftart in wp-embed-template.php zu ändern, funktionierten meine benutzerdefinierten Schriftarten nicht. Ich meine, es ist, als wären sie gar nicht @font-faced.
Könnten Sie mir bitte helfen, die Schriftarten im WordPress-Embed-Teil zu ändern? Soll ich @font-face wieder in das PHP einfügen? Es ist bereits hinzugefügt!
Vielen Dank im Voraus,
Robin
Vielen Dank für Ihre Hilfe!
Wenn ich die Schriftart in meinen Schriftartenordner hochgeladen habe, füge ich sie dann zu meinem CSS hinzu? Lasse ich die dort vorhandene Schriftfamilie? Weil ich diese meistens benutze. Dies ist eine spezielle Schriftart, die nur für bestimmte Anlässe verwendet wird.
Ich bin so verwirrt.
Alice
Really great! Been struggling a while (I’m quite new to all this) but now it works
Thanks a lot!
Nicole
Hallo. Danke dafür. Wie finde ich die Lizenzinformationen für eine Schriftart? Einige Schriftarten sind überall im Web zu finden, und ich möchte eine verwenden, aber es ist schwer, die EULA-Informationen zu finden.
Vincent
Dies ist normalerweise in den Metadaten der Schriftart selbst enthalten. Unter Windows können Sie mit der rechten Maustaste klicken und die Eigenschaften einer Schriftart anzeigen. Wenn das nicht ausreicht, möchten Sie vielleicht einen voll ausgestatteten Schriftarten-Viewer herunterladen, der die Anzeige von Schriftart-Metadaten unterstützt.
Andrea
Hallo, welche Erweiterung sollte die Schriftart für die Installation auf WordPress haben?
Da ich Probleme bei der Installation meiner habe
Mike
Hallo Leute, ich habe die letzte Technik (@fontface) verwendet. Sie hat die Schriftart zu WordPress hinzugefügt, aber sie zur Standardschriftart gemacht. Ich wollte sie nur als Option in meiner Schriftartenliste haben. Könnt ihr mir helfen?
ep
Habe die CSS @font-face Methode verwendet. Funktioniert einwandfrei. Danke.
Abdul Manan Abbasi
Assalam o Alaikum!
Ich bin ein Anfänger in WordPress. Ich möchte die Noori Nastaleeq-Schriftart zu meiner Website hinzufügen. Wie kann ich das machen? Ich brauche Ihre Hilfe.
Ildiko
Können Sie einen Leistungsvergleich zwischen diesen Methoden liefern?
Asiyah
Hallo,
Ich bin komplett neu bei WordPress, daher hoffe ich, dass Sie mir helfen können. Ich habe gerade erst eine benutzerdefinierte Domain von Bluehost gekauft, dann WordPress installiert und schließlich das So Simple Theme installiert und aktiviert. Was ich also wissen möchte, sind meine Schriftartänderungen verloren, wenn ich mein Theme in Zukunft aktualisiere, und wenn ja, wie kann ich das verhindern?
Ich habe nur bemerkt, dass viele andere Seiten empfehlen, zuerst ein benutzerdefiniertes CSS-Plugin hinzuzufügen, und ich habe keine Ahnung, wie das geht.
Mit freundlichen Grüßen
WPBeginner Support
Bitte werfen Sie einen Blick auf unseren Leitfaden, wie Sie einfach benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen.
Admin
Vikram
Vielen Dank. Es hat geholfen
Hashim Naushahi
Das war wirklich hilfreich! Vielen Dank!!!
Nur eine kurze Frage...
Wie würde ich den Code anpassen, wenn ich eine Schriftart mit verschiedenen Schriftschnitten habe?
Ich habe eine normale und eine fette Version der Schriftart, die ich verwenden möchte, auf meinem Laptop installiert. Ich habe FontSquirrel verwendet, um diese in Webfonts zu konvertieren. Und ich habe diese Webfonts in einen Ordner in meinem Child-Theme hochgeladen, wie Sie es erklärt haben. Ich weiß nur nicht, wie ich @font-face verwenden kann, um beide Schriftschnitte zu nutzen.
Ich freue mich sehr auf Ihre Antwort. Die Art und Weise, wie Sie das erklärt haben, ist großartig!
Vielen Dank im Voraus!
Mit freundlichen Grüßen,
Hashim
WPBeginner Support
Sie werden font-weight in CSS verwenden. So:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }1-click Use in WordPress
Admin
Christina
Ich sehe den „Editor“-Button in meinem WordPress unter „Darstellung“ nicht. Ich habe Font Squirrel verwendet, um meine Schriftart hochzuladen, aber als ich sie im Theme-Editor hinzufügen wollte, war das keine Option. Vielleicht habe ich eine andere Version von WordPress. Bitte helfen Sie. Danke.
Michelle
Können Sie ein Beispiel für die URL-Quelle für das @fontface-Beispiel geben? Ich mache etwas falsch und fühle mich, als würde ich mir die Haare ausreißen :/
Mr.T
Ist der richtige Weg, benutzerdefinierte Google-Schriftarten hinzuzufügen, nicht die Verwendung der enqueue_script-Funktion?
WPBeginner Support
Es ist ideal, aber nicht notwendig. Diese Methode ist auch korrekt und einfacher für Anfänger.
Admin
James
Hallo Leute
Ich lese immer deine Beiträge und liebe die Seite, tolle Arbeit, du hilfst mir immer weiter. Ich hing fest, als ich eine Website für einen Kunden verschieben musste und die Schriftart ändern musste. Ich dachte, ich hätte alles gemacht, die CSS-Dateien usw. kopiert, aber als ich das hier gelesen habe, wurde mir klar, dass ich den Code im Header nicht geändert hatte.
Stecke seit einer Woche hier fest!
Anyway just wanted to say thanks