Dies ist mein erster Versuch, einen Community-Tipp, eine Anleitung und eine Erklärung von CSS zu schreiben. Ich bitte also um ein wenig Nachsicht :-)
Das neue Help Center bietet eine Reihe äußerst nützlicher Funktionen. Dazu gehört auch das CSS-Modding, das die Modifizierung einer Schriftfamilie ermöglicht. Anfänglich einige Erklärungen.
Hinweis: Wenn Sie Google Fonts nutzen möchten, lesen Sie diesen Tipp von Wes Drury .
Über Schriftfamilien
Die meisten Unternehmen nutzen eine Standardschrift wie Arial oder Helvetica. Diese Schriftarten werden zur Textdarstellung verwendet. Manche Schriftarten sehen sehr modern aus, manche eher verschnörkelt. Wie Ihr Text aussehen soll, hängt von Ihren persönlichen Vorlieben ab. Die meisten Unternehmen haben in diesem Bereich feste Vorgaben. In fast allen Fällen sind die Schriftfamilie und -größe grundsätzlich vorgeschrieben.
Zuweilen ist die Sache aber nicht so einfach. Manche Unternehmen (darunter meines) nutzen eine angepasste Schriftart. Sie ist an den eigenen Bedarf angepasst und ermöglicht eine sehr elegante Darstellung. Allerdings entsteht dadurch bei Websites und beim Help Center von Zendesk ein gewisser Zusatzaufwand. Sehen wir uns die Sache einmal an.
Zutaten
- Angepasste Web-Schriftart mit folgenden Dateien
- webfont.ttf
- webfont.eot
- webfont.svg
- webfont.woff
- Angepasstes Design im Help Center
- Grundlegende CSS-Fähigkeiten (es reicht, über Anfängerwissen im Bereich HTML und CSS zu verfügen)
Genaue Schritte
Wenn Sie alle Zutaten haben, können Sie beginnen, die neue Schriftart in das Help Center zu integrieren.
Schritte:
- Öffnen Sie das Help Center.
-
Wählen Sie im Toolbereich die Option
Erscheinungsbild anpassen
aus.
-
Wählen Sie
Design bearbeiten
aus.
- Öffnen Sie den Ordner „Dateien“.
- Laden Sie alle vier Dateien hoch. Zendesk erstellt Links für Sie.
-
Gehen Sie zur Registerkarte „CSS“ auf und geben Sie den folgenden Code ein. (Geben Sie ihn an einen Ort, den Sie leicht wiederfinden können. Vielleicht einfach ganz unten.)
@font-face {
font-family: 'Regular';
src: local ("Regular"),
src: url('//company.zendesk.com/hc/assetslink.eot');
src: url('//company.zendesk.com/hc/assetslink.eot?#iefix') format('eot'),
url('//company.zendesk.com/hc/assetslink.woff') format('woff'),
url('//company.zendesk.com/hc/assetslink.ttf') format('truetype'),
url('//company.zendesk.com/hc/assetslink.svg#webfont') format('svg');
font-weight: 400;
font-style: normal;
}Hinweis: Wenn Sie Ihre Zendesk-URL ändern, muss diesse im Code erscheinen. In meinem Fall lautet die URL beispielsweise support.connexys.nl. Diese URL ersetzt „company.zendesk.com“. Wenn Agenten sich anmelden, ändert sich die URL und die Schriftart ist nicht verfügbar. Kunden sehen aber die richtige Schriftart.
-
Ersetzen Sie die zdassets.com-URLs durch Ihre URLs. Vorsicht: Das einfache Anführungszeichen (') am Anfang und Ende ist wichtig.
- Sie können der Schriftfamilie jeden beliebigen Namen geben. Benutzen Sie aber keine Leerzeichen, sondern verwenden_Sie_den_Unterstrich.
- Als Nächstes müssen wir die Schriftart in CSS aktivieren.
-
Gehen Sie zum Code „Body {“. Fügen Sie folgenden Code hinzu. „$font_1;“ sollte bereits vorhanden sein. Ersetzen Sie dies – und natürlich „your_webfont_name“.
/* font-family: $font_1; */
font-family: your_webfont_name;
-
Gehen Sie zum Code „a {“. Fügen Sie folgenden Code hinzu. „$font_2“ sollte bereits vorhanden sein. Ersetzen Sie dies.
/* font-family: $font_2; */
font-family: your_webfont_name;
-
Gehen Sie zum Code „h1, h2, h3, h4, h5, h6 {“. Fügen Sie Folgendes hinzu:
font-family: your_webfont_name;
-
Gehen Sie zu „.dropdown-toggle“. Fügen Sie Folgendes hinzu:
/* font-family: "entypo"; */
font-family: your_webfont_name;
Das war's.
Jetzt haben Sie die meisten Schriftarten im CSS-Code ersetzt. Ihr Help Center erscheint jetzt in Ihrer angepassten Schriftart. Wenn Sie Text finden, der nicht in dieser Schriftart erscheint, suchen Sie im CSS-Code nach „Font-family: nicht-Ihre-Schriftart;“ und ersetzen dies.
Hinweis: Ändern Sie die Schriftart in den CSS-Codeblocks „.search:before“ und „.search-small:before“ nicht. Ansonsten verschwindet das Suchsymbol im Design „Professional“.
Der beste Weg, Schriftartcodes zu ersetzen, ist es, eines der oben angegebenen Beispiele zu verwenden. In diesen Beispielen wird der Zendesk-Code deaktiviert, ohne ihn zu löschen. Sollten Sie den Zendesk-Code später erneut verwenden wollen, spart dies viel Such- und Tipparbeit.
Viel Erfolg.
3 Kommentare
Hallo Jan, danke für deinen Beitrag, ich versuche gerade unsere eigenen Schriften anzuwenden, es klappt aber nicht. Folgendes ist mein Code (hab auch zwischendrin alles wie angeleitet ersetzt). Was könnte denn noch mein Fehler sein?
@font-face {
font-family: 'CircularStd-Book';
src: local ("CircularStd-Book");
src: url('$assets-circularstd-book-otf'),
url('$assets-circularstd-book-woff'),
url('$assets-circularstd-book-ttf'),
url('$assets-circularstd-book-eot'),
url('$assets-circularstd-book-ttf');
font-weight: 400;
font-style: normal;
}
Und noch eine weitere Frage zu der ich noch keine Antwort gefunden habe - wie installiere ich eine zweite Schrift, damit ich für Überschriften variieren kann. Einfach das ganze doppelt? Und dann für die unterschiedlichen Headlines einsetzen?
Vielen Dank und lieben Gruß, Maria
Hallo und Herzlich Willkommen in der Zendesk-Community Maria!
Jan war leider bereits seit einiger Zeit nicht mehr online.
Er hat diesen Tipp aber auch im englischen Communitybereich geteilt. Dort wurden in der Vergangenheit bereits einige Tricks und Änderungen ausgetauscht.
Du findest das Thema unter „Adding a custom Font Family to Help Center“. Falls du dort keine Lösung findest, kannst du gerne dort noch einmal einen Kommentar hinterlassen. :)
Viele Grüße
Nils
Hallo Nils, vielen Dank für die Antwort, dann versuche ich dort mein Glück.
Lieben Gruß,
Maria
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.