Eine Schriftart auf einer Webseite verwenden

28-07-2013

Eine bestimmte Schriftart auf einer Webseite verwenden, wie geht das?

Was man vielleicht vorher wissen sollte, je mehr Schriftarten man einbindet, desto höher wird die Ladezeit der Webseite. Hier erkläre ich es kurz am Beispiel zweier kostenloser Anbieter, eigentlich wird es schon auf deren Webseite gut erklärt.

Eine Übersicht verschiedener Anbieter und Schriftarten gibt es hier: http://webfonts.info/fonts-available-font-face-embedding

Weitere Schriftarten findet man auf der Webseite: http://www.dafont.com/

Richtlinien vom World Wide Web Consortium: http://www.w3.org/TR/css3-fonts/#the-font-face-rule

Welche Punkte sind bei der Wahl des Anbieters oder der Schriftart zu beachten?

  • Anzahl der angebotenen Schriftarten
  • Preismodell des Anbieters
  • Lizenz der Schriftart
  • Speicherort der Schriftart-Dateien

Wie wird die Schriftart eingebunden?

Sollte man zum Beispiel eine Schriftart verwenden wollen, die Font Squirrel nicht anbietet, z.B. von einem anderen Anbieter. Findet man auf deren Webseite einen Webfont Generator um die Schriftart-Dateien zu erstellen. http://www.fontsquirrel.com/tools/webfont-generator. Man sollte auf die Lizenz achten.

Anbieter 1 - Fontsquirrel: http://www.fontsquirrel.com/

  • 1. Die gewünschte Schriftart wählen.
  • 2. Auf Webfont Kit klicken.
  • 3. Alle Formate auswählen und Font-Face Kit herunterladen.
  • 4. Einen Ordner fonts im eigenen Webserver erstellen und die 4 (eot , svg, ttf, woff) Schriftart-Dateien darin abspeichern.
  • 5. In der CSS-Datei schreiben:

Zuerst im <body> auf schreibweise achten, der Schriftart-Name in der ’font-family’ sollte überall gleich geschrieben werden, sonst funktioniert es nicht.

body {
font-family: ''open_sans'' , Helvetica, Arial, sans-serif;
}

Danach den ’font-face’ Code eintragen, der mitgegeben wird wenn man die Schriftart-Dateien herunterlädt. Wichtig ist hier, den Pfad, wo die Dateien gespeichert sind, anzupassen.

@font-face {
font-family: ''open_sans'';
src: url(''../fonts/OpenSans-Regular-webfont.eot'');
src: url(''../fonts/OpenSans-Regular-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''../fonts/OpenSans-Regular-webfont.woff'') format(''woff''),
url(''../fonts/OpenSans-Regular-webfont.ttf'') format(''truetype''),
url(''../fonts/OpenSans-Regular-webfont.svg#open_sansregular'') format(''svg'');
font-weight: normal;
font-style: normal;
}

Und zu guter letzt, kann man die Schrift nach belieben vergeben. z.B. hier für den <h1> Tag.

h1 {
font-family: ''open_sans'', Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
}

Anbieter 2 - Google Webfont: http://www.google.com/fonts/

  • 1. Die gewünschte Schriftart wählen (Add to Collection).
  • 2. Auf Use klicken und ein Häckchen bei den gewünschten Schriftstilen setzen.
  • 3. Den Code der angegeben wird kopieren und in die HTML Seite im einfügen.

<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>

  • 4. Den ’font-family’ Name aus der Webseite kopieren und in die CSS-Datei im <body> einfügen:

body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

Somit kann man die Schrift nach belieben vergeben, z.B. mit unterschiedlichen ’font-weight’, je nachdem was für Schriftstile man ausgewählt hat.

h1 {
font-family: ''Open Sans'', Helvetica, Arial, sans-serif;
font-weight: 700;
}

p {
font-family: ''Open Sans'', Helvetica, Arial, sans-serif;
font-weight: 400;
}

Kommentar eingeben