{"id":705,"date":"2009-11-14T20:23:30","date_gmt":"2009-11-14T19:23:30","guid":{"rendered":"http:\/\/hjacob.com\/blog\/?p=705"},"modified":"2009-11-14T20:33:29","modified_gmt":"2009-11-14T19:33:29","slug":"font-face-beliebige-schriften","status":"publish","type":"post","link":"https:\/\/hjacob.com\/blog\/font-face-beliebige-schriften\/","title":{"rendered":"Beliebige Schriften mittels @font-face verwenden"},"content":{"rendered":"<p>Seit Version 3.1 unterst\u00fctzt der Firefox das von den Webdesignern lange geforderte CSS-Tag <strong>@font-face<\/strong>. Mit dessen Hilfe lassen sich beliebige Fonts auf Webseiten verwenden. Auf diesem Blog werden die \u00dcberschriften zum Beispiel in einer Handschrift namens &#8222;<a href=\"http:\/\/www.seanjohnson.net\/portfolio\/fonts\/hand-of-sean\/\" rel=\"external\" title=\"Der von mir im @font-face verwendete Font: Hand of Sean\">Hand of Sean<\/a>&#8220; angezeigt (zumindest zu dem Zeitpunkt als dieses Post geschrieben wird). <\/p>\n<p>Nachdem Firefox nachgezogen hat, wird @font-face nun von den wichtigsten Browsern unterst\u00fctzt &#8211; als die w\u00e4ren:<\/p>\n<ul>\n<li>Firefox (seit Version 3.1)<\/li>\n<li>Safari (seit Version 3.1)<\/li>\n<li>Internet Explorer (ab Version 4)<\/li>\n<li>Opera (ab Version 10)<\/li>\n<\/ul>\n<p>Google&#8217;s <b>Chrome<\/b> soll in der kommenden Version 3 ebenfalls @font-face unterst\u00fctzen. Der Netscape Navigator ist damit der einzige prominente Browser der fehlt (Support von @font-face wurde mit Version 6 eingestellt) &#8211; ist aber wohl auch nicht weiter schlimm, weil den heutzutage ja kaum einer mehr benutzt.<\/p>\n<p><!--more Wie man eigene Schriftarten auf einer Homepage einbauen kann --><\/p>\n<h2>Individualit\u00e4t f\u00fcr alle!<\/h2>\n<p>Die Zeit scheint also endlich reif zu sein &#8211; endlich kann man beliebige Schriftarten verwenden, ohne l\u00e4stige Hacks. Fr\u00fcher musste man umst\u00e4ndlich Flash Skripte einbetten um der Seite ein bisschen Individualit\u00e4t zu verleihen &#8211; oder gar extra PHP Scripts, die dynamisch die \u00dcberschriften (o.\u00e4.) generieren und diese dann als Grafiken ausgeben. Nein nein, diese Zeiten sind jetzt zum Gl\u00fcck vorbei.<\/p>\n<h2>@font-face im Einsatz<\/h2>\n<p>Und so verwendet man die eigenen Fonts. Ich poste einfach mal den Code den ich verwende. Es ist empfehlenswert, die @font-face Definitionen ganz <b>zu Beginn der CSS Datei<\/b> zu setzen. Nat\u00fcrlich kann man auch mehrere Fonts einbetten, daf\u00fcr dann einfach mehrere @font-face Tags untereinander definieren.<br \/>\n[sourcecode lang=&#8220;css&#8220;]<br \/>\n@font-face {<br \/>\n font-family:&#8220;Hand&#8220;;<br \/>\n src:url(http:\/\/hjacob.com\/fonts\/handsean.eot);<br \/>\n font-weight:100;<br \/>\n src:url(http:\/\/hjacob.com\/fonts\/handsean.ttf) format(&#8222;truetype&#8220;);<br \/>\n}<br \/>\n@font-face {<br \/>\n&#8230; Hier ggf. einen zweiten Font definieren &#8230;<br \/>\n}<br \/>\n[\/sourcecode]<br \/>\nWie man sieht ist das <i>src<\/i>-Attribut doppelt gesetzt &#8211; das ist n\u00f6tig, damit auch der Internet Explorer den Font anzeigen kann. Dazu sp\u00e4ter mehr.<\/p>\n<p>Das Attribut <b>font-family<\/b> definiert in diesem Fall den Namen, unter dem der Font dann in weiteren Verlauf der CSS Datei verwendet werden kann. In dem Beispiel bekommt der Font den Namen <b>Hand<\/b>.<\/p>\n<p>Dann ist da noch das <b>font-weight<\/b> Attribut &#8211; ich habe die Erfahrung gemacht, dass Safari und Firefox den Font sehr fett anzeigen (sieht fast aus wie <b>bold<\/b>). <i>Font-weight<\/i>=normal brachte keine Hilfe. Man kann allerdings font-weight auch Werte von 100,200,&#8230;,900 geben &#8211; dies entspricht verschiedenen &#8222;Fettgraden&#8220; wobei 100 dann ungef\u00e4hr so aussieht, wie man es aus anderen Programmen gewohnt ist. Unter Umst\u00e4nden trifft das nicht auf andere Fonts zu &#8211; dann kann man das font-weight Attribut nat\u00fcrlich einfach weglassen.<\/p>\n<p>Auf manchen Websites wird noch der Zusatz <i>local(&#8222;&#8230;&#8220;)<\/i> verwendet, also zum Beispiel so:<br \/>\n[sourcecode lang=&#8220;css&#8220;]<br \/>\n&#8230;<br \/>\n src:local(&#8222;Hand of Sean&#8220;) url(http:\/\/hjacob.com\/fonts\/handsean.ttf) format(&#8222;truetype&#8220;);<br \/>\n&#8230;<br \/>\n[\/sourcecode]<br \/>\nDas w\u00fcrde ich allerdings nicht empfehlen, weil es dazu f\u00fchrt, dass Firefox Benutzer gefragt werden, ob Sie den benutzt Font lokal installieren m\u00f6chten. Mit dieser Aufforderung d\u00fcrften einige Casual User \u00fcberfordert sein und auch Leute die t\u00e4glich im Netz surfen, werden nicht gern von l\u00e4stigen Javascript Dialogen \u00fcberfallen. <\/p>\n<h2>Und nun?<\/h2>\n<p>Der Font ist eingebettet, jetzt muss man ihn nur noch verwenden. Das geht wie gewohnt \u00fcber das <b>font-family<\/b> Attribut bei den CSS Definitionen.<br \/>\n[sourcecode lang=&#8220;css&#8220;]<br \/>\nh1 { font-family:&#8220;Hand&#8220;,Georgia,Serif; }<br \/>\n[\/sourcecode]<br \/>\nW\u00fcrde also den eingebetteten Font f\u00fcr die H1 \u00dcberschriften verwenden. Als Fallback wird Georgia oder alternative serife Fonts angegeben, die dann verwendet werden, wenn der Browser das Einbetten nicht erlaubt oder die Font-Datei nicht gefunden werden kann.<\/p>\n<h2>Die Internet Explorer Extrawurst<\/h2>\n<p>Wie so oft ben\u00f6tigt der Internet Explorer ein bisschen mehr Aufmerksamkeit. Dieser unterst\u00fctzt n\u00e4mlich keine Truetype Fonts. Daher muss man den TTF Datei in eine EOT Datei umwandeln. Das kann man \u00fcber verschiedene Wege bewerkstelligen, ich finde den <a href=\"http:\/\/onlinefontconverter.com\/\" rel=\"external\" title=\"@font-face - TTF Font in EOT Font umwandeln\">Online Font Converter<\/a>  am komfortabelsten (keine Installation notwendig!).<\/p>\n<p>Diese EOT Datei wird dann wie in dem obigen Beispiel eingebaut. <\/p>\n<h2>Eingebettete Fonts und Schatten<\/h2>\n<p>Mit der ein oder anderen Einschr\u00e4nkung, lassen sich die eingebetteten Schriften auch mit anderen CSS Effekten verkn\u00fcpfen. So zum Beispiel auch <b>text-shadow<\/b> &#8211; hier ein Beispiel um einen leichten gr\u00e4ulichen Schatten einzuf\u00fcgen:<br \/>\n[sourcecode lang=&#8220;css&#8220;]<br \/>\nh1 {<br \/>\nfont-family:&#8220;Hand&#8220;,Georgia,Serif;<br \/>\ntext-shadow:1px 1px 3px #999;<br \/>\n}<br \/>\n[\/sourcecode]<br \/>\nWie gesagt, man darf sich nicht wundern, wenn der ein oder andere Browser bei manchen Kombinationen schlapp macht. So hat zum Beispiel Safari Probleme bei der Verwendung von <b>text-transform<\/b> und eingebetteten Fonts.<\/p>\n<h2>Noch ein paar Links zu @font-face<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.alistapart.com\/articles\/cssatten\" rel=\"external\" title=\"Die Jungs von A List Apart zum Thema @font-face und weiteren CSS Tricks\">A List Apart &#8211; CSS @ Ten: The Next Big Thing<\/a><\/li>\n<li><a href=\"http:\/\/webfonts.info\/wiki\/index.php?title=%40font-face_browser_support\" rel=\"external\" title=\"@font-face - Details zu den Browsersupport\">webfonts.info &#8211; @font-face browser support (<i>Details zum @font-face Support der einzelnen Browser<\/i>)<\/a><\/li>\n<li><a href=\"http:\/\/onlinefontconverter.com\/\" rel=\"external\" title=\"Online Font Converter\">Der Online Font Converter<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Der @font-face CSS Tag wird endlich von allen wichtigen Browsern unterst\u00fctzt und die Zeit ist reif, beliebige Fonts auf Webseiten zu verwenden!<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,236,36,13,3],"tags":[366,77,231,233,17,235,234,367,232],"_links":{"self":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/705"}],"collection":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/comments?post=705"}],"version-history":[{"count":3,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":708,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/705\/revisions\/708"}],"wp:attachment":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/media?parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/categories?post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/tags?post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}