Schriften auf einer Webseite ausprobieren und dem Kunden ein Vorher-Nachher zeigen

Um einem Kunden eine neue Schrift zu zeigen, öffne seine Webseite in Chrome, probiere die Schrift mit der kostenlosen Erweiterung FontMee auf der echten Seite aus und drücke den Vorher-Nachher-Button. FontMee macht zwei Screenshots, einen mit der alten und einen mit der neuen Schrift, und fügt sie zu einem Bild zusammen, das du in eine E-Mail einfügen oder als PNG speichern kannst. Auf der echten Webseite des Kunden ändert sich nichts, nur auf deinem eigenen Bildschirm.

Warum ein Bild auf der echten Seite besser ist als ein Entwurf

Ein Mockup (Entwurf) ist ein ausgedachtes Bild davon, wie eine Seite aussehen könnte, meist in einem Designprogramm gezeichnet. Es kostet Zeit, und eine Schrift sieht oft anders aus, sobald die echten Wörter, das Logo und die Fotos des Kunden um sie herum stehen. Probierst du die Schrift auf der echten Seite aus, sieht der Kunde seine eigene Webseite in der neuen Schrift, und genau dann kann er Ja oder Nein sagen.

Außerdem sparst du eine Arbeitsrunde. Du kannst in zehn Minuten drei Schriften testen, drei Bilder schicken und nur die umsetzen, die der Kunde wählt.

Was du brauchst

• Google Chrome auf einem Computer, denn dort laufen Erweiterungen.
• Die Adresse der Webseite, die du zeigen willst: deine eigene, die eines Kunden oder sogar die eines Mitbewerbers.
• Die kostenlose Erweiterung FontMee, ein kleines Zusatzprogramm, das Chrome um eine neue Funktion erweitert. Kein Konto, keine Zahlung.

Das Vorher-Nachher in sechs Schritten

FontMee zeigt eine Schrift auf jeder Seite, ohne sie für andere zu ändern. Hier ist der ganze Ablauf, und das kurze Video zeigt das Panel in Aktion.

1. Installiere FontMee. Füge es aus dem Chrome Web Store hinzu. Es ist kostenlos und braucht kein Konto. Klick in Chrome auf das Puzzle-Symbol und hefte es an, dann ist es immer einen Klick entfernt.
2. Öffne die Webseite des Kunden und klick auf das FontMee-Symbol. Das Panel öffnet sich neben der Seite. Du kannst auch Alt + Shift + F drücken. Chromes eigene Seiten (neuer Tab, der Web Store, chrome://-Seiten) lassen sich nicht ändern.
3. Wähl die neue Schrift. Wähl unter Änderungen anwenden auf Alles, Überschriften oder Fließtext und klick auf eine Schrift. Du willst eine Überschriftschrift und eine Textschrift, die gut zusammenpassen? Öffne Schriftkombinationen und drück Diese Kombi nutzen. Unser Ratgeber zu den besten Google-Schriftkombinationen zeigt einige.
4. Wähl den Ausschnitt. Das Bild zeigt, was gerade auf deinem Bildschirm zu sehen ist. Scrolle also zu der Stelle, die du zeigen willst, zum Beispiel dem Anfang der Startseite, und stell mit Feinjustieren Größe, Stärke und Zeilenabstand ein, bis es passt.
5. Drück Vorher / nachher. Das ist der Button mit dem Kamera-Symbol, neben dem Schalter Originalschrift und FontMee-Vorschau. FontMee holt den Tab nach vorn und macht zwei Screenshots, zuerst mit der neuen Schrift, dann mit dem Original. Chrome erlaubt nur zwei Screenshots pro Sekunde, gib ihm also einen Moment und wechsle nicht den Tab.
6. Schick es ab. Ein kleines Fenster öffnet sich mit dem Bild. Mit Schieberegler ziehst du eine Trennlinie über die Seite, mit Nebeneinander siehst du beide zugleich. Drück Bild kopieren und füge es mit Strg+V in eine E-Mail oder einen Chat ein, oder drück Bild speichern für eine PNG-Datei. Das zusammengefügte Bild trägt die Beschriftungen Vorher und Nachher.

Live im Meeting zeigen oder später schicken

Ist der Kunde in einem Videoanruf, teile deinen Chrome-Tab und wechsle oben im Panel zwischen Originalschrift und FontMee-Vorschau. Mit Alt + Shift + O kannst du auch per Tastatur umschalten, selbst bei geschlossenem Panel. FontMee hat außerdem den Button Auf Seite behalten, deine Schriften sind also wieder da, wenn du die Seite erneut öffnest. Ist der Kunde nicht da, spricht das Bild für dich.

Mach es dem Kunden leicht, Ja zu sagen

• Zeig zwei oder drei Möglichkeiten, nicht zehn. Ein Bild pro Schrift reicht.
• Nenne die Schriften in deiner E-Mail, damit der Kunde „die zweite“ antworten kann.
• Nimm auf jedem Bild denselben Seitenausschnitt, damit der einzige Unterschied die Schrift ist.
• Wenn er sich entscheidet, geh zurück zu FontMee und drück CSS kopieren. Du bekommst den Code, der es wahr macht, und unser Ratgeber zum Einbinden von Google Fonts zeigt, wohin er gehört.

Vier Dinge, die du vor dem Senden prüfst

• Es ist nur eine Vorschau. Niemand sonst sieht die neue Schrift, bis der Code auf der echten Seite steht. Sag das dem Kunden, damit er nicht online danach sucht.
• Prüfe die echten Wörter. Schau dir Überschriften, Buttons und lange Absätze an. Eine Schrift, die in einer Überschrift schön ist, kann in einem Absatz ermüden.
• Prüfe Sonderzeichen. Nutzt die Seite Buchstaben wie ä, ö, ü, ß oder é, scrolle zu ein paar davon und prüfe, ob sie richtig erscheinen. FontMee kann Schriften nach Schriftsystem filtern, etwa Latin Extended oder Kyrillisch.
• Prüfe die Lizenz. Google Fonts sind Open Source und Fontshare-Schriften frei nutzbar, aber eine Schrift, die der Kunde schon besitzt, kann eigene Regeln haben. FontMee zeigt beim Kopieren des Codes einen Lizenzhinweis.

Noch keine Website? Dann kommt die Schrift an zweiter Stelle. Eine Seite braucht außerdem ein Zuhause, und ein Baukasten ist der schnellste Weg dorthin, ganz ohne Code.

Hol dir die Erweiterung

FontMee ist kostenlos, mit über 1.900 Schriften, CSS kopieren in vier Formaten, einem ZIP zum Selbsthosten und dem Hochladen eigener Schriften. Kein Konto, kein Abo. Füge sie im Chrome Web Store hinzu oder lies zuerst die FontMee-Seite.

Gut zu wissen, bevor du loslegst

FAQ