Über den Author / Internet / Eigene Schriftart in HTML Page einbauen

Eigene Schriftart in HTML Page einbauen

~1 Min. Lesezeit

Oft möchte man eine Schriftart auf einer Webseite verwenden, die bei den Usern nicht lokal installiert ist. Hier hat man die Möglichkeit die Schriftart auf dem Web zu speichern und diese im CSS File einzubinden.

Als Beispiel im CSS:

a:visited, h1.art-logo-name a:hover
{
  text-decoration: none;
  font-family: Shanghai,Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
}

Hier ist eingebunden, das der Client den Text in der Schrift Shanghai anzeigen soll.
Hat der Client die Schrift noch nicht lokal installiert, wird er den Text als Arial sehen.

Also Uploaded man die Schrift auf den Webserver und definiert folgende Zeile im CSS File:

@font-face { font-family:Shanghai; src:url(shanghai.ttf); }

Ab sofort wird anschliessend die Schrift bei Firefox angezeigt. Doch noch nicht unter dem Internet Explorer.
Dazu ladet man das Freeware Tool WEFT3 von Microsoft herunter, installiert und startet diese.

Der Name und Mailadresse wo es immer fragt, kann irgendwie ausgefüllt werden und macht nichts zur Sache. Anschliessend kann man irgendeine HTML Datei auswählen und mit 2 Mal Weiter zu der Ansicht:

Hier kann man alle Schriften auswählen und „Don’t embed“ auswählen. Weiter geht es mit „Add…“ und wählt die Schriftart aus, welche man auf der Webseite nutzen möchte.

no embedding font
Hier liegt auf der Schriftart ein Schutz, dass diese nicht verwendet werden kann. Dies kann zwar mit dem Font Creator unter Format -> Settings -> General -> „Font embedding – Licensing right“ auf Edit und dann nur das erste Häcklein.

Die Schrift speichern und neu ins System laden, anschliessend beim WEFT über Tools -> recreate Fond DB die gespeicherten Werte neu einlesen.

Bitte beachtet das dieses Vorgehen gegebenenfalls strafbar ist und daher nicht angewandt werden darf und man deshalb die Zustimmung des Copyright Owner haben muss!

Sobald man 2x auf Weiter geklickt hat, wird eine neue Datei mit der Endung EOT angelegt.

Der Rest kann man abbrechen und wird nicht benötigt. Diese EOT Datei ist alles was man benötigt.
Diese Uploaden wir nun auch auf unseren Webserver und ergänzen das CSS File zusätzlich mit der Zeile:

@font-face { font-family:Shanghai; src:url(SHANGHA0.eot); }

So hat man anschliessend 2 Zeilen mit ‚@font-face‘ Einträgen untereinander, Einen für Firefox (inkl. Opera & Chrome) und der Andere für den Internet Explorer.

About Stefan

avatar
Ein männlicher IT Nerd, durchstöbert das Web nach speziellen Gadgets, unentbehrlicher Software und Alles was man im IT Sektor nicht verpassen darf.Immer hilfsbereit wenn Probleme zu lösen sind oder das Unmögliche umgesetzt werden sollte.

Weitere interessante Artikel

PHP Trojaner (Teil 3: Spamsender Infektion)

~1 Min. LesezeitSpam ist ein grosses Problem der heutigen Zeit, doch wer verschickt Spam und …

PHP Trojaner (Teil 2: Uploader Infektion)

~1 Min. LesezeitPHP Trojaner sind beliebt, denn oft werden solche Infektionen übersehen und überstehen Jahre …

Ein Kommentar

  1. avatar
    Tafelrunde Network

    Super hat gut funktioniert.
    Der IE9 hat sogar schon ohne die eot alles richtig angezeigt.

Schreibe einen Kommentar

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

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg