GoogleWebFonts in TYPO3 einbinden

Um Webseiten individueller zu gestalten, lassen sich über Google weitere Internet-Schriften (sog. WebFonts) nachladen.

Der dafür verantwortliche Google-Dienst heißt logischerweise GoogleWebFonts: http://www.google.com/webfonts/v2. Ihn gibt es inzwischen in der Version 2, mit derzeit rund 200 internetfähigen Schriften.

Das Problem mit Internetschriften ist nachwievor, ob sie nachgeladen werden, wie lange dies dauert und ob das Internetanzeigeprogrammm beim Besucher einer Webseite alles ordentlich rendert, zumindest so wie Webdesigner bzw. Webentwickler und Marketingabteilung dies wünschen.

Vorgehensweise zum Einbinden einer Schrift

1. GoogleWebFonts aufrufen

2. Schrift auswählen und Code erhalten

3. Die Codezeile im Kopfbereich der TYPO3-Seite ausgeben

4. CSS-Datei entsprechend anpassen, damit die Schrift auch aufgerufen wird.

TypoScript

seite = PAGE 
seite.headerData.997 = TEXT 
seite.headerData.997.wrap (
   <link    href='http://fonts.googleapis.com/css?
   family=Ruslan+Display&subset=latin-ext&v2' 
   rel='stylesheet' type='text/css'>
 ) 

CSS

In der CSS-Datei wird die neue Schrift so angesprochen:

font-family: 'Ruslan Display', cursive; 

Und hier können Sie Ihren Geschmack testen, welche Schrift mit welcher harmoniert:

• Schriften-Kombinierer