Aus dem Kurs: HTML5 Grundkurs

Web-Fonts

Das letzte Feature, was ich Ihnen zeigen und diskutieren möchte, ist das Thema Webfonts, einfach weil das etwas ist, was häufig im Einsatz ist, und wo es auch neuere Entwicklungen oder Aspekte gibt, die vielleicht auch diskutiert werden müssen. Zeige es Ihnen also sowohl von funktionaler als auch von einsatztechnischer Sicht aus. Der Browsersupport ist ganz gut, das heißt, alles ab Firefox 3.5 -- nun gut -- unterstützt das und sogar IE 9 und natürlich höher, also wunderschöne Sache. Worum geht es? Ich kann Fonts entsprechend darstellen. Es gibt jetzt zum Beispiel bei Google eine Reihe von Fonts unter google.com/fonts. Hier sehen wir also eine Liste von mehreren... Können auch nach Sachen suchen und ich wähle jetzt einfach mal irgendwas aus, was irgendwie witzig aussieht. Wie wäre es mit Indie Flower? Füge ich mal hinzu. Und dann nehmen wir noch irgendwas anderes. Wie wäre es denn mit...? Die haben alle so merkwürdige Namen. Nehmen wir hier mal Amatic SC. So. Und jetzt habe ich zwei Schriftarten ausgewählt und kann das jetzt in meinen Code mit übernehmen. Gibt es mehrere Möglichkeiten, entweder per link-Attribut, wie hier zu sehen, oder per @import-Attribut. Die URL, die dann kommt, ist aber dieselbe und hier unten wäre dann die Art und Weise, wie man das CSS-technisch einfügt. Nun gut, ich kopiere das einfach mal in die Zwischenablage und füge es dann im Editor ein. Zuvor muss ich natürlich noch eine neue Datei erstellen. Ich nenne die mal fonts.html und in dieser fonts.html im head-Abschnitt habe ich dann nicht nur einen title, sondern da kommen dann auch die style-Attribute von vorher hin, respektive das link-Attribut zunächst. Ja, und dann lege ich die entsprechenden Stile mal an, also style-Element, und jetzt brauche ich nur noch irgendwelche Selektoren. Ich würde einfach sagen, ich erstelle zwei Klassen. Eine Klasse heißt .indie und die andere Klasse nenne ich .amatic, weil eben die Font so heißt. So. Und nachdem das geschafft ist, kann ich im body-Bereich einfach mal zwei Absätze testhalber anlegen und der erste Absatz bekommt die Klasse indie, der zweite Absatz bekommt die Klasse amatic und da kommt einfach Text rein, also "Indie Flower" und hier "Amatic SC". Und gespeichert. Im Webbrowser lade ich dann diese Datei, also fonts.html. Dauert ein bisschen, weil er die Schriften lädt und ja, jetzt habe ich hier diese wunderschönen Schriften bei mir direkt angezeigt. Schauen wir mal in den Quellcode und wir sehen, dass das eins zu eins das, was wir eingetragen hatten, allerdings, wenn wir uns mal anschauen, was hier überhaupt kommt, sehen wir, dass der Google-Server uns einfach eine entsprechende CSS-Anweisung schickt und letzten Endes von fonts.gstatic.com entsprechend auch diese Fonts im WOFF-Format herunterlädt und dann uns so die entsprechenden Stile anlegt. Und das ist gleichermaßen auch ein potenzielles Ärgernis oder gar Problem, und zwar im Hinblick auf Datenschutzgrundverordnung. Es gibt einige, die die Meinung vertreten, dass ja hierdurch auch beispielsweise die IP-Adresse, welche ja interessanterweise wohl als persönliches Merkmal angesehen wird, an den Google-Server übertragen wird, ohne dass der Nutzer etwas dagegen tun kann oder vorher seine Zustimmung geben kann. Das mag also theoretisch ein Verstoß sein. Jetzt bin ich kein Jurist und Sie müssen in dem Fall unbedingt immer die Meinung von einem Profi beiziehen, aber wenn Sie solche Fonts einsetzen -- und das können Sie ja von Hand machen, aber es gibt ja auch viele Frameworks oder Templates, die so etwas machen --, lassen Sie das gegebenenfalls prüfen. Ich habe da keine abschließende rechtliche Meinung zu und auch nicht die Kompetenz. Wollte da nur drauf hinweisen und deswegen haben wir uns diese Webfonts auch angeschaut, weil eben letzten Endes ja dieser Font vom Server irgendwo geladen wird. Jetzt können Sie natürlich hergehen und sagen: "Gut, nehme ich einfach einen Font, den ich bei mir auf dem Server abspeichere." Das ist dann wohl der bessere Weg. Allerdings müssen Sie aufpassen. Wenn Sie so einen Font beziehen, schauen Sie nach, ob Sie das dürfen, also den Font auf den eigenen Server legen, oder ob Sie den immer vom Originalserver beziehen müssen. Das ist also eine Sache, die unbedingt geklärt werden muss. Ist also jetzt weniger so ein technisches Problem, sondern so ein organisatorisch- rechtliches Problem.

Inhalt