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 15:18] – [Idee] cbwebfonts [2022/11/13 18:55] (aktuell) – [WOFF2-Datei besorgen] cb
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 ===
  
-{{ :sysbetr:screenshotgooglefontsgaramond.png?nolink&400|}}+{{ :sysbetr:screenshotgooglefontsgaramond.png?direct&400|}}
  
 In Stichpunkten um "regular" und "italic" zu erhalten: In Stichpunkten um "regular" und "italic" zu erhalten:
   * 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 "<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>   * ö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!   * 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"+  * 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.
  
--- 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> 
 +<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}}