self hosting fonts

Permalink
/Idex.html

Website (GIT -Seiten)

Selbsthost-Schriftarten

Viele von uns verwenden Google -Schriftarten über eine CDN. Deutschland hat jedoch entschieden, dass diese DSGVO in der Verantwortung des Standortbesitzers für Rechtsstreitigkeiten offen bleibt.

Wir können immer noch Google -Schriftarten anzeigen nach:

1. Herunterladen der Schriftart (Varianten) von Google -Schriftarten dann von Google Fonts
2. Konvertieren der .ttf -Dateien in .woff und .woff2 mit einem Web -Schriftgenerator dann in .woff2 konvertieren
3. @font-face im CSS und verwenden
4. Vorladung der Schriftarten in der HTML.

HINWEIS : Diese Seite konzentriert sich auf Google -Schriftarten, aber die gleichen Prinzipien gelten für jede andere Art von Webschrift.

Web -Schriftart Generatoren

Font Squirrel Dies funktionierte für "Roboto", scheiterte jedoch mit den statischen Schriftversionen von "Lato" und "Open Sans".

Creative Fabrica Ich habe das für "Lato" und "Öffnen sans" statische Dateien verwendet. Ich musste jede Variante nacheinander hochladen.

Html

Mir wurde geraten, die Schriftarten im Kopf der HTML -Seite vorzuladen. Dies soll die Lieferung der Schriftarten beschleunigen und die COR -Web -Vitals (Core Web Vitals) von Google erhöhen. Ich habe jedoch Warnungen danach gesehen (siehe Testing/Firefox und Firefox Developer Edition, unten).

 < head >
  < link
    rel =" preload "
    href =" roboto-light-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-regular-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-medium-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  ...
  <!-- CSS file comes after preload -->
</ head > 

CSS

 @font-face {
  font-family : "Roboto" ;
  font-weight : 300 ;
  src : url ( "roboto-light-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-light-webfont.woff" )
      format ( "woff" );
}
/** Regular: 400 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 400 ;
  src : url ( "roboto-regular-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-regular-webfont.woff" )
      format ( "woff" );
}
/** Medium: 500 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 500 ;
  src : url ( "roboto-medium-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-medium-webfont.woff" )
      format ( "woff" );
}

Testen

• Getestet auf:
• Windows 10
• Chrom
• Firefox, Firefox Developer Edition
  • Notiz . Warnungen wurden in den Konsolen nur dieser beiden Browser angezeigt. Die Warnungen waren von 2 Typen:
  1. Das Layout wurde erzwungen, bevor die Seite voll geladen wurde. Wenn Stylesheets noch nicht geladen werden, kann dies zu einem Blitz von nicht styierten Inhalten führen.
  2. Die anderen Warnungen waren für jede Schriftvariante und traten nach ungefähr 10 Sekunden auf, z. B. für "Lato":
  • Die Ressource unter „https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-light-webfont.woff2“ wurde innerhalb weniger Sekunden nicht verwendet. Stellen Sie sicher, dass alle Attribute des Vorspannungs -Tags korrekt eingestellt sind.
  • Die Ressource unter „https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2“ wurde innerhalb weniger Sekunden nicht verwendet. Stellen Sie sicher, dass alle Attribute des Vorspannungs -Tags korrekt eingestellt sind.
  • Die Ressource unter „https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2“ wurde innerhalb weniger Sekunden nicht verwendet. Stellen Sie sicher, dass alle Attribute des Vorspannungs -Tags korrekt eingestellt sind.
  • Die Diskussion und Suche nach dem Stapelüberlauf haben keine verständliche Antwort ergeben. Ich habe jedoch selbst eine Frage auf Stack Overflow gepostet und wenn sie beantwortet wird, werde ich diese Readme.md mit neuen Informationen aktualisieren.
• Microsoft Edge

Anerkennung

Der Großteil der Informationen stammte von selbsthosting Schriftarten (einschließlich Google-Schriftarten) // @font-face Tutorial (YouTube). Informationen zu Vorspannungen/CWVs und der Nicht-GDPR-Einhaltung stammen aus einem Kommentar-Thread auf derselben Seite.