IT Blögg

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.

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.