stud@work: Eigene Truetype Schrift auf Homepage verwenden

Hallo,

ich habe eine TTF TrueType Schrift und möchte, dass diese quasi vom webserver bereitgestellt wird und nicht auf jeden client installiert sein muss.

wie binde ich diese ttf quasi via css ein?

  
<style type="text/css">  
@font-face { font-family: EQ_StatVIS; src: url(EQ_StatVIS.ttf); }  
</style>  

die ttf liegt im hauptverzeichnis der website.

auf meinem rechner habe ich diese schriftart installiert, deshalb funktioniert die anzeige dort.

warum wird trotzdem, beispielhaft auf dem iPad, eine andere Schrift verwendet?

liegt das am browser?

  1. Hi!
    Ja. Duerfte ne Browser/OS Sache sein. Beim iPad und neueren iPhones weiß ichs nicht genau. den alten konnte man keine Schriften unterscheiben.

    Ansonsten kannst Du dein Font bei Font Squirrel mal in ein @font-face Kit wandeln lassen. Da werden gleich diverse Formate erstellt. Maybe it helps.

    --
    Signaturen sind blöd!
    1. Om nah hoo pez nyeetz, Steel!

      Ansonsten kannst Du dein Font bei Font Squirrel mal in ein @font-face Kit wandeln lassen. Da werden gleich diverse Formate erstellt. Maybe it helps.

      ... und hinterher korrekt einbinden.

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. Hi!

        ... und hinterher korrekt einbinden.

        Ich bilde mir ein, das korrekte CSS wird bei Font Squirrel gleich mitgeliefert.

        --
        Signaturen sind blöd!
        1. hab ich bereits folgendermaßen probiert, erzielt aber keinen effekt.
          hab es in der html integriert und als externe css ausprobiert.
          die 4 verschiedenen Schrifttypen liegen alle im Website-Projekt im Ordner fonts.

            
          @font-face {  
          	font-family: 'EQ_StatVIS';  
          	src: url('fonts/EQ_StatVIS.eot');  
          	/*src: local('EQ_StatVIS'),*/  
          	src: url('fonts/EQ_StatVIS.woff') format('woff'),  
          	url('fonts/EQ_StatVIS.ttf') format('truetype'),  
          	url('fonts/EQ_StatVIS.svg') format('svg');  
          	font-weight: normal;  
          	font-style: normal;  
          }	  
          
          

          trotzdem zeigt er die schrift einfach nicht auf dem iPad an!

          auf computern mit lokal installierter Schriftart zeigt safari und der iBBDemo2 iOS Emulator die Schrift korrekt an.

          kann mir da jemand weiter helfen?
          bzw. muss ich die schrift auf dem iPad installieren? das wollte ich eigentlich vermeiden.

          Grüße

          1. trotzdem zeigt er die schrift einfach nicht auf dem iPad an!

            Educated guess: dein Server sendet einen falschen MIME-Type für SVG-Files - der iOS-Safari reagiert drauf allergisch und ignoriert das File.

            Zudem: sieh dir bitte die Font-Face-Kits von Font-Squirrel an, das Smiley ist dort nicht umsonst.

            1. Educated guess: dein Server sendet einen falschen MIME-Type für SVG-Files - der iOS-Safari reagiert drauf allergisch und ignoriert das File.

              ok, das mit dem MIME-Type versteh ich nicht, da kenn ich mich nicht aus.
              kannst du mit vllt nen tip geben wie ich das iOS mobile konform hinbekomme?

              ich habe Font-Squirrel verwendet um die Schrift zu konvertieren:

                
              @font-face {  
              	font-family: 'EQ_StatVIS';  
              	src: url('fonts/EQ_StatVIS.eot');  
              	src: local('☺'),  
              	url('fonts/EQ_StatVIS.woff') format('woff'),  
              	url('fonts/EQ_StatVIS.ttf') format('truetype'),  
              	url('fonts/EQ_StatVIS.svg') format('svg');  
              	font-weight: normal;  
              	font-style: normal;  
              	}	  
              
              

              Es ziehen sich vom Desktoprechner aus der Safari und IE9 korrekt die schrift und stellen sie auch korrekt dar.

              Leider noch nicht iPad, Firefox und Chrome?

              1. Educated guess: dein Server sendet einen falschen MIME-Type für SVG-Files - der iOS-Safari reagiert drauf allergisch und ignoriert das File.

                ok, das mit dem MIME-Type versteh ich nicht, da kenn ich mich nicht aus.

                Ich meinte den Content-Type im Response Header.

                Ruf einfach mal das SVG-File direkt im Browser auf und sieh dir den HTTP-Header an.

                1. Ich meinte den Content-Type im Response Header.

                  Ruf einfach mal das SVG-File direkt im Browser auf und sieh dir den HTTP-Header an.

                  Sorry, das raff ich immer noch nicht. :)
                  wenn ich das svg file im browser öffne, erscheint ein xml-file.
                  aber mir sagt das gerade nichts?! vllt bin ich auch einfach schwer von begriff.

                  1. @@stud@work:

                    nuqneH

                    Ruf einfach mal das SVG-File direkt im Browser auf und sieh dir den HTTP-Header an.

                    Sorry, das raff ich immer noch nicht. :)

                    HTTP-Header ansehen

                    Qapla'

                    --
                    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                    (Mark Twain)
      2. @@Matthias Apsel:

        nuqneH

        ... und hinterher korrekt einbinden.

        Besser bulletproof.

        Vielleicht mal im Wiki ergänzen.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)