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 14:24] – [Idee] 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 26: | Zeile 26: | ||
Damit sind mehrere Probleme gelöst: | Damit sind mehrere Probleme gelöst: | ||
- | * Komplexität verringert. | + | * Handling: |
- | * keine erzwungenen Abfragen bei Google wenn jemand deine Seite besucht. | + | * Datenschutz: |
- | * Schnelle Lösung, | + | * Performance: |
+ | |||
+ | Bonus: HTTP/2 ermöglicht, | ||
==== Praxis ==== | ==== Praxis ==== | ||
+ | Was benötigen wir? | ||
+ | * die WOFF2-Dateien | ||
+ | * Ablage der Dateien auf deinem Webspace | ||
+ | * CSS-Schnipsel zur Einbindung | ||
+ | * Beispiele in HTML zur Nutzung | ||
+ | |||
+ | === WOFF2-Datei besorgen === | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | In Stichpunkten um " | ||
+ | * Wähle deinen Wunschfont in Google-Fonts | ||
+ | * klicke zwei Dicken sowohl regular, als auch italic an (Klick auf die rechte Abbildung) | ||
+ | * öffne die in "< | ||
+ | * Suche in der Datei die vier Absätze mit " | ||
+ | * Lade diese beiden Dateien herunter und benenne sie sinnvoll, hier z.B. " | ||
+ | |||
+ | === 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> |