Hinzufügen einer angepassten Schriftfamilie zum Help Center

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:

1. Öffnen Sie das Help Center.
2. Wählen Sie im Toolbereich die Option Erscheinungsbild anpassen aus.
   
3. Wählen Sie Design bearbeiten aus.
   
4. Öffnen Sie den Ordner „Dateien“.
5. Laden Sie alle vier Dateien hoch. Zendesk erstellt Links für Sie.
6. 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.

7. Ersetzen Sie die zdassets.com-URLs durch Ihre URLs. Vorsicht: Das einfache Anführungszeichen (') am Anfang und Ende ist wichtig.

8. Sie können der Schriftfamilie jeden beliebigen Namen geben. Benutzen Sie aber keine Leerzeichen, sondern verwenden_Sie_den_Unterstrich.
9. 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.