Fonts lokal in Hugo benutzen

Kostenlose Fonts finden, downloaden, in Hugo lokal integrieren und in den Webseiten benutzen. Eine Beschreibung meiner Vorgehensweise. Fonts werten die Textdarstellung von Webseiten optisch auf.

Die Schönheit liegt zwar im Auge des Betrachters, aber so oder so wird mit einem extra Font dem allgemeinen Einerlei der normalen Schriftarten entgegen gewirkt.

Aus Datenschutzgründen möchte ich die von mir benutzten Fonts auf meinem Webspace speichern und von dort laden. Durch externes Laden bzw. kontrollieren ob der Font schon geladen wurde, wird jede in meinem Blog aufgerufene Webseite der externen Quelle mitgeteilt. Ich finde das unnötig.

Open Source Fonts finden und downloaden

Eine gute Übersicht über Open Source Fonts bietet - Google Fonts . Die dort gelisteten Fonts sind überwiegend nicht von Google. Google Fonts listet die unterschiedlichen Fonts auf der Website auf und zeigt die jeweilige Lizenz an. Die Fonts sind kostenlos und können, soweit ich das verstanden habe, ohne Hinweis auf die Ersteller verwendet werden. Links zu den Lizenzbedingungen der von mir benutzten Schriften habe ich am Ende der Webseite in der Linkliste aufgeführt.

Ich habe mich für die Open Source Schriftfamilien „Source Sans Pro“, „Source Serif Pro“ und „Source Code Pro“ entschieden.

Für den kompakten Download der Schriften benutze ich die Website - google-webfonts-helper - von Mario Raftl. Der Service greift auf die Google Fonts Website zu und bietet eine sehr übersichtliche Auswahlmöglichkeit, für eine von überflüssigen Dingen befreiten Download des Fonts an. Nach Eingabe der Schriftfamilie im Suchfeld, wird die Schrift mit diversen Informationen und Auswahlmöglichkeiten angezeigt.

Den Font - „Source Sans Pro“ - möchte ich für normale Texte benutzen. Als Charset habe ich Latin ausgewählt. Bei den Styles möchte ich neben Regular auch Italic und 600 für bold benutzen. Unter „Copy CSS“ habe ich die Variante für „Modern Browser“ gewählt. Durch die eingeschränkte Auswahl der Styles muss später auch nur, dass auf meinen Webseiten benutzte vom Browser des Anwenders geladen werden - Stichwort Bandbreite.

Den Font - „Source Serif Pro“ - möchte ich für Überschriften (h1 - h4) benutzen. Als Style habe ich 600 gewählt und Regular abgewählt. Bei „Copy CSS“ die Auswahl „Modern Browser“.

„Source Code Pro“ - werde ich für Sourcecode verwenden. Da reicht mir die „Regular“ Variante.

Zielgruppe für diesen Blog sind Personen die ihre Website selbst erstellen und keine Scheu vor Quellcode haben. Da diese Zielgruppe nicht mit Uralt-Browsern entwickelt, habe ich mich für die oben genannte „Modern Browser“ Variante entschieden. Damit sind Font Dateien im Format woff und woff2 gemeint.

Nachdem die jeweilige Schriftart über den Download Button lokal gespeichert ist, muss der @font-face CSS-Code ebenfalls zwischengespeichert werden.

Fonts in Hugo lokal integrieren

Innerhalb des Hugo Projekts habe ich im Verzeichnis /static das Unterverzeichnis /fonts erstellt. Die Zip-Dateien der Schriftarten müssen entpackt und in das Fonts-Verzeichnis kopiert werden.

Die *.woff Dateien belegen entpackt 103 KB Speicher. Das neuere Format der *.woff2 Dateien 82 KB, also ca. 20% weniger. Die Browser wählen selbst aus welches Font-Format sie verstehen. Da die Dateien von einem Format nur einmal geladen werden müssen, finde ich den Umfang vertretbar. Wikipedia - erklärt den Unterschied von WOFF und WOFF2 Formaten. Das war’s. Der Rest - das eigentliche Einbinden - wird per CSS/SCSS gemacht.

Fonts per CSS/SCSS benutzen

Das beste Ergebnis mit Fonts erzielt man, wenn die Fonts gleich am Anfang der Website Erstellung eingebunden werden. Das nachträgliche Einbinden von anderen Font-Familien kann Auswirkungen auf das Design haben. Es kann dann zu verschobenen Bildern und div-Blöcken kommen. Oder Auswirkungen auf das Responsive Webdesign für kleinere Displaygrößen haben. Aber dies kann man dann ja auch wieder anpassen.

Durch den nachfolgenden CSS/SCSS Code werden die Font-Dateien einmalig geladen und den verschiedenen HTML-Elementen zugewiesen. Den CSS/SCSS Code beschreibe ich unterhalb der Code-Anzeige.

source-serif-pro-600 - latin - für h1, h2, h3 und h4

// for: h1,h2,h3,h4  
// source-serif-pro-600 - latin  
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Serif Pro'),
       url('/fonts/source-serif-pro-v11-latin-600.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-serif-pro-v11-latin-600.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
h1, h2, h3, h4 { font-family: 'Source Serif Pro', Arial, sans-serif; }

Den @font-face CSS Code habe ich wie oben beschrieben kopiert. Unter src: ist der erste Eintrag local(’’). Durch diesen Eintrag wird lokal geschaut ob eine Schrift auf dem Gerät vorhanden ist. Wenn ja, wird die Schrift lokal geladen. Es ist unwahrscheinlich das die Schrift vorhanden ist, aber dennoch habe ich den Eintrag mit dem Font Namen ergänzt - local(‘Source Serif Pro’).

Der Eintrag url(’/fonts/sourc.. verweist auf das Hugo Verzeichnis static. Für den Hugo Generator ist das static Verzeichnis das root Element.

Durch den @font-face Code wird der Font geladen. Die eigentliche Zuweisung zu entsprechenden HTML-Tags muss extra angegeben werden. Mit font-family: ‘Source Serif Pro’, Arial, sans-serif; wird den HTML-Tags als erster Font ‘Source Serif Pro’ zugewiesen. Wenn dieser Font vom Browser nicht gefunden werden kann sucht er nach Arial und wenn er den Font auch nicht findet, nach einem sans-serif Font.

sans-serif ist ein generischer Schriftfamilenname. Es sollte immer mindestens ein generischer Familienname, in eine Liste der Schriftfamilien aufgenommen werden. Da nicht garantiert werden kann, dass eine bestimmte Schriftart verfügbar ist. Auf diese Weise kann der Browser bei Bedarf eine akzeptable Fallback-Schriftart auswählen.

source-sans-pro-xxx - latin - für p, ul li, div, span, i und figcaption

// for: p, ul li, div, span, i, figcaption  
// source-sans-pro-regular - latin  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'),
       url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
// source-sans-pro-italic - latin  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro'),
       url('/fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-sans-pro-v14-latin-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
// source-sans-pro-600 - latin  
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro'),
       url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
p, ul li, div, span, i, figcaption {  
  font-family: 'Source Sans Pro', Arial, sans;  
}

Für den “normalen” Text möchte ich keine Serifen Schrift. Als Style setze ich regular, italic und 600 (bold) ein. Für jeden Style wird ein @font-face Eintrag benötigt. Die Zuweisung zu den entsprechenden HTML-Tags erfolgt wie weiter oben schon beschrieben.

Die Angabe der HTML-Tags muss an das eingesetzte Theme angepasst werden. Einfach mit einigen HTML-Tags anfangen und wenn dann noch etwas fehlt die Aufzählung ergänzen. Das Komma zwischen den Angaben nicht vergessen.

source-code-pro-regular - latin - für code

  
// for: code  
// source-code-pro-regular - latin  
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'),
       url('/fonts/source-code-pro-v14-latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+  
       url('/fonts/source-code-pro-v14-latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  
}
code {  
  font-family: 'Source Code Pro', monospace;  
  span { font-family: 'Source Code Pro', monospace; }
}

Für angezeigten Sourcecode wird meistens eine sogenannte monospace Schrift benutzt. Jedes Zeichen hat eine fixe Zeichenbreite, dadurch ist Sourcecode besser zu lesen. monospace ist eine generische Schriftfamilie und kommt nur als Fallback-Mechanismus zum Einsatz. Wenn „Source Code Pro“ nicht verfügbar ist, sucht der Browser lokal nach einer Schrift mit fixer Zeichenbreite.

Ich benutze auf dieser Website das von Hugo mitgelieferte - Syntax Highlighting - für Sourcecode. Eine Eigenart von diesem Tool ist, das der Sourcecode in span HTML-Tags ausgegeben wird. Deshalb der zusätzliche SCSS Eintrag für span.

Fazit

Mit wenig Aufwand kann eine Website durch entsprechende Fonts aufgehübscht werden. Durch das Beschränken auf nur wirklich benutzte Font Styles ist der Bandbreitenbedarf relativ gering. Das Einbinden per CSS/SCSS ist durch das kopierte @font-face CSS einfach. Es muss dann nur noch den entsprechenden HTML-Tags die Font-Family zugewiesen werden.

Ich habe die Webseite endlich upgedated, diverse Links hatten sich geändert und die ehemalige Bezeichnung “Adobe” wurde von Google entfernt.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren