So verwenden Sie heruntergeladene Schriftarten in WordPress ohne Plugin

Google Fonts ist eine erstaunliche Ressource. Bevor es so weit verbreitet war, war es eine echte Qual, Websites mit einzigartigen Schriftarten zu erstellen. Jetzt jedoch, mit ein paar Klicks und einem Code-Schnipsel, verwandelt sich Ihre Website von Helvetic-eh zu Helvetic-awesome . Aber was ist, wenn die Schriftart, die Sie lieben, nicht zur Google Fonts-Familie gehört? Sie müssen wissen, wie Sie heruntergeladene Schriftarten verwenden, da Sie eine fantastische Hipster-Schriftart entdeckt haben, die die Seele Ihres Bartes anspricht.

Die Verwendung einer heruntergeladenen Schriftart auf Ihrer Website ist nicht ganz so einfach wie Clicky-Clicky-Paste-Paste. Es ist kein schwieriger Prozess, wohlgemerkt, und ich werde Sie durch ihn führen, damit Sie nie wieder eine Helvetic-eh- Website haben.

Nun möchte ich darauf hinweisen, dass Sie dies über ein Plugin tun können. Es gibt eine Handvoll im Repo. Aber warum sollten wir das tun? Ich bin der Typ, der es vorzieht, ein Plugin zu vermeiden, wenn ein paar Codezeilen dasselbe tun. Überschüssige Plugins verursachen Unmengen an Blähungen, unnötige HTTP-Anfragen und verlangsamen Ihre Website.

Also importieren wir diese Schriftarten von Hand – als wäre es wieder Ende der 90er Jahre. Awww, ja.

Auswählen und Herunterladen einer Schriftart

Ich bin ein großer Fan von Schriftzusammenfassungen. Elegant Themes bietet eine Menge, die Sie durchsuchen können, um zu sehen, was Ihnen gefällt. Schlagen Sie also einige davon an und sehen Sie, was Ihnen gefällt.

• Handschriftliche Schriftarten
• Retro-Schriften
• Gehobene Schriftarten
• Kursive Schriftarten
• Hipster-Schriften
• Lustige Schriftarten

Für mich gehe ich mit der Aventura-Schrift aus dem Hipster-Round-up.

Ihr erster Schritt besteht darin, den Download-Link für die Schriftart zu finden und die Datei auf Ihrem Computer zu speichern. Es wird wahrscheinlich eine ZIP- Datei sein, die verschiedene Dateiformate enthält. Die gebräuchlichsten sind .ttf (TrueType Font) oder .otf (OpenType Font).

Einen Webfont erstellen (irgendwie optional, aber nicht wirklich)

FontSquirrel hat ein großartiges Tool, mit dem Sie sicherstellen können, dass niemand und kein Browser mit der Pracht Ihrer Website inkompatibel bleibt. Da die meisten Schriftarten, die Sie herunterladen, nur in einem einzigen Format verfügbar sind, macht es das FontSquirrel-Tool so, dass Sie nicht durch das, was der Schriftartenautor verteilt hat, eingeschränkt sind. Solange Sie die Rechte zur Verwendung der Schriftart haben, können Sie sicherstellen, dass sie mit Ihrem Produkt/Ihrer Website funktioniert.

Laden Sie einfach Ihre kürzlich heruntergeladene Schriftart hoch und wählen Sie Ihre Optionen aus. Persönlich verwende ich die Expertenoptionen , um alle verfügbaren Schriftformate zu erhalten. Die anderen funktionieren, aber Sie erhalten nicht so viele Dateitypen, was der Sinn der ganzen Sache ist.

FontSquirrel ist auch großartig, dass es Ihnen das erforderliche CSS bietet, um sie in Ihre Site zu importieren. Wie ist das denn benutzerfreundlich? Du kopierst es einfach und fügst es ein (womit wir uns weiter unten befassen).

Hochladen Ihrer Schriftart in WordPress

Danach müssen Sie die Schriftart bei Ihrem Hosting-Provider hochladen. Ich mache dies immer über FTP (ich verwende FileZilla, aber Sie können jeden beliebigen Client verwenden).

Wenn Sie die FTP-Informationen Ihres Hosts nicht kennen, gehen Sie in Ihr cPanel und suchen Sie unter Dateien -> FTP-Konten .

Dort sehen Sie jedes FTP-Konto für den Host, und neben jedem sollte auch ein Link zum Konfigurieren des FTP-Clients angezeigt werden.

Wenn Sie dort hineingehen, erhalten Sie von cPanel Serverinformationen oder eine FileZilla-Datei (und andere), die Sie importieren können, um Ihre Anmeldeinformationen festzulegen. Ich persönlich gehe für manuell, aber Sie tun, was Sie wollen. Auch wenn Sie die Datei verwenden, benötigen Sie das Kennwort zum Anmelden, sodass beide Methoden sicher sind.

Nachdem Sie sich nun per FTP bei Ihrem Host angemeldet haben, navigieren Sie zu Ihrem /wp-content- Ordner für Ihre Site. Da dies Inhalt für Ihre WordPress-Site ist, warum sollten Sie ihn nicht dort platzieren? Fühlen Sie sich frei, es überall zu platzieren, sogar in /wp-content/uploads . Sie tun Sie.

FTP ist super einfach, um Ihre Datei hochzuladen. Suchen Sie einfach die heruntergeladene Schriftartdatei und ziehen Sie sie in den unteren rechten Bereich in FileZilla. Das startet den Upload. Es dauert nicht länger als eine Sekunde, bis Sie es im Verzeichnis sehen.

Wenn Sie das oben besprochene FontSquirrel-Tool verwendet haben, tun Sie dies auch für alle Font-Dateien, die Sie von ihm heruntergeladen haben. Ziehen Sie sie einfach per Drag & Drop dorthin, wo Sie sie speichern möchten.

Verwenden Ihrer Schriftart mit CSS

Ihre Schriftart ist jetzt hochgeladen und sicher in ihre warme, bequeme Decke mit wp-Inhalten eingekuschelt. Es ist an der Zeit, den erforderlichen CSS-Import zu Ihrem Thema hinzuzufügen.

Gehen Sie in Ihrem FTP-Client zum Verzeichnis Ihres Child-Themes (Sie verwenden ein Child-Theme, oder?) und suchen Sie die Datei style.css , klicken Sie mit der rechten Maustaste darauf und wählen Sie Anzeigen /Bearbeiten, um sie in Ihrem Standard-Texteditor anzuzeigen.

Wenn Sie kein Child-Theme haben, verwenden Sie den Orbisius Child Theme Creator, um es mega-ultra schnell zu machen. Sie können das Plugin anschließend löschen. Ich liebe dieses Ding.

@Schriftart

Der von uns verwendete Code stammt direkt von FontSquirrel (Sie können Ihren eigenen Code schreiben oder das Beispiel unten kopieren/einfügen), und alles, was ich geändert habe, war der URL-Upload-Pfad, um /wp-content einzuschließen. Alles andere wird vom Webfont-Generator bereitgestellt.

Alles, was dieses @font-face- Skript tut, ist, den Stylesheets Ihrer Website mitzuteilen: "Hey, Alter, ich stelle diese neue Schriftart hier drüben ein, wenn Sie sie irgendwann verwenden möchten." Weißt du, so wie du es machst, wenn du Cupcakes nach Hause bringst und den Leuten erzählst, mit denen du zusammenlebst.

Ohne @font-face , wenn Sie versuchen, font-family aufzurufen : 'aventurabold'; per CSS kann Ihre Website sie nicht finden, da ihr nie mitgeteilt wurde, wo sie gespeichert ist.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Speichern Sie die Datei, und da Sie sie zum Bearbeiten über FileZilla geöffnet haben, erhalten Sie einen Dialog, in dem Sie gefragt werden, ob Sie die Datei auf dem Server ersetzen möchten. Ihre Antwort ist natürlich ja.

Jetzt müssen Sie nur noch in Ihre custom.css gehen (oder wenn Sie Divi verwenden, Divi -> Theme Options -> Custom CSS im Navigationsbereich Ihres WP-Dashboards).

Sie fügen einfach das CSS-Styling hinzu, wie Sie es für jede andere Schriftart tun würden. Ich habe einfach die 'Roboto'- und 'Exo'- Google-Schriften, die ich verwendet habe, durch 'aventurabold' ersetzt , und die Dinge waren gut (dank des @font-face- Imports oben).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Die Früchte unserer Arbeit

So sah es vorher aus:

Und Folgendes ist passiert, nachdem ich Aventura zum CSS hinzugefügt habe:

Hurra! Es klappt! Gut gemacht! Gehen Sie zu uns!

Sieht gut aus, Friendo

Wie Captain Malcolm Reynolds einmal berühmt sagte: „Wir haben das Unmögliche geschafft, und das macht uns mächtig.“ Nun, okay, das Hochladen einer Schriftart und deren Import über CSS bedeutet vielleicht nicht das Unmögliche , aber Sie haben sicherlich etwas getan, an das viele WordPress-Benutzer nicht zu denken wagen: Kernfunktionen ohne Plugin hinzuzufügen.

Und das, meine Freunde, macht euch in der Tat mächtig.

Welche Schriftart verwenden Sie im Web am liebsten, die keine Google-Schriftart ist? Sag es mir in den Kommentaren!

Miniaturansicht des Artikels mit 32 Pixel / shutterstock.com