TryIt Editor v2.0 - CSS @font-face Rule

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      @font-face {
      font-family: 'myFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
      url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
      div {
      font-family: myFont,sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für @font-face</h2>
    <div>
     Die CSS-Regel @font-face legt eine benutzerdefinierte Schriftart, mit der ein Text angezeigt werden soll, fest. Die Schriftart kann entweder von einem Remote-Server oder einer lokal installierten Schriftart auf dem eigenen Computer des Benutzers geladen werden. Wenn die Funktion local() zur Verfügung gestellt wird, die einen Fontnamen angibt, nach dem auf dem Computer des Benutzers gesucht werden soll, und der Benutzeragent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die mit dem Befehl url() angegebene Fontressource heruntergeladen und verwendet..
    </div>
    <p>
     @font-face at-rule kann nicht nur auf der obersten Ebene eines CSS verwendet werden, sondern auch innerhalb jeder bedingten CSS-Gruppe der Regel nach.
    </p>
  </body>
</html>