Google Font API - hochwertige Webschriften einbinden

0 | 0 Kommentare | 6197 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Google Font API - hochwertige Webschriften einbinden" mit Ihrem Wissen!

Anzeige Hier werben

Dank Google Font API (WMP News) können endlich auch Schriftarten verwendet werden, welche nicht auf dem Rechner des Benutzers gespeichert sind . Mit wenigen Schritten ist die gewünschte Schriftart eingebunden und für alle Browser darstellbar.

Zu aller erst muss unter Google die gewünschte Schrift ausgewählt werden. Für Google Font API stehen bis jetzt folgende Schriften zur Auswahl:

Cantarell, Cardo, Crimson Text, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Vollkorn und Yanone Kaffeesatz.

Klicken Sie auf die Schriftart und lassen Sie sich über den Tab "Get the code" die html-Zeile erstellen.

Bild zu Google Font API - hochwertige Webschriften einbinden

Über die Checkboxen "Regular", "Italic" usw. können die Schriftvarianten ausgwählt werden. Dem entsprechend wird der Code neu berechnet.

Kopieren Sie die erste Zeile als erstes Element in Ihrem <head> der html-Datei.

 
HTML
1
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

In der style.css geben Sie nun für den gewünschten Bereich die Schriftart an. In meinem Fall wird die Schrift auf der gesamten Webseite verwendet.

 
css
1
2
3
4
5
html, body {
    font-family: 'Cantarell', arial, serif;  

    <!--Cantarell wird als Standard verwendet-->
}

Jetzt kann die eingebundene Schriftart bewundert werden.

Weitere Möglichkeiten Google Font api einzubinden

Optional kann das Google-Stylesheet anstelle des link-tags auch per @import eingefügt werden. Dies ist vorteilhaft, wenn der Code nicht unnötig verändert werden soll.

 
HTML
1
@import url(http://fonts.googleapis.com/css?family=Cantarell);

Hier können auch mehrere Schriftarten angesprochen werden.

 
HTML
1
http://fonts.googleapis.com/css?family=Cantarell|Tangerine

Beispiel

Einbindung über css und javascript  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
    <style>
      body {
        font-family: 'Lobster', serif;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p>Webmasterpro.de - site boosting since 1999</p>
  </body>
</html>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Google Font API - hochwertige Webschriften einbinden" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Google Font API - hochwertige Webschriften einbinden" hier bearbeiten.

Mitarbeiter

Kommentare: Google Font API - hochwertige Webschriften einbinden