Schriften
Standard-Schrift
Wird keine Schrift eingebunden und konfiguriert, wird die Standard-Deklaration verwendet.
font-family: Helvetica, Arial, sans-serif;
Lokaler Webfont - Pfadangabe und FontFamily für Titel und Text
Wird die Schriftdatei auf dem eigenen Server hinterlegt und verlinkt, kann der Pfad und die "font-family" unter Einstellungen > Font eingetragen werden. Es muss sich um einen Webfont handeln. Erwartet werden die Dateitypen *.eot und *.woff.
Die gute Adresse um ein Webfontpaket zu erstellen: https://fontsquirrel.com > Generator: https://www.fontsquirrel.com/tools/webfont-generator
Es können Schriftdateien vom TrueType-Format hochgeladen werden. Die Nutzerrechte für die Schriftdatei muss belegt werden oder ist als Freeware nutzbar.
- Lokaler Webfont für die Titel - FontFamily: Bezeichnung der Schrift
- Lokaler Pfad/WebfontFile für den Titel: Dateiname
- Lokaler Webfont für den Text - FontFamily: Bezeichnung der Schrift
- Lokaler Pfad/WebfontFile für den Text: Dateiname
Es können je eine Schrift für Titel und Text gewählt werden.
Die CSS-Deklaration für lokale Webfont-Dateien wird folgendermassen hinterlegt:
@font-face {
font-family: '{Bezeichnung der Schrift ... }';
src: url('../fonts/{Dateiname ... }.eot');
url('../fonts/{Dateiname ... }.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: '{Dateiname ... }';
}Weitere Schriften können direkt unter Einstellungen > CSS verlinkt und dem gewünschten HTML-Element zugewiesen werden.
Google Webfont - Pfadangabe und FontFamily für Titel, Navigation und Text
Werden Google-Fonts verwendet, können diese einfach durch die "font-family"-Angabe und den CSS-Importpfad eingetragen werden.
Google liefert einen Pfad für den Link und die Schrift einzubinden und die Bezeichnung der Schrift im CSS:
(Beachte die blauen Markierungen)
Die CSS-Deklaration für Googlefonts wird folgendermassen hinterlegt:
<% if $TemplateWebFontFamilyLink %>
<link href="https://fonts.googleapis.com/css?family= ... &display=swap" rel="stylesheet">
<% end_if %>
h1, h2, h3, h4, h5, h6 {
font-family: ' ... ', serif;
}
body {
font-family: ' ... ', serif;
}
.navbar-nav li a {
font-family: ' ... ', serif;
}
Screenshot: Schriften - Webfonts lokal oder CDN
Wahlweise können Schriften aus GoogleFont oder lokal eingebunden werden. Für Text, Navigation oder Titel.