Wie sieht der beste Weg aus eine Schrift in einer Webseite einzubinden?
von raaico Newbie vor über 3 Jahren
Hallo,
Ich habe schon edliche Seite durchprobiert aber immer wieder hat es nicht geklappt mit dem Einbinden.
Als Grundlage habe ich eine .ttf Datei und da ich nicht immer ein Bild einfügen will würde ich mich freuen wenns endlich mal mit der .ttf datei klappen würde.
Danke schonmal
Nachträglich bearbeitet am 26.01.10 13:30
9 Antworten
TEAM
4 Punkte
von t.quensen Geek vor über 3 Jahren
Der “bulletproof @font-face Syntax” wäre hier die passende Methode. Dafür musst du die Schrift als eot und zusätzlich als otf oder ttf vorliegen haben.
Entsprechende Tools zum konvertieren gibt es im Netz.
Das funktioniert in IE6+ sowie aktuellen Versionen von Firefox, Opera, Safari und Chrome.
Nachträglich bearbeitet am 26.01.10 13:29
Code
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}
Kommentare
-
vor über 3 Jahrenb.e.n: Wobei man sich vorab noch informieren sollte, ob man dadurch nicht gegen die Nutzungsbedingungen des Schriftenherstellers verstößt. Z.B. im Fall von Linotype Fonts siehe Punkt 1.2 unter http://www.linotype.com/de/2061-28225/nutzungsbedingungenfrschriftensoftwarendashlinotypeeula.html
von micha Nerd vor über 3 Jahren
Hier ist ein hilfreicher Editor für die ganzen Font-Face Sachen:
http://www.fontsquirrel.com/fontface/generator
Ansonsten hilft dir denke ich auch das gute alte sIFR, obwohl es so langsam deprecated wird:
http://www.mikeindustries.com/blog/sifr
Nachträglich bearbeitet am 26.01.10 13:29
von fnagel Geek vor über 3 Jahren
Eine weit verbreitete, cross-browser Lösung mit guter Performance ist Cufon (basiert auf HTML5 und SVG).
http://wiki.github.com/sorccu/cufon/about
Sozusagen der moderne Nachfolger von http://www.mikeindustries.com/blog/sifr/ was zuvor Branchenstandard war.
Nachträglich bearbeitet am 26.01.10 13:29
Kommentare
-
vor über 3 Jahrenscuba303: cufon kannst du aber lizenz probleme bekommen…
http://thinkclay.com/technology/cufon-sifr-flir
TEAM
2 Punkte
von macx Alpha Geek vor über 3 Jahren
Ich kann dir nur abraten von Methoden, die nicht @font-face heißen. Die führen oftmals zu Problemen oder sind nur müßig zu handhaben. Nutzt du @font-face solltest du in jedem Fall die Rechte der Fontdatei abklären, denn durch die Einbindung ist dieser Font frei downloadbar, was bei den meisten Fonts bisher nicht erlaubt ist.
Nachträglich bearbeitet am 26.01.10 13:30
Kommentare
-
vor über 3 Jahrenfnagel: Kannst du das begründen? Gerade sifr war lange quasi Standard. Und wie du schon selbst schreibst wird @font-face nicht cross browser supported. Das Problem mit der Lizenz haben wir eh überall.
-
vor über 3 Jahrenmacx: Mein Standard all die Jahre war: Nimm das, was da ist und versuche nicht auf Krampf dem Kunden seine „schönen Fonts“ zu implementieren.
Hier sind sonst ein paar Infos zur aktuellen Situation der Webfonts: http://praegnanz.de/weblog/webfonts-vortrag-und-ein-paar-aktuelle-links
von raaico Newbie vor über 3 Jahren
Also danke euch erstmal ich habs auf jeden fall geschafft es erfolgreich einzubinden
wegen der lizens muss ich nochmal schauen aber denke mal da ichs ja eh kostelos geladen habe aber sicher ist sicher ne^^
eine frage aber noch aufm FireFox und IE hab ichs getestet alles wunderbar aber gehts auch unter linux und Mac? bzw sollte es da gehen
habe eone .eot und .ttf datei
von mklappstuhl Nerd vor über 3 Jahren
t.quensen hat das schon sehr gut erkärt.
Momentan wird @font-face noch nicht von allen Browsern unterstützt aber wie immer gibt es Work-arounds mit denen man das selbe erreichen kann.
Jonathan Snook hat auch einen sehr guten Einstieg in die Thematik verfasst.
“Becoming a Font Embedding Master” (siehe Links)
(Er benutzt auf seiner Seite auch @font-face, es lohnt sich also einen Blick in die Sourcen zu werfen.)
Falls du noch Schriftarten suchst, die du legal mit @font-face benutzen kannst schau dir mal Fontsquirrel an. Dort werden nutzbare Schriften mit einem Badge versehen. (siehe Links)
Eine geringere Auswahl, dafür aber höher Qualität findest du unter The League Of Movable Type. (siehe Links)
Viel Erfolg, und zeig mal das Ergebnis wenn es fertig ist.
P.S.: Es ist übrigens aus Performance Gründen zu empfehlen Zeichen die nicht gebraucht werden aus dem Zeichensatz zu entfernen.
Nachträglich bearbeitet am 27.01.10 19:15
von raaico Newbie vor über 3 Jahren
logisch werde mal posten wenns soweit ist aber da es ne hausaufgabe vonner berufsschule ist weiß ich nicht wie lange die brauchen um des ins netz zu stellen aber ich werde dran denken
danke auf jedenfall für die links werde mir die sofort zu gemüte ziehen
von raaico Newbie vor über 3 Jahren
Jop Page ist fast fertig fehlen nur noch kleinigkeiten und ch überlege mir ob ich dann doch noch ne andere Schriftart einbinde und nicht nur die überschriften in einer speziellen schrift habe aber mal sehen das hat noch n bissel zeit auf jeden fall habe ich mir einen kostenlosen webserver gesucht und die seite erstmal online gestellt
Code hat super geklappt danke nochmal an alle die mir die tips gegeben haben
falls euch sachen auffallen könnt ihr es mir gerne sagen die feedbackseite is leider noch nicht fertig muss mich da als php noob noch bissel rein fummeln aber das wird schon
Nachträglich bearbeitet am 16.02.10 14:28
Code
@font-face
{
font-family: "Bleeding Cowboys";
src: url('Bleeding_Cowboys.eot');
src: local('Bleeding_Cowboys'), url('Bleeding_Cowboys.ttf') format('truetype');
}
von chaos.a.d Heavy User vor über 3 Jahren
Ich würde spontan vermuten das man das so einfach mit ttf-datei nicht lösen kann. Ich würde die Texte halt per Grafiken ausgeben. So wie das viele Blogs machen.
Ich wage mich zu erinnern das ich mal einen Artikel gelesen habe wo so etwas möglich sein soll, aber da will ich mich nicht zu weit aus dem Fenster lehnen, weil mir absolut keine andere Möglichkeit bekannt ist.
Nachträglich bearbeitet am 26.01.10 13:29
Antwort schreiben
Um eine Antwort schreiben zu können, sollest du dich zuvor anmelden.









