W3.CSS Google Fonts
Mit W3.CSS ist es extrem einfach, neue Schriftarten hinzuzufügen.
- Sehr einfach zu bedienen (nur CSS und HTML)
- Unbegrenzte Nutzung externer Schriftbibliotheken (wie Google Fonts)
- Funktioniert in allen modernen Browsern
Das ist Roboto
Das ist Sofia
Sofia in Flammen
Das Web machen!
Das Web machen!
Das Web machen!
Das Web machen!
Das Web machen!
Verwendung von Google-Schriftarten
Google Fonts können kostenlos verwendet werden und es stehen mehr als 1000 Schriftarten zur Auswahl.
Verlinken Sie im Kopf Ihrer Webseite auf eine Google-Schriftart:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Fügen Sie dann das CSS hinzu, wo es verwendet werden soll:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Ein anderes Beispiel
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Erstellen Sie eine Schriftartklasse
Verlinken Sie im Kopf Ihrer Webseite auf eine Google-Schriftart:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Erstellen Sie dann eine Schriftartklasse:
Beispiel
.w3-sofia {
font-family: Sofia, cursive;
}
Verwenden Sie auf Ihrer Webseite die Schriftartklasse:
Beispiel
<p class="w3-sofia">Making the Web!</p>
Das Web machen!
Beispiel
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Das Web machen!
Beispiel
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Das Web machen!
Beispiel
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Das Web machen!
Beispiel
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Das Web machen!