Übersicht von allen Systemfonts die ohne extra Einbindung verwendet werden können. Des weiteren zeige ich wie Custom Fonts definiert und verwendet werden.
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
}vorinstallierte Serif Fonts
Georgia, serif
div {
font-family: Georgia, serif;
}„Palatino Linotype“, „Book Antiqua“, Palatino, serif
div {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}„Times New Roman“, Times, serif
div {
font-family: "Times New Roman", Times, serif;
}vorinstallierte Sans-Serif Fonts
Arial, Helvetica, sans-serif
div {
font-family: Arial, Helvetica, sans-serif;
}„Arial Black“, Gadget, sans-serif
div {
font-family: "Arial Black", Gadget, sans-serif;
}„Comic Sans MS“, cursive, sans-serif
div {
font-family: "Comic Sans MS", cursive, sans-serif;
}Impact, Charcoal, sans-serif
div {
font-family: Impact, Charcoal, sans-serif;
}„Lucida Sans Unicode“, „Lucida Grande“, sans-serif
div {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}Tahoma, Geneva, sans-serif
div {
font-family: Tahoma, Geneva, sans-serif;
}„Trebuchet MS“, Helvetica, sans-serif
div {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}Verdana, Geneva, sans-serif
div {
font-family: Verdana, Geneva, sans-serif;
}vorinstallierte Monospace Fonts
„Courier New“, Courier, monospace
div {
font-family: "Courier New", Courier, monospace;
}„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";
}