Google Webfonts in TYPO3 einbinden
Will man eine Schriftart verwenden, die nicht die meisten User in ihren Systemen installiert haben, so müsste man die notwendige Schrift ins System hochladen und mit CSS mit @font-face einbinden. Es dürfen jedoch hierfür nur Schriften verwendet werden, die zur freien Verfügung bereit stehen. Diese müssen dann noch für die verschiedenen Browser in unterschiedliche Formate konvertiert werden.
Dazu können Google Webfonts verwendet werden. Diese Fonts haben meist auch im Gegensatz zu kostenlose Fonts einen Zeichensatz mit Umlauten. Um einen Google Webfont einzubinden, müssen die entsprechenden Fonts runter geladen werden, in die eigenen Webseite eingebaut werden und über CSS angeben werden, wo die Fonts zu finden sind.
Das Tool google-webfonts-helper kann für die Erstellung der Webfonts genutzt werden.
Nachdem du die Seite aufgerufen hast, kann der Font ausgewählt werden, den du auf deiner Webseite einbinden willst.
Unter „1. Select charsets“ kann nun ausgewählt werden, mit welchen Zeichensätze der Font der heruntergeladen werden soll. Im deutschsprachigen Raum sollte zumindest „latin“ ausgewählt sein.
Unter „2. Select styles“ kann ausgewählt werden, welche Schriftschnitte später auf deiner Webseite nutzbar sein sollen.
Unter „3. Copy CSS“ kann der CSS-Code kopiert werden, der in deine CSS Datei integriert werden muss. Am Fuße des Abschnitts gibt es das Feld „Customize folder prefix“ hier muss ggf. der Pfad vom CSS zu den Fonts angepasst werden. Z.B. im TYPO3 Template (Musterprojekt) von jweiland.net, wird der Pfad zu den Fonts groß geschrieben und befindet sich neben dem CSS-Verzeichnis , d.h. im Feld „Customize folder prefix“ muss „../Fonts“ eingegeben werden.
Im Musterprojekt muss der CSS-Code in die Datei
typo3conf/ext/jwmusterprojekt11/Resources/Public/Css/style.css
eingefügt werden. Und zwar ganz am Anfang.
Unter „4. Download files“ können nun die Schriftdateien heruntergeladen werden. Das Zip muß entpackt werden und die Schriftdateien müssen in den Fonts-Ordner überspielt werden.
Der Fonts-Ordner befindet sich im Musterprojekt unter:
typo3conf/ext/jwmusterprojekt11/Resources/Public/Fonts/
In diesen Ordner müssen alle Dateien des Zips überspielt werden. Z.B. mit einem FTP-Programm oder über den Dateimanager deines Jweiland-Packets.
Nun kann man diesen Font dem gewünschten HTML Element oder Klasse zuweisen:
p {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
}