Du hast eine Frage? Stell sie der t3n-Community!

? Beispielfragen

Um selbst eine Frage online zu stellen, melde dich bitte an.

Zur Anmeldung

Wie sieht der beste Weg aus eine Schrift in einer Webseite einzubinden?

12 Punkte

von raaico  Newbie  vor über 4 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 4 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

Melde dich an, um einen Kommentar zu schreiben.

4 Punkte

von micha  Nerd  vor über 4 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

4 Punkte

von fnagel  Geek  vor über 4 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

Melde dich an, um einen Kommentar zu schreiben.

2 Punkte

von macx  Alpha Geek  vor über 4 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

  • fnagel: 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 4 Jahren
  • macx: 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

    vor über 4 Jahren

Melde dich an, um einen Kommentar zu schreiben.

0 Punkte

von raaico  Newbie  vor über 4 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

0 Punkte

von mklappstuhl  Nerd  vor über 4 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

0 Punkte

von raaico  Newbie  vor über 4 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

0 Punkte

von raaico  Newbie  vor über 4 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');
}

-2 Punkte

von chaos.a.d  Heavy User  vor über 4 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.

Zur Anmeldung

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen