CSS Font

CSS Font Teaser
jetzt liken

Übersicht von allen Systemfonts die ohne extra Einbindung verwendet werden können. Des weiteren zeige ich wie Custom Fonts definiert und verwendet werden.

  1. installierten Font verwenden
  2. eigenen Font verwenden

installierten Font verwenden

Einen Font per CSS einem Element zuweisen.

div {
    font-family: "Times New Roman", Times, serif;
    //           Fontname,          Alternativname, Alternativname 2
    // Bsp.:     Windows,           OSX,            Linux
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

vorinstallierte Serif Fonts

Georgia, serif

div {
    font-family: Georgia, serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Palatino Linotype“, „Book Antiqua“, Palatino, serif

div {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Times New Roman“, Times, serif

div {
    font-family: "Times New Roman", Times, serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

vorinstallierte Sans-Serif Fonts

Arial, Helvetica, sans-serif

div {
    font-family: Arial, Helvetica, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Arial Black“, Gadget, sans-serif

div {
    font-family: "Arial Black", Gadget, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Comic Sans MS“, cursive, sans-serif

div {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Impact, Charcoal, sans-serif

div {
    font-family: Impact, Charcoal, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Lucida Sans Unicode“, „Lucida Grande“, sans-serif

div {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tahoma, Geneva, sans-serif

div {
    font-family: Tahoma, Geneva, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Trebuchet MS“, Helvetica, sans-serif

div {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Verdana, Geneva, sans-serif

div {
    font-family: Verdana, Geneva, sans-serif;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

vorinstallierte Monospace Fonts

„Courier New“, Courier, monospace

div {
    font-family: "Courier New", Courier, monospace;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

„Lucida Console“, Monaco, monospace

div {
    font-family: "Lucida Console", Monaco, monospace;
}

eigenen Font verwenden

Font definieren und verwenden

@font-face {
  font-family: 'Roboto';
  src: url('font/roboto/Roboto-Regular.ttf') format('truetype'),
       url('font/roboto/Roboto-Regular.woff')  format('woff');
  font-weight: normal;
}
@font-face {
  font-family: 'Roboto Light';
  src: url('font/roboto/Roboto-Light.ttf') format('truetype'),
       url('font/roboto/Roboto-Light.woff')  format('woff');
}
div {
  font-family: "Roboto";
}
div {
  font-family: "Roboto Light";
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
jetzt liken