OnOffice-E-Mail-Vorlagen: Google Web Font-Schriftarten einbinden

In diesem Blog-Beitrag möchte ich Dir folgendes zeigen, wie du Google Web Fonts in E-Mail-Vorlagen verwendest, statt nur die voreingestellten onOffice-Schriftarten.

Vorab-Bemerkung

Um die vorgefertigten E-Mail-Vorlagen von OnOffice abzuändern und die Änderungen auch zu verstehen, sind Grundkenntnisse in HTML und CSS sicherlich hilfreich. Du kannst aber auch veruschen “stumpf” der Anleitung hier zu folgen ohne Vorkenntnisse. Ich empfehle dir hier das 1. und 2. Kapitel des kostenlosen Programmierkurs “FreeCodeCamp.org“. Für den HTML-Teil des Code-Camps benötigst du ca. 1,5 Stunden, für den CSS-Teil ca. 3 Stunden. Eine Zeitinvestition, die sich wirklich für jeden OnOffice-Administrator lohnt! Darüber hinaus weißt du danach, wie eine Website eigentlich aufgebaut ist und kannst eigene Design-Anpassungen in OnOffice-E-Mail-Vorlagen vornehmen.

Google-Fonts-Schriftarten in E-Mails verwenden (nicht nur die von OnOffice vorgesehenen)

Wir haben vor ca. 1 Jahr die Schriftart unseres CI auf “Comfortaa” geändert – eine Schriftart, die auch bei Google Web Fonts angeboten wird. Im Sinne eines einheitlichen Markenauftritts, wollten wir also auch unsere E-Mails mit der neuen Schriftart versenden – diese ist jedoch keine OnOffice-Standard-Schriftart. Wie diese Schriftart also einbinden? Ganz einfach: den HTML-Code der E-Mail-Vorlagen direkt bearbeiten.

Wenn wir E-Mails schreiben, sieht dies als nun so aus:

Wie konfiguriert man eine Google Web Font als neue Standardschriftart für eine E-Mail-Vorlage in OnOffice?

Wechsel in die Vorlagen-Verwaltung bei OnOffice über den Menü-Punkt “Bearbeiten” und dann “Vorlagen/Dateien”.

– Wechsel in der Vorlagen-Verwaltung auf den Reiter “E-Mail-Vorlagen”.

– Erstelle mit dem “Plus”-Symbol eine neue E-Mail-Vorlage

– Gebe der neuen Vorlage einen Namen

– Stelle das E-Mail-Format um auf “HTML”

– Aktiviere die erweiterte Formatierungsansicht mit dem “blauen Button”

– Aktiviere nun die “HTML Quellcode”-Ansicht

– Kopiere folgenden Code in die E-Mail. Dies ist der Formatierungs-Code, den wir bei Möllerherm Immobilien verwenden, um die Google Web-Font-Schriftart “Comfortaa” in der Farbe grau zu verwenden. Wie du deine eigene Schriftart in deiner Wunschfarbe ausgibst, zeige ich die in den folgenden Schritten.

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
font-family: Comfortaa, sans-serif !important;
color: #444444 !important;
}
</style>

– Gehe auf https://fonts.google.com/. Suche dir eine Schriftart aus und klicke in der oberen rechten Ecke der Schriftart auf das “Plus”-Symbol, um dies auszuwählen. Unten rechts in der Ecke deines Browsers wird nun ein schwarzer Balken angezeigt mit “Family Selected”. Klicke auf den weißen Strich, um die Ansicht aufzuklappen.

– Wichtig sind nun die beiden angezeigten “Code-Schnipsel”. Kopiere diese…

– … und ersetze die folgenden roten Passagen in dem HTML-Code, den wir vorher in die E-Mail-Vorlage kopiert haben, durch die neuen Code-Schnipsel.

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
font-family: Comfortaa, sans-serif !important;
color: #444444 !important;
}
</style>

– Nun kannst du noch die Farbe der Schrift ändern. Wir stellen unsere Schriftart in grau dar. Dies wird in folgendem roten Codeabschnitt definiert:

color: #444444 !important;

– Mit der Angaben #444444 wird die Farbe definiert. Du kannst dir weitere CSS-Farb-Codes hier raussuchen: https://wiki.selfhtml.org/wiki/Grafik/Farbpaletten. Darüber hinaus empfehle ich das Programm Copi Color Picker, mit dem du alle möglichen Farben und Farbcodes von anderen Websites nachschauen kannst, indem du nur mit der Maus über eine Farbe “fährst”.

– Wenn du den Code und die Schriftfarbe fertig eingefügt hast, kannst du die Quellcode-Ansicht deiner E-Mail-Vorlage schließen und du siehst, dass die Mailvorlage “leer” dargestellt wird. Wenn du nun jedoch schreibst, dann schreibst du in der neuen Schriftart und Farbe.

– Speichere die neue Vorlage. Bei Möllerherm Immobilien haben wir diese “00 Leervorlage mit Möllerherm-Schriftart” als erste Vorlage im obersten Vorlagenordner gespeichert und die Kollegen haben diese Vorlage als Standardvorlage für neue Mails verknüpft.

Schrifftart in von onOffice vorgefertigten “HTML-E-Mail-Vorlagen in Unternehmensfarben” ändern.

onOffice bietetet im Ordner “oO – Vorlagen mit Unternehmensfarben” ganz unten in der Liste der Vorlagenordner in der Vorlagenverwaltung vorgefertigte Vorlagen an, die auch von vielen Maklerbüros verwendet werden. Auch hier lässt sich die Schriftart anpassen auf Google Web-Fonts.

– Dupliziere eine Vorlage, zum Beispiel die Vorlage mit dem Namen “Blanko”, und speicher diese in einem neuen Vorlagenordner ab.

– Öffne nun die E-Mail-Vorlage und wechsel in die “Quellcode”-Ansicht mit dem “blauen Button” und dann “”Quellcode”

– Füge an folgender Stelle den ersten Code-Schnipsel aus Google Web Fonts ein (siehe Screenshot weiter oben unter “Embed Font”):

<title></title>
<meta charset="utf-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="IE=edge" http-equiv="X-UA-Compatible" />
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" />
<style type="text/css">/* CLIENT-SPECIFIC STYLES */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
(...)

– Suche mit der Tastenkombination Strg + F nach folgender Zeichenfolge in der Vorlage: font-family: Helvetica, Arial, sans-serif

– Ersetze alle Ergebnisse der Suche durch den zweiten Code-Schnipsel aus Google Web-Fonts (siehe Screenshot weiter oben unter “Specify in CSS”). Hierzu makierst du mit gedrückter rechter Maustaste die grün hinterlegten Suchergebnisse bis auf die Leerzeichen genau und fügst mit Strg + C (kopieren) und Strg + V (einfügen) den Code-Schnipsel ein.

– Speichere die Vorlage.