Metainformationen zur Seite
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
webfonts [2022/11/13 15:09] – [Praxis] cb | webfonts [2022/11/13 18:55] (aktuell) – [WOFF2-Datei besorgen] cb | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
===== Moderne Nutzung von Web-Fonts ===== | ===== Moderne Nutzung von Web-Fonts ===== | ||
- | In den letzten Jahren (genauer seit 2015) haben sich die Möglichkeiten zur Nutzung von Fonts in HTML weiter verbessert. Die effektive und rechtlich einwandfreie Nutzung soll hier vorgestellt werden. | + | In den letzten Jahren (genauer: Browser |
===== Problemstellung ===== | ===== Problemstellung ===== | ||
Zeile 15: | Zeile 15: | ||
==== Idee ==== | ==== Idee ==== | ||
- | Eine realistische [[https:// | + | Eine realistische [[https:// |
Das woff2-Format ermöglicht " | Das woff2-Format ermöglicht " | ||
Zeile 28: | Zeile 28: | ||
* Handling: Komplexität verringert. | * Handling: Komplexität verringert. | ||
* Datenschutz: | * Datenschutz: | ||
- | * Performance: | + | * Performance: |
- | Bonus: | + | Bonus: |
==== Praxis ==== | ==== Praxis ==== | ||
Zeile 36: | Zeile 36: | ||
Was benötigen wir? | Was benötigen wir? | ||
* die WOFF2-Dateien | * die WOFF2-Dateien | ||
+ | * Ablage der Dateien auf deinem Webspace | ||
* CSS-Schnipsel zur Einbindung | * CSS-Schnipsel zur Einbindung | ||
* Beispiele in HTML zur Nutzung | * Beispiele in HTML zur Nutzung | ||
Zeile 41: | Zeile 42: | ||
=== WOFF2-Datei besorgen === | === WOFF2-Datei besorgen === | ||
- | {{ : | + | {{ : |
In Stichpunkten um " | In Stichpunkten um " | ||
* Wähle deinen Wunschfont in Google-Fonts | * Wähle deinen Wunschfont in Google-Fonts | ||
- | * klicke zwei Dicken sowohl regular, als auch italic an (siehe rechte Abbildung) | + | * klicke zwei Dicken sowohl regular, als auch italic an (Klick auf die rechte Abbildung) |
* öffne die in "< | * öffne die in "< | ||
- | * Suche in der Datei die vier Absätze mit " | + | * Suche in der Datei die vier Absätze mit " |
- | * Lade diese beiden Dateien herunter und benenne sie sinnvoll, hier z.B. "EB Garamond italic.woff2" | + | * Lade diese beiden Dateien herunter und benenne sie sinnvoll, hier z.B. "EB_Garamond_Italic.woff2" |
- | -- Fortsetzung folgt -- | + | === Ablage auf dem Webserver === |
+ | |||
+ | * Auf deinem Webspace wäre ein Verzeichnis /fonts sinnvoll, wo du die Dateien hineinlegen kannst. Lege es an! | ||
+ | * Kopiere die Dateien hinein. | ||
+ | * Willst du nicht nur HTML-Dateien von deinem Webspace benutzen sondern jetzt z.B. lokal zum Testen, so ist eine Datei /.htaccess (mit dem Punkt) notwendig. Wegen Sicherheitsbeschränkungen muss man dem Server erst erlauben, dass er Fonts an alle möglichen Interessenten ausliefert. Ob du das willst musst du wissen... | ||
+ | |||
+ | <file apache .htaccess> | ||
+ | < | ||
+ | < | ||
+ | Header set Access-Control-Allow-Origin " | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | === CSS-Schnipsel === | ||
+ | <code css> | ||
+ | @font-face { | ||
+ | font-family: | ||
+ | font-style: normal; | ||
+ | font-weight: | ||
+ | font-display: | ||
+ | src: url(https:// | ||
+ | | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: | ||
+ | font-style: italic; | ||
+ | font-weight: | ||
+ | font-display: | ||
+ | src: url(https:// | ||
+ | | ||
+ | } | ||
+ | body { font-family: | ||
+ | h1, h2, h3 { font-family: | ||
+ | h1 {font-weight: | ||
+ | h2 {font-style: | ||
+ | </ | ||
+ | === HTML-Beispiel === | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
{{tag> | {{tag> |