Web-Fonts einbinden

Mit Web-Fonts wird es endlich möglich, auf der eigenen Internet-Seite Schriften zu nutzen, die der Besucher nicht auf seinem Rechner installiert hat. Alle modernen Browser unterstützen diese Möglichkeit und Google bietet mit seinen Web-Fonts eine grosse Sammlung von frei verfügbaren Schriften zur Verwendung an.

In diesem Artikel erfahren Sie, wie Sie Goolge Web-Fonts in Ihrem mit weblica erstellten Web-Auftritt nutzen.

Die Google-Fonts

Google stellt einen komfortablen Font-Browser online zur Verfügung, über den Sie rasch und unkompliziert eine passende Schrift aussuchen:

Google Web-Fonts und die DSGVO

Die Verwendung der Google Web-Fonts ist in Bezug auf die DSGVO problematisch, da bei jedem Aufruf von Seiten mit Google Fonts der Browser bei Googles Server anfragt, ob es Änderungen gab an den Schriften oder der CSS-Datei. Damit erkennt Google, von welcher Seite eine Anfrage gesendet wurde und darüber hinaus u.U. Teile des persönlichen Browser-Verlaufs. 
Google Fonts Website

Ein Beispiel: Ohne und mit Web-Fonts

Standard Schrift

web-fonts - beispiel vorher

Cabin Sketch

web-fonts - beispiel nachher
Für obiges Beispiel reichen ein paar Zeilen CSS-Code:

CCS-Code

@font-face {
  font-family: 'Cabin Sketch';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(http://themes.googleusercontent.com/static/fonts/cabinsketch/v6/d9fijO34zQajqQvl3YHRCXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

body {
    font-family: 'Cabin Sketch', sans-serif;
    font-size: large;
}

Und so geht's

Suchen Sie sich in der Font-Sammlung von Google die gewünschte Schrift(en). Wir verwenden im Beispiel die Schrift Cabin Sketch. Klicken Sie dann auf den Quick-Use Link, um den benötigten Code zu erhalten:

Google Fonts - Quick Use

Wählen Sie dann die gewünschten Stile aus:

Google Fonts - Stil waehlen

Scrollen Sie dann auf der Seite runter bis zum Abschnitt "Add this code to your website" gelangen. markeiren Sie nun die URL aus der angezeigten Code-Zeile und kopieren Sie diese in die Zwischenablage:

Google Fonts - URL kopieren

Öffnen Sie diese URL nun im Web-Browser. Darauf sehen Sie den Quelltext für die nötige Font-Definition im CSS. Diesen Code markieren Sie vollständig und kopieren ihn wiederum in die Zwischenablage. Wechseln Sie dann in Ihr weblica Projekt und öffnen Sie dort das Fenster für global hinterlegten CSS-Code (Siehe hierz: Eigenen CSS-Code für ein Projekt hinterlegen). Fügen Sie den Code auf der Registerkarte "Globaler CSS-Code" ein:


Google Fonts - Globaler CSS-Code

Jetzt  haben Sie es schon fast geschafft: der Web-Font steht Ihnen  nun für den gesamten Auftritt zur Verfügung und Sie können ihn für beliebige CSS-Regeln verwenden. Nachstehend ein paar Möglichkeiten.

Beispiele

Hinterlegen Sie die gewünschten CSS-Regeln wiederum im globalen CSS-Code für das Projekt, damit die Definitionen auf jeder Seite des Auftritts automatisch zur Verfügung stehen.

Schrift global setzen

Im eingangs gezeigten Beispiel wird die Schrift global genutzt, das heisst, die Navigation, alle Texte und Überschriften verwenden den Web-Font anstelle der Default-Schrift Verdana. Dies erreichen Sie mit einer der beiden folgenden CSS-Regeln:

Für alle herkömmlichen Designs, inkl. Designs, die Sie mit dem weblica Designer erstellt haben, verwenden Sie die nachstehnde Regel:

CCS-Code

body {
    font-family: 'Cabin Sketch', sans-serif;
    font-size: large;
}

CCS-Code für die responsive Designs

.pure-g [class *= "pure-u"] {
    font-family: 'Cabin Sketch', sans-serif !important;
    font-size: large;
}

Schrift nur für Überschriften verwenden

Wenn Sie die Schrift nur für die Überschriften verwenden wollen, erreichen Sie dies mit folgender Regel:

CCS-Code

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cabin Sketch', sans-serif;
}
Sie können die Schrift natürlich auch nur für einzelne Überschriftgrössen verwenden, siehe hierzu auch den Artikel Mit Überschriften arbeiten.

Schrift nur für einzelne Absätze nutzen

Dank CSS und dem flexiblen Absatz-System von weblica können Sie die Schrift auch nur ganz gezielt für einzelne Absätze nutzen. Definieren Sie hierzu eine entsprechende CSS-Klasse wie folgt:

CCS-Code

.font-cabin_sketch {
    font-family: 'Cabin Sketch', sans-serif;
    font-size: large;
}
Nun können Sie diese Klasse den gewünschten Absätzen nach Bedarf zuweisen. Siehe hierzu den Artikel Eigene CSS-Klassen für Absätze verwenden.

@font-face im CSS oder Style-Link im HTML-Head: Was ist besser?

Google beschreibt in seiner Anleitung ein alternatives Vorgehen für das Einbinden der gewünschten Web-Fonts via Style-Link im HTML-Head der jeweiligen Seite. Diese Möglichkeit können Sie in weblica ebenfalls benutzen, indem Sie den entsprechenden Link in den Seiten-Eigenschaften auf der Registerkarte HTML/CSS im dafür vorgesehenen Eingabe-Feld HTML-Head eintragen.

Nun stellt sich die Frage, welche Methode ist besser?

Die Standard-Lösung von Google via Stylesheet-Link im HTML-Head der Seite verlangt, dass dieser Link auf jeder Seite im Auftritt vorhanden ist, auf der der Web-Font genutzt werden soll. Das via link geladene Stylesheet enthält letztlich auch die @font-face Definition.

Der im vorliegenden Artikel beschriebene Weg ermöglicht es, direkt im Stylesheet entsprechende Stil-Regeln definieren können, welche letztlich auf die font-face Definition zurück greift. Damit kann es nicht passieren, dass man auf einer Seite das laden des Style-Sheets vergisst und die Font-Definitionen im CSS nicht greifen.

Unsere Empfehlung lautet daher:

Nutzen Sie die hier beschriebene Variante über die Font-Face-Deklaration im Stylesheet, wenn Sie die Schrift im Web-Auftritt immer wieder nutzen.

Wenn Sie eine Schrift nur auf einer Seite nutzen wollen, dann verwenden Sie die Methode von Google via Stylesheet-Link im HTML-Head.