| updated: | 2023 20. November |
| published: | 2020 10. September |
Typographic
Andere Schriftstile verwenden.Weitere Info’s.
Verwenden von Schriftarten aus dem Netz
Am Beispiel von Google-Fonts
wird deren Anwendung in einer HTML-Seite gezeigt.
Als Erstes wird eine Shortcode-Datei typography.html mit einem Link zur Google-API angelegt.
Beim Aufrufen des Shortcodes in Markdown werden die Parameter font,
size,
style,
und weight
übergeben.
{{ $font := .Get "font" }}
{{ $size := .Get "size" }}
{{ $style := .Get "style" | default "normal" }}
{{ $weight := .Get "weight" | default "normal" }}
<link href="https://fonts.googleapis.com/css?family={{ $font }}" rel="stylesheet" type="text/css">
<div style="font-family:'{{ $font }}'; font-size:{{ $size }}; font-style:{{ $style}}; font-weight:{{ $weight }}">
{{- .Inner -}}
</div>
In Markdown kann ein Absatz mit einem Text in einer anderen Schriftart dargestellt werden.
{{<typography font="Rubik Dirt" size="30px" style="italic" weight="bold">}}
Beispiel 1: Google Font Rubik Dirt
{{</typography>}}
{{<typography font="Roboto" size="30px" weight="lighter">}}
Beispiel 2: Google Font Dancing Script
{{</typography>}}
Aufgrund des Artikel vom Heise-Verlag wegen der Verwendung von Google Fonts und angeblichem Verstoßes gegen die DSGVO wird auf die Darstellung verzichtet. Das dargestellte Beispiel ist ein Screenshot.
Aber… hier das Update zum Artikel.
Verwenden von lokal gespeicherten Schriftarten
Lokale Fonts werden im Themenverzeichnis static gespeichert. Die Fonts sollten im Format *.woff oder *.woff2 vorhanden sein.
└── themes
└── dein-theme
├── archetypes
├── assets
├── static
│ └── fonts
└── layouts
Google-Fonts
werden im *.ttf Format angeboten. Dieses Hilfstool
kann zum generieren von CSS und woff-Dateien genutzt werden.
Weiter Info für lokale Fonts findest du bei Selfhtml
.
Adobe Source Sans Pro
Zum Thema Open Source Fonts kannst’e diesen Links mal folgend und vielleicht später selber noch einen kleinen Artikel schreiben.
Heise Artikel
Source Sans 3 bei Adobe
Wiki Artikel