Fonts über CSS Einbinden

Design

Wer eine individuelle Webseite haben möchte, will nicht immer auf die Standardschriftarten zurückgreifen die jedes Betriebssystem anbietet (Diese variieren von Betriebssystem zu Betriebssystem). Die Herausforderung ist, dass man eine gleiche Darstellung auf möglichst allen Browsern, auf den jeweiligen Betriebssystemen erzielen will. Eine Möglichkeit ist das Einbinden von beliebigen Schriftarten mittels CSS. Ein kurzer Hinweis, achten Sie immer auf die Lizenzbestimmungen. Nicht jeder Font darf uneingeschränkt genutzt und beispielsweise auf einer Webseite eingebaut werden. Dies gilt für kostenlose (z.B. Google Webfonts) ebenso wie für kostenpflichtige Fonts (diverse Anbieter, wie zum Beispiel fonts.com). Man kann Fonts als Datei einbinden oder als Weblink, hier zeige ich Ihnen, wie man das macht.

 

Wie bindet man Schriftarten in CSS ein?

 

  • Das Einbinden einer Schriftart über einen Weblink.

Man sucht sich bei Google Webfonts die gewünschte Schriftart und die dazu gehörigen Schriftstärken aus  und in null Komma nix wird der Code generiert den man in seine Webseite einbinden muss. Bei CSS wir das über den Befehl @import realisiert.

 

Code Beispiel:

Definition, wie man eine Schriftart einbindet:

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

Verwendung der Schriftart:

body {

font-family: ‚Frijole‘, cursive;

}

 

Mit diesen wenigen Zeilen Code hat man in wenigen Sekunden eine neu Schriftart eingebaut die von allen aktuellen Browsern unterstützt wird. Zur Absicherung sollte man trotzdem immer weitere Schriftarten deklarieren. Hier noch eine kurze Auflistung der Browser Kompatibilität mit Google Webfonts:

  • Google Chrome: ab Version 4.249.4+
  • Mozilla Firefox: ab Version: 3.5+
  • Apple Safari: ab Version 3.1+
  • Opera: ab Version 10.5+
  • Microsoft Internet Explorer: ab Version 6+

 

  • Das Einbinden einer Schriftart als Datei.

Hierbei muss das es nicht ein Dateiformat für alle Browser gibt. Das wäre auch irgendwie zu einfach. Deswegen muss man die Abhängigkeiten beachten um eine Optimierung aller gängigen Browser zu realisieren, d. h. die Fonts müssen in verschiedenen Dateiformaten abgespeichert und eingebunden werden. Mit dem Befehl @font-face wird die Schriftart in die CSS-Datei eingebunden, der Tag src beinhaltet den Pfad, wo die Datei gespeichert ist. Es wird jede Schriftart mehrfach mit verschiedenen Dateiformaten definiert, damit sichergestellt wird, dass die Schriftart von allen Browsern dargestellt wird. Die folgende Deklaration gilt für alle Browser.

 

Code Beispiel:

Definition, wie man eine Schriftart einbindet:

 

@font-face{

font-family:“Optima LT“; /* font-family: Schriftart „Name der Schriftart ist freiwählbar“ */

src:url(„fonts/otima-lt.eot?#iefix“);

src:url(„fonts/otima-lt.eot?#iefix“) format(„eot“),

url(„fonts/otima-lt.woff“) format(„woff“),

url(„fonts/ otima-lt.ttf“) format(„truetype“),

url(„fonts/otima-lt.svg“) format(„svg“);

}

Verwendung der Schriftart:

body {

font-family: Optima LT, Arial, sans-serif;

}

 

Jetzt noch eine Übersicht der Browser-Kompatibilität:

browser-kompatibilitaet

Alle älteren Browser werden nicht unterstützt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »


Weitere Artikel von Michael
Design Landingpages Online Marketing
Update 29.04.2016   Was sind Accelerated Mobile Pages? Die Accelerated... Mehr lesen »

Landingpages
WordPress ist eine fantastische Open Source Software, mit der man nicht nur... Mehr lesen »

Online Marketing
Auf vielen Webseiten bekommen Nutzer zur Begrüßung einen sogenannten... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^