Kategorie: Web Frontend

Wenn man gern Arial als Schriftart auf seiner Webseite einbinden will und möchte, dass auch alle Besucher diese Schriftart verwenden sollen, auch die, die es nicht installiert haben, muss man den Font als Webfont einbinden.

Das Problem ist, dass Arial nicht frei verfügbar ist, sondern eine Lizenz dafür erworben werden muss: kostenpflichtiger Download.

Wenn man gern ohne Bezahlung Arial verwenden will, dann kann man einfach die Liberation Sans als Ersatz nehmen, welche fast genauso aussieht und kostenlos ist: Download Liberation Sans.

Diese lässt sich dann als Webfont einbinden:

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}


@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

body{
    font-family: liberation_sans;
}