Artikel merken:

Fontwähler mit Google Web Fonts API

Ich habe den Fontwähler auf Grundlage der Google Web Fonts API und des Google Font Anwendungsbeispiels von somadesign.ca geschrieben. Alles was für den Fontwähler notwendig ist, ist ein wenig Javascript bzw. jQuery und dein persönlicher API-Key.

Also los gehts. Der ganze Code wird in einer Javascript Funktion ausgeführt wenn das HTML-Dokument vollständig geladen ist:

  				jQuery(document).ready(function($) { 
                    

target ist das Element bzw. der Text der HTML-Seite auf dem sich die Fontwahl auswirken soll. Auf dieser Seite zeigt target auf die h2-Überschrift mit der id "fonts". Hier können natürlich auch mehrere Elemente bestimmt werden. Die Variable api enthält den persönlichen API-Key den du von Google bekommst. Das Array gFontList wird später die Font-Liste enthalten.

			    var target = $("#fonts"); 
			    var api = 'https://www.googleapis.com/webfonts/v1/webfonts?' +          
			              'key=YOUR-API-KEY&sort=style';
			    var gFontList = [];
                    

Jetzt wird die Abfrage vorbereitet. Hier wird definiert, was passieren soll, wenn die Font-Abfrage erfolgreich ausgeführt worden ist. Im Erfolgsfall soll nämlich die Funktion der Variable onSuccess aufgerufen werden.

			    var onSuccess = function(data) {
			      if(data.kind === "webfonts#webfontList") {
			        $.each(data.items, function(index, value) {
			          if(value.variants.length > 1) {
			            gFontList.push(value);
			          }
			        })
			        renderFontList(gFontList)
			        grabFonts(gFontList)
			      } else {
			        onError()
			      }
			  }
                    

onError enthält die Javascript-Funktion, welche im Fall eines Fehlers bei der Font-Abfrage aufgerufen wird.

			  var onError = function() {
			    target.html("Error loading webfonts.")
			  }
                    

Nachdem das Handling im Erfogs- und Misserfolgsfall definiert ist, können die Fonts per Ajax geholt werden. Ist die Abfrage erfolgreich verlaufen, geht es weiter mit der Funktion in der Variable onSuccess. Ist die Abfrage gescheitert, soll die Funktion in der Varibale onError aufgerufen werden:

  			  //*
			  $.ajax({
			    url : api,
			    type : "GET",
			    dataType : "jsonp",
			    success : onSuccess,
			    error : onError
			  })
			  //*/
                    

War die Abfrage erfolgreich, können die Fonts für die Anzeige aufbereitet werden. Hier wird das HTML-Template vorbereitet und der Listener wird implementiert. Der Zieltext soll bei Auswahl einer Schrift in dieser dargestellt werden.

			  function renderFontList(fonts) {
			    var template = "";
			    var html = "";
			    var fontData;
			
			    //alle Schriften sollen im Dropdown aufgelistet werden
			    $.each(fonts, function(i, val) {  
			      html += templatify(template, {
			        'name' : val.family
			      })
			    })
			    target.html(html);
			    
			    //ändern des Fonts durch Auswahl der Schrift
			    $("select").change(function(){
			      $("select option:selected").each(function () {
			        
			        //Schrift die aus dem Dropdown ausgewählt wurde
			        fontSelected = ($(this).text());
			        
			        //zuweisen des CSS-Styles um die Schrift zu ändern
			        $(".fontMod").each(function (ii, m) {
			          m.style.fontFamily = fontSelected;
			        })
			      });
			    });
			  }
                    

Die Funktion templatify wird aus der Funktion renderFontList aufgerufen und ist dafür zuständig jede Schrift als Text im Dropdown darzustellen.

 			  function templatify(html, data) {
			    var r
			    $.each(data, function(i, val) {
			      r = new RegExp('%' + i + '%', 'g')
			      html = html.replace(r, val);
			    })
			    return html;
			  }
                    

grabFonts fügt alle nötigen stylesheet-Informationen in den head-Bereich der HTML-Seite ein um die verschiedenen Fonts darstellen zu können. Schöner könnte man dies noch lösen, indem man nur die Style-Informationen lädt, welche gerade verwendet werden.

			  function grabFonts(fontList) {
			    var base = "http://fonts.googleapis.com/css?family=";
			    var families = []; 
			    var url; 
			    var tail;
			    
			    $.each(fontList, function(i, v) {
			      tail = v.family + ':' + v.variants.join(',')
			      $('').appendTo("head")
			    })
			  }
                    
			  });