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.

Alternativ dazu können Google Webfonts verwendet werden. Diese Fonts haben meist auch im Gegensatz zu kostenlose Fonts einen Zeichensatz mit Umlauten. Der gewählte Font wird als CSS Datei eingebunden und kann dann verwendet werden. 

Es gibt zwei Möglichkeiten diese Datei in TYPO3 einzubinden.

Einbinden der CSS Datei in den Header:

page.headerData.60 = TEXT
page.headerData.60.value = <link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>

Einbinden der CSS Datei mit @import am Anfang einer CSS Datei, die auf allen Seiten des Webauftrittes geladen wird:

@import url(http://fonts.googleapis.com/css?family=Irish+Grover);

Danach kann man diesen Font dem gewünschten HTML Element oder Klasse zuweisen:

h1 { 
   font-family: 'Irish Grover',Arial,Helvetica,sans-serif;
   font-size: 300%;
}
Aktualisiert: 29.06.2016