Web Fonts mit @font-face in CSS3 usign Google API

Die Idee das dass Schriftarten Server seitig intrigiert werde ist schon etwas älter . Mit CSS3 und @font-face ist dies nun aber möglich, es kommt aber noch zu erheblichen Kompatibilitäts-Problemen. Abhilfe schafft hier die Google Font API.

  • http://code.google.com/webfonts










zuerst lade ich eine Schriftart via CSS im header meiner Seite

(bsp. die Schriftart "Cantarell" )

  • http://code.google.com/webfonts/family?family=Cantarell#code
<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
Nun kann man schon seinen CSS Code  bearbeiten und die Font Intrigieren
h1 { font-family: 'Cantarell', arial, serif; }
Das wahr eigentlich auch schon alles sollte mit Goolge ohne Probleme laufen. Eine weitere Variante wäre der Google WebFont Loader der dies mit einem Java Script löst.
   
<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>
Nun kann man auch hier beginnen die Font via CSS zu laden. In diesem Fall bringt uns Google 2 classen mit wf-inactive and wf-active.
<style type="text/css">
  .wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
    font-family: serif
  }
  .wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
    font-family: 'Tangerine', serif
  }
  .wf-inactive h1 { // Show heading in serif font until fonts have loaded.
    font-family: serif;
    font-size: 16px
  }
  .wf-active h1 { // Show heading in Cantarell when the fonts have loaded.
    font-family: 'Cantarell', serif;
    font-size: 16px
  }
</style>

0 Kommentare:

Kommentar veröffentlichen