self hosting fonts

permalien
/Index.html

Site Web (pages GIT)

Polices d'auto-hébergement

Beaucoup d'entre nous utilisent des polices Google via un CDN. Cependant, l'Allemagne a décidé que cela contrevient au RGPD, laissant les propriétaires de sites ouverts aux litiges.

Nous pouvons toujours afficher des polices Google par:

1. Télécharger la police (variantes) à partir des polices Google, puis
2. Convertir les fichiers .TTF en .woff et .woff2 à l'aide d'un générateur de polices Web, puis
3. Utilisation de Font-Face dans le CSS et
4. Préchargement des polices dans le HTML.

Remarque : Cette page se concentre sur les polices Google, mais les mêmes principes s'appliquent à tout autre type de police Web.

Générateurs de polices Web

Squirrel de police Cela a fonctionné pour "Roboto" mais a échoué avec les versions de police statiques de "Lato" et "Open Sans".

Creative Fabrica J'ai utilisé ceci pour les fichiers statiques "lato" et "ouvrir SANS". J'ai dû télécharger chaque variante, une à la fois.

Html

On m'a conseillé de précharger les polices dans la tête de la page HTML. Ceci est censé accélérer la livraison des polices et augmenter les performances de base de Google Web Vitals (CWVS). Cependant, j'ai vu des avertissements après avoir fait cela (voir Testing / Firefox et Firefox Developer Edition ci-dessous).

 < 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" );
}

Essai

• Testé sur:
• Windows 10
• Chrome
• Firefox, Firefox Developer Edition
  • Note . Des avertissements ont été affichés dans les consoles de ces deux navigateurs. Les avertissements étaient de 2 types:
  1. La mise en page a été forcée avant que la page ne soit entièrement chargée. Si les feuilles de styles ne sont pas encore chargées, cela peut provoquer un flash de contenu non style.
  2. Les autres avertissements étaient pour chaque variante de police et se sont produits après environ 10 secondes, par exemple pour "Lato":
  • La ressource de «https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-light-webfont.woff2» préchargement avec la précharge de lien n'a pas été utilisée en quelques secondes. Assurez-vous que tous les attributs de la balise de précharge sont correctement définis.
  • La ressource de «https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2» préchargée avec la précharge de lien n'a pas été utilisée en quelques secondes. Assurez-vous que tous les attributs de la balise de précharge sont correctement définis.
  • La ressource de «https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2» préchargement avec la précharge de lien n'a pas été utilisée en quelques secondes. Assurez-vous que tous les attributs de la balise de précharge sont correctement définis.
  • La discussion et la recherche sur le débordement de pile n'ont pas donné de réponse compréhensible. Cependant, j'ai posté une question moi-même sur Stack Overflow et si elle est répondue, je mettrai à jour ce Readme.md avec de nouvelles informations.
• Microsoft Edge

Remerciements

La majeure partie des informations provenait des polices d'auto-hébergement expliquées (y compris les polices Google) // @ Font-Face Tutorial (YouTube). Les informations sur le préchargement / CWV et la conformité non GDPR ont émergé d'un fil de commentaires sur la même page.