Probleme beim Einbetten von Schriften per CSS-Funktion

  • Hallo, ich arbeite an einen kleinen Privaten Projekt und wollte nun eine Schrift aus dem Internet nutzen, die habe ich mir dann Kostenlos runtergeladen und in meiner Css so eingebunden:




    Code
    1. @font-face {
    2. font-family: VTKSROCKGARAGEBAND;
    3. src: url("..\fonts\VTKS-ROCK-GARAGE-BAND.woff") format("woff")
    4. url("..\fonts\VTKS-ROCK-GARAGE-BAND.ttf") format("ttf") ;
    5. font-weight: normal; font-style: normal; } }

    und dan wollte ich diese Schrift so nutzen..

    Code
    1. .eigeneschrift{
    2. font-family: VTKSROCKGARAGEBAND;
    3. }

    leider wird die schrift dann nur Kursiv... habe noch nie selbst eine schrift hinzugefügt warum klappt es bei mir nicht..?
    Vielen dank schonmal!

  • In der Hinsicht Schrift einbinden bin ich nicht so bewandert und habe deshalb die Erinnerungen an entsprechende Informationen nicht gesichert im Gedächtnis. Ich weiß auch nicht ob meine Bezeichnungen korrekt sind.


    Meiner Erinnerung nach gibt es vier Schriftformate (woff, ttf, ...), die jeweils nur von unterschiedlichen Browsern verwendet werden können. Deshalb müssen (besser wohl: sollen) alle vier Schriftformate von jeder Schriftfamilie eingebunden werden.


    Bei Bootstrap wird zum Beispiel die Schriftfamilie für Sonderzeichen "glyphicons-halflings-regular" sogar fünffach eingebunden:


    Code
    1. src: url('../fonts/glyphicons-halflings-regular.eot');
    2. src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    3. url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
    4. url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    5. url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    6. }


    In deinem Fall scheint dein Browser zwar eine andere Schriftfamilie zu erkennen, kann aber weder mit woff noch mit ttf etwas anfangen zu können. Deshalb stellt er als Notausgang die Schrift kursiv dar.


    Ruf die Seite mal in verschiedenen Browsern auf und schau, ob die Schriftfamilie in einen oder mehreren anderen wie erwartet angezeigt wird.


    Wegen der immer wieder auftretenden Schwierigkeiten werden deshalb die Google-Fonts empfohlen. Die lassen sich einfacher einbinden oder können als Fallback verwendet werden. Das mit meist schöner als eine kursive Darstellung der Standardschrift.