Schlagwort-Archive: @font-face

Eigene Schriftart auf Homepage einbinden

CSS, Programmieren, , ,

Im folgenden Beispiel möchte ich zeigen wie eine eigene Schriftart in einer HTML-Datei eingebunden werden kann. Verwendet habe ich hierzu die Schriftart Waltograph. Das Resultat kann hier angesehen werden: Beispiel HTML-Datei mit eigenem Fonts.
Funktion wurde unter folgende Browsern getestet .

Browser: Ergebnis:
Firefox 3.6.12 funktionsfähig
Internet Explorer 8 Nicht funktionsfähig
Opera 10.10 funktionsfähig
Google Chrome 7.0.517.44 funktionsfähig

Code der CSS-Datei:

/* CSS Document */
@font-face {
  	font-family: "Waltograph";
  	src: url(waltograph42.otf) format("opentype");
}
body {
   padding:0;
   margin:0;
   text-align:center;
   font-family:Verdana, Arial, Helvetica;
   color:#666666;
   font-size:15px;
}
.meinFonts {
   padding:0;
   margin:0;
   text-align:center;
   font-family:'Waltograph',Verdana, Arial, Helvetica;
   color:#FF0000;
   font-size:30px;
}

Code der HTML-Datei:

<html>
  <head>
    <title>Hello HTML</title>
    <link rel="stylesheet" type="text/css" href="eigener_font.css">
  </head>
  <body>
    <div class="meinFonts">Da steh ich nun, ich armer Tor! und bin so klug als wie zuvor;</div>
    <p>heiße Magister, heiße Doktor gar, und ziehe schon an die zehen Jahr herauf,</p>
 
    <p>herab und quer und krumm meine Schüler an der Nase herum – </p>
    <p>und sehe, dass wir nichts wissen können!</p>
    <div class="meinFonts">Das will mir schier das Herz verbrennen!“</div>
  </body>
</html>

Hier noch die einzelnen Dateien zum Download:
Der verwendete Fonts: Waltograph
Lizenz des Fonts: Waltograph License
CSS-Datei: CSS
HTML-Seite: Beispiel HTML-Datei