Je mehr Sie in der Webentwicklung arbeiten, desto wahrscheinlicher werden Sie Leute sehen, die Sie bitten, benutzerdefinierte Schriftarten in ihr Projekt zu integrieren.
Manchmal ist das einfach. Wenn Sie beispielsweise mit etwas wie einer Google Web-Schriftart arbeiten, können Sie den erforderlichen Code einfach kopieren, um ihn in Ihr Stylesheet einzufügen.
Oft sieht der Code in etwa so aus :
Und dann können Sie es wie folgt in Ihrem Stylesheet verwenden :
font-family: 'Roboto', sans-serif;Aber was ist, wenn jemand Ihnen eine Reihe von Schriftarten zur Verfügung stellt, die er in seinem Projekt verwenden möchte, die in einem Dateiformat vorliegen und nicht in einem Content-Delivery-Netzwerk gehostet werden?
Benutzerdefinierte Schriftarten in WordPress-Plugins
Zunächst ist anzumerken, dass bestimmte Schriftarten, um sie in Ihren Projekten zu verwenden, unter eine bestimmte Lizenz fallen müssen. Dies ist nicht der Beitrag, der die verschiedenen Lizenzierungsarten bespricht, aber stellen Sie sicher, dass Sie die Berechtigung für die Schriftart haben.
Beachten Sie zweitens, dass es unterschiedliche Formate für Schriftarten gibt. Im folgenden Beispiel werden Sie sehen, dass ich das OpenType-Format verwende. Die TL;DR-Version davon lautet wie folgt:
Das OpenType-Format ist eine Obermenge der bestehenden TrueType- und Adobe® PostScript® Type 1-Schriftartformate. Es ermöglicht eine verbesserte plattformübergreifende Portierbarkeit von Dokumenten, umfassende sprachliche Unterstützung, leistungsstarke typografische Funktionen und vereinfachte Anforderungen an die Schriftverwaltung.
Bei Interesse können Sie hier weiterlesen.
Drittens, wenn es darum geht, mit diesen Schriftarten, Stylesheets zu arbeiten und sie in den Kontext eines WordPress-Plugins einzubinden, finde ich es – wie bei allem anderen – wichtig, die Dinge organisiert zu halten.
Schriften innerhalb eines Plugins organisieren
Innerhalb des Assets-Verzeichnisses habe ich normalerweise ein CSS- und ein JS- Verzeichnis. Manchmal gehören dazu auch Bilder und in diesem Beispiel auch Schriftarten.
Sobald die Schriftarten im richtigen Verzeichnis platziert sind, ist es wirklich einfach, sie in Ihr Stylesheet aufzunehmen. Zuerst definieren Sie sie wie folgt :
@font-face {
font-family: GothamLight;
src: url("../fonts/Gotham-Light.otf") format("opentype");
}
@font-face {
font-family: ThirstyScriptMedium;
src: url("../fonts/ThirstyScriptMedium.otf") format("opentype");
}Und dann können Sie sie (zusammen mit einem richtigen Fallback) wie folgt verwenden :
#search_keywords {
background: #ffffff;
color: #151335;
font-family: 'GothamLight', sans-serif;
}Um vollständig zu sein, ist es erwähnenswert, dass Sie die Stylesheets einfach wie alle anderen in einem Plugin verbinden:
Das ist alles.
Ein einfacher Beitrag
Sicher, all dies ist leicht nachzuvollziehen, aber die wichtigsten Punkte, die es zu beachten gilt, sind:
- Verwenden Sie keine illegalen Schriftarten,
- Organisieren Sie Ihr Vermögen,
- Definieren Sie sie und verwenden Sie sie dann zusammen mit einem geeigneten Fallback.
Und das ist es.