Die eigene Handschrift als Font auf der Website

Dieser Eintrag ist wirklich besonders. Als ich heute begann den wöchentlichen Blog Post zu schreiben, wies mich mein MacBook auf ein zu installierendes MacOS Update hin. Da ich schon die letzten drei Male auf „später“ geklickt habe, dachte ich mir, dass das ja nicht so lange dauert und klickte auf „ok“. Das war vor sechs Stunden und seitdem wird mir ein Aktualisierungsbalken angezeigt. Da dieser Blog Post heute fertig werden muss, beschloss ich ein etwas ungewöhnliches Thema auf eine ungewöhnliche Weise anzugehen. Sofasophia erzählte mir neulich davon, dass sie ihre Handschrift in einen Font verwandelt hat und diesen Font nun auf auf Ihrer Website benutzt. Ich hatte davon schon öfter mal gehört, aber das nie so richtig ernst genommen. Als ich so auf meinen Fortschrittsbalken starrte, lag daneben ein iPad und ich beschloss dem Gerät eine Chance zu geben. Ich würde mir einen Font erstellen und dann in meinem Blog einbauen.

Es gibt mehrere Apps für iOS und Android mit denen man aus seiner Handschrift einen Font erstellen kann. Ich habe mir fontise, tinkafont und ein paar andere installiert und ausprobiert. Die beiden genannten sind kostenlos und man kann damit auf einem iOS Gerät einen eigenen Font erstellen. Für die Nutzung des Fonts muss man dann etwas bezahlen und es war nicht möglich, oder ich habe es nicht gefunden, True Type Fonts für eine Website zu erzeugen.

Calligraphy

Die Website Calligraphr.com bietet genau das, was ich brauche und dazu scheinbar kostenlos … mal sehen 🙂

So prinzipiell lädt man ein PDF Template herunter, druckt es aus, schreibt die Buchstaben in die vorbereiteten Kästchen, scannt es dann ein, lädt es wieder hoch … und … schwupps … hat man seinen eigenen Font. Eigentlich ganz einfach, wenn man einen Drucker und einen Scanner hat. Ich habe aber „nur“ ein iPad und da war es schon ein Problem in das PDF etwas hineinzuschreiben. Nach ein paar vergeblichen Versuchen mit dem Original Adobe Reader und einer anderen App habe ich dann PDF Pro 3 gefunden. Dort konnte man mit dem Finger oder dem Apple Pencil etwas schreiben. Der erste Tag nach dem Download ist kostenlos, danach wird dieses Feature wohl deaktiviert. Egal, es hat funktioniert.

Nach dem Ausfüllen kann das PDF auf die Website von Calligraphr geladen werden.

Die Buchstaben werden tatsächlich umgewandelt und nun verstehe ich auch das Geschäftsmodell 🙂 Die ersten 75 Buchstaben sind kostenlos, danach muss man etwas bezahlen. Das finde ich fair, kann ich doch vorher ausprobieren ob alles funktioniert.

Nachdem ich mich schweren Herzen für 75 Buchstaben entschieden habe (Ziffern, Klein und Grossbuchstaben und Umlaute) kann ich den Font erstellen.

Ich sehe meine Handschrift im Vergleich zu anderen Fonts und stelle fest, dass ich die Zeichen viel zu klein gemalt habe. Also gleich nochmal.

Jetzt haben die Zeichen die richtige Grösse und mir wird ein .ttf und ein .otf Font zum Download angeboten.

Fonts auf der Website einrichten

Theoretisch ist die Sache ganz einfach. Die Font Dateien müssen in mein Webhosting geladen werden und ich muss in der CSS Datei meines WordPress festlegen, dass ich nun meinen neuen Font verwenden möchte. Hatte ich gesagt, dass ich ein iPad nutze? Nun könnte ich eine FTP App downloaden (vermutlich kostenpflichtig) oder die Novatrend Website nehmen. Im cPanel gibt es einen Dateimanager der sehr gut funktioniert. Ich lege einen Ordner font an und lade den hagen-regular.ttf dort hinein.

Auf der SelfHTML Website zum Thema CSS/Eigenschaften/Schriftformatierung/@font-face ist gut erklärt, welche Befehle man benötigt um die Font Datei einzubinden.

In WordPress füge ich die entsprechenden Befehle im Customizer hinzu und bin überrascht, wie gut das funktioniert (Mein Blog). Die Font Datei ist übrigens 18kB gross.

Das Ganze sieht dann schon irgendwie unheimlich aus, weil ich die Schrift tatsächlich als „Meine Schrift“ identifizieren kann. Auch habe ich schon sehr lange keine längeren Texte mehr per Hand geschrieben. Nun ist das ja auch keine zusammenhängende Handschrift, sondern nur eine Druckbuchstaben Schrift, aber mit ein wenig Mühe müsste auch eine echte Handschrift mit dieser Methode klappen.

Blog Post schreiben

Was nun noch bleibt, ist das alles aufzuschreiben, Screenshots zu machen und ins Novatrend Blog bringen. Das MacBook zeigte immer noch den Laufbalken und ich versuchte alle möglichen Formen des Neustarts ([cmd] + V, [cmd] + [Option] + [P] + [R], und ähnliches). Bisher leider ohne Erfolg.

[UPDATE] Es war möglich ein Backup einzuspielen und mittlerweile funktioniert er wieder.

Die WordPress App für iOS

Also installierte ich die WordPress App für iOS, verband sie mit dem Novatrend Blog und schrieb den Blog Post damit. Das ging super und ich werde das öfter machen. Die WordPress App enthält keinen Gutenberg Editor und funktioniert sehr stabil und unauffällig – ich bin beeindruckt. Screenshot gehen auf dem iPad einfach von der Hand und lassen sich gleich zuschneiden – sehr praktisch.

Fazit

Das MacBook hat sich immer noch nicht für das Update entschieden und ich werde es wohl neu aufsetzen müssen :(.
Aber die Sache mit der Schrift und dem iPad hat grossen Spass gemacht.


tl;dr: Du kannst ganz einfach deine Handschrift als Font in deine Website einbinden


Beitrag veröffentlicht

in

, , ,

von

Kommentare

5 Antworten zu „Die eigene Handschrift als Font auf der Website“

  1. Avatar von Sofasophia

    Tolle Sache, der Calligraph. Und die WordPressapp eh auch. Ich arbeite sogar auf dem iPhone mit der App, seit Jahren. Nach anfänglichen Schwierigkeiten und regelmäßigen Abstürzen ist sie inzwischen richtig gut geworden, mit selbstgehosteten ebenso wie mit WordPress-com-Seiten nutzbar …
    Schön, dass du auch so viel Spaß mit dem fonten hast 🙂

    1. Avatar von Mia
      Mia

      Leider ist der Calligrapher im mobilen Browser einfach mal gar nicht nutzbar. Layout komplett zerschossen. Für Leute wie mich, die ausschließlich vom Smartphone aus arbeiten und den Rechner abgeschafft haben leider blöd. Aber guter Artikel! Nützliche Tipps trotzdem!

  2. […] Auch wenn dieses Beispiel sehr einfach gewählt ist, so kannst du mit zusätzlichem CSS sehr weitgehende Änderungen machen. Hier ein Beispiel mit der eigenen Handschrift als Font. […]

  3. […] ist, habe ich ohne zu zögern mein privates Blog mit meiner Handschrift versehen (Die eigene Handschrift als Font auf der Website). Ich dachte, ganz naiv, wer das nicht mag … kann ja … reader mode … und so […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert