Eigene Schriften mit @font-face in forumieren-Foren benutzen

Guten Morgen zusammen,

anlässlich dieses Themas hier kurz der Code und ein Tutorial, wie man eigene Schriften einfügt. Eigentlich wollte ich noch unter dem Thread antworten, aber ich denke, nach der Editierung von @Keks' Beitrag (da stand, das man was dazu schreiben kann, wenn man die Lösung kennt) ist es mir jetzt wohl  laut Regeln nicht mehr "erlaubt".
Wie man anhand des Aufwands und nötigen Kenntnissen erkennen wird, ist Google Fonts oder Typekit für ein Hobbyforum eher die empfohlene Lösung. Wie man eigenen Webspace benutzt, werde ich hier aber nicht erklären, die Kenntnisse davon sind jedoch nötig, um das Tutorial abzuschliessen.

Copyright überprüfen.
Wenn man keine Rechte an der Benutzung der Schrift hat, lädt man nicht im Internet hoch.

Browserkompatibilität
Um Browserkompatibilität (zeige die Schrift auf möglichst vielen Browsern und Versionen an) zu gewährleisten, empfehle ich diesen Generator von fontsquirrel, da dadurch auch bereits das CSS generiert wird und man die verschiedenen Dateitypen erhält. Als Beispiel nutze ich die Schriftdatei aus dem oben verlinkten Thread. Daher muss dann "death_in_the_shadow" mit dem eigentlichen Schriftnamen ersetzt werden.

- Option "Expert" auswählen.
- Bei "Font Formats" das Häkchen bei TrueType, EOT Lite, SVG und WOFF setzen.
- Bei "Agreement" das Häkchen setzen. Hiermit bestätigt man, dass man die Rechte zur Benutzung an der Schrift hat.
- Auf den Downloadbutton klicken.

Anschliessend folgende Dateien aus dem gedownloadeten Ordner auf einen Server hochladen:
death_in_the_shadowwebfont.eot
death_in_the_shadowwebfont.svg
death_in_the_shadowwebfont.ttf
death_in_the_shadowwebfont.woff


Das CSS
Im gedownloadeten Ordner befindet sich in der Datei 'stylesheet.css' folgender Code:

Code:

@font-face {
    font-family: 'death_in_the_shadowregular';
    src: url('deathintheshadow-webfont.eot');
    src: url('deathintheshadow-webfont.eot?#iefix') format('embedded-opentype'),
         url('deathintheshadow-webfont.woff') format('woff'),
         url('deathintheshadow-webfont.ttf') format('truetype'),
         url('deathintheshadow-webfont.svg#death_in_the_shadowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Das ist der fast fertige CSS-Code. Der Link zur Schrift muss noch abgeändert werden.
Das würde dann zum Beispiel so aussehen:

Code:

src: url('http://www.serveradresse.com/deathintheshadow-webfont.eot');

Wichtig ist auch, dass der Name der Schrift immer zwischen Gänsefüsschen ist.

Schrift ausserhalb des Ursprungsservers anzeigen lassen
Das leidige Thema des "access-control-origin" Headers. Wenn man auf eine Schrift von einem anderen Server zugreifen will, muss man diesem Server (eher Chrome und Co., die sperren das Ganze) sagen, dass das eigene forumieren Forum die Schrift haben darf. Google Fonts und Typekit machen das bereits, aber wenn man wie im oben verlinkten Thread die Schrift selbst hochgeladen hat, muss man das auf dem Server ebenfalls regeln.

Dazu geht man zur ".htaccess" Datei (falls sie nicht existiert, muss man sie erstellen) auf dem Server und fügt folgenden Code an:

Code:

<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://www.deine_forum_addresse.forumieren.de"
  </IfModule>
</FilesMatch>

Credits: Stackoverflow bezüglich des Codes für .htaccess