self hosting fonts

enlace permanente
/index.html

Sitio web (páginas Git)

Fuentes de auto y anfitrionas

Muchos de nosotros usamos Google Fonts a través de un CDN. Sin embargo, Alemania ha decidido que esto contraviene GDPR, dejando a los propietarios del sitio abiertos a litigios.

Todavía podemos mostrar las fuentes de Google por:

1. Descargar la fuente (variantes) de Google Fonts, luego
2. Convertir los archivos .ttf a .woff y .woff2 utilizando un generador de fuente web, luego
3. Usar @font-face en el CSS y
4. precarga las fuentes en el HTML.

Nota : Esta página se concentra en Google Fonts, pero los mismos principios se aplican a cualquier otro tipo de fuente web.

Generadores de fuentes web

Font Squirrel Esto funcionó para "Roboto", pero falló con las versiones de fuentes estáticas de "Lato" y "Open Sans".

Creative FabricA Usé esto para archivos estáticos "Lato" y "Open Sans". Tuve que cargar cada variante, una a la vez.

Html

Me aconsejaron precargar las fuentes en la cabeza de la página HTML. Se supone que esto acelera la entrega de las fuentes y aumenta el rendimiento de los vitales de la web (CWV) de Google. Sin embargo, vi advertencias después de hacer esto (ver Pruebas/Firefox y Firefox Developer Edition, a continuación).

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

Pruebas

• Probado en:
• Windows 10
• Cromo
• Firefox, Firefox Developer Edition
  • Nota . Las advertencias se mostraron en las consolas de solo estos dos navegadores. Las advertencias eran de 2 tipos:
  1. El diseño se forzó antes de que la página estuviera completamente cargada. Si las hojas de estilo aún no se cargan, esto puede causar un destello de contenido no establecido.
  2. Las otras advertencias fueron para cada variante de fuente, y ocurrieron después de unos 10 segundos, por ejemplo, para "lato":
  • El recurso en "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-light-webfont.woff2" previamente con precarga de enlace no se usó en unos pocos segundos. Asegúrese de que todos los atributos de la etiqueta de precarga se establezcan correctamente.
  • El recurso en "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2" previamente con precarga de enlace no se usó en unos pocos segundos. Asegúrese de que todos los atributos de la etiqueta de precarga se establezcan correctamente.
  • El recurso en "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2" previamente con precarga de enlace no se usó en unos pocos segundos. Asegúrese de que todos los atributos de la etiqueta de precarga se establezcan correctamente.
  • La discusión y la búsqueda en el desbordamiento de la pila no han arrojado una respuesta comprensible. Sin embargo, publiqué una pregunta en Stack Overflow y, si se responde, actualizaré este ReadMe.md con cualquier información nueva.
• Microsoft Edge

Expresiones de gratitud

La mayor parte de la información provino de las fuentes autohostantes explicadas (incluidas las fuentes de Google) // @tutorial de fuentes (YouTube). La información sobre la precarga/CWVS y el cumplimiento no GDPR surgieron de un hilo de comentarios en la misma página.