Metainformationen zur Seite
  •  

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
webfonts [2022/11/13 14:23] – [Idee] cbwebfonts [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 seit 2015, Betriebssysteme seit 2017) haben sich die Möglichkeiten zur Nutzung von Fonts in HTML weiter verbessert. Die effektive und rechtlich einwandfreie Nutzung soll hier vorgestellt werden.
  
 ===== Problemstellung ===== ===== Problemstellung =====
Zeile 15: Zeile 15:
  
 ==== Idee ==== ==== Idee ====
-Eine realistische [[https://caniuse.com/?search=woff2|Abschätzung]] zeigt, dass man fast nur noch mit aktuellen Browsern rechnen muss. Diese unterstützen alle das moderne woff2-Font-Dateiformat. Exotische Browser (IE11 mit <0,5% Anteil) müssen dann mit einem falschen Font leben. Probleme scheint es allerdings auch mit Firefox auf alten Windowsversionen (7, 8.1) zu geben((https://www.heise.de/blog/Variable-Fonts-und-wie-man-sie-nicht-einsetzen-sollte-7142196.html)). Diese verabschieden sich allmählich...+Eine realistische [[https://caniuse.com/?search=variable%20font|Abschätzung]] zeigt, dass man fast nur noch mit aktuellen Browsern rechnen muss. Diese unterstützen alle das moderne woff2-Font-Dateiformat. Exotische Browser (IE11 mit <0,5% Anteil) sowie Betriebssysteme in Versionsständen vor Ende 2017 müssen dann mit einem falschen Font leben. Probleme scheint es z.B. mit Firefox auf alten Windowsversionen (7, 8.1) zu geben((DE: https://www.heise.de/blog/Variable-Fonts-und-wie-man-sie-nicht-einsetzen-sollte-7142196.html)). Letztere verabschieden sich glücklicherweise final im Januar 2023((EN: https://learn.microsoft.com/de-de/lifecycle/products/windows-81)).
  
 Das woff2-Format ermöglicht "variable Fonts"((DE: https://www.typolexikon.de/variable-fonts/))((EN: https://en.wikipedia.org/wiki/Variable_font))((EN: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web)). Welche es bereits gibt kann [[https://fonts.google.com/?vfonly=true|Google Fonts gefiltert]] auflisten. Sofern einem diese Fonts reichen und man mit den wenigen nicht modernen Browsern leben kann gelten die folgenden Ausführungen: Das woff2-Format ermöglicht "variable Fonts"((DE: https://www.typolexikon.de/variable-fonts/))((EN: https://en.wikipedia.org/wiki/Variable_font))((EN: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web)). Welche es bereits gibt kann [[https://fonts.google.com/?vfonly=true|Google Fonts gefiltert]] auflisten. Sofern einem diese Fonts reichen und man mit den wenigen nicht modernen Browsern leben kann gelten die folgenden Ausführungen:
Zeile 26: Zeile 26:
  
 Damit sind mehrere Probleme gelöst: Damit sind mehrere Probleme gelöst:
-  * Komplexität verringert. +  * Handling: Komplexität verringert. 
-  * keine erzwungenen Abfragen bei Google wenn jemand deine Seite besucht. +  * Datenschutz: keine erzwungenen Abfragen bei Google wenn jemand deine Seite besucht. 
-  * Schnelle Lösung, das wenig Dateizugriffe nötig.+  * Performance: Schnelle Lösung, da wenig Dateizugriffe nötig. DNS-Abfrage zu deiner Seite ist längst gemacht bevor die Fonts abgerufen werden müssen. 
 + 
 +Bonus: HTTP/2 ermöglicht, dass die Fonts auf demselben Server über dieselbe Session - auch interleaved - übertragen werden. Solange dein Server nicht an sich lahm ist, sollte damit der Abruf sehr schnell sein! Prüfe, ob dein Anbieter bereits HTTP/2 (nur via HTTPS möglich) nutzt!
  
 ==== 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 ===
 +
 +{{ :sysbetr:screenshotgooglefontsgaramond.png?direct&400|}}
 +
 +In Stichpunkten um "regular" und "italic" zu erhalten:
 +  * Wähle deinen Wunschfont in Google-Fonts
 +  * klicke zwei Dicken sowohl regular, als auch italic an (Klick auf die rechte Abbildung)
 +  * öffne die in "<link href=..." angegebene URL. Hier <code>https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap</code>
 +  * Suche in der Datei die vier Absätze mit "latin". Vergleiche, dass es sich dabei um nur zwei verschiedene Dateien, hier z.B. <code>https://fonts.gstatic.com/s/ebgaramond/v26/SlGWmQSNjdsmc35JDF1K5GRweDs1Zw.woff2</code> handelt. Wenn nicht, ist es kein variabler Font!
 +  * Lade diese beiden Dateien herunter und benenne sie sinnvoll, hier z.B. "EB_Garamond_Italic.woff2" und "EB_Garamond.woff2". Ja, ich bin weiterhin kein Freund von Leerzeichen in Dateinamen.
 +
 +=== 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>
 +<FilesMatch "\.(woff2)$">
 +    <IfModule mod_headers.c>
 +        Header set Access-Control-Allow-Origin "*"
 +    </IfModule>
 +</FilesMatch>
 +
 +</file>
 +
 +=== CSS-Schnipsel ===
 +<code css>
 +    @font-face {
 +        font-family: 'EB Garamond';
 +        font-style: normal;
 +        font-weight: 400 800;
 +        font-display: swap;
 +        src: url(https://example.de/fonts/EB_Garamond.woff2) format("woff2 supports variations"),
 +             url(https://example.de/fonts/EB_Garamond.woff2) format("woff2-variations");
 +    }
 +    @font-face {
 +        font-family: 'EB Garamond';
 +        font-style: italic;
 +        font-weight: 400 800;
 +        font-display: swap;
 +        src: url(https://example.de/fonts/EB_Garamond_Italic.woff2) format("woff2 supports variations"),
 +             url(https://example.de/fonts/EB_Garamond_Italic.woff2) format("woff2-variations");
 +    }
 +    body { font-family: sans-serif; }
 +    h1, h2, h3 { font-family: "EB Garamond";}
 +    h1 {font-weight: 800;}
 +    h2 {font-style: italic;}
 +</code>
 +=== HTML-Beispiel ===
 +<code html>
 +    <H1>Garamond in GROSS</H1>
 +    <p>Und etwas Text</p>
 +    <H2>Garamond in kursiv</H2>
 +    <p>Etwas Text</p>
 +    <H3>Garamond in mittel</H3>
 +    <p>Etwas Text</p>
 +    <H4>Kein Garamond</H4>
 +    <p>Der letzte Text</p>
 +</code>
  
  
 {{tag>Webfont Font TTF WOFF WOFF2 CSS Abmahnung}} {{tag>Webfont Font TTF WOFF WOFF2 CSS Abmahnung}}