self hosting fonts

Permalink
/index.html

Site (Páginas Git)

Fontes auto-hospedeiras

Muitos de nós usam fontes do Google por meio de um CDN. No entanto, a Alemanha decidiu que isso viola o GDPR, deixando os proprietários de sites abertos a litígios.

Ainda podemos exibir fontes do Google por:

1. Baixando a fonte (variantes) do Google Fontes, então
2. convertendo os arquivos .ttf para .woff e .woff2 usando um gerador de fonte da web, então
3. usando @font-face no CSS e
4. pré -carregar as fontes no HTML.

Nota : Esta página se concentra no Google Fontes, mas os mesmos princípios se aplicam a qualquer outro tipo de fonte da Web.

Geradores de fonte da web

Esquilo de fonte Isso funcionou para "Roboto", mas falhou com as versões estáticas da fonte de "Lato" e "Open Sans".

Fabrica criativo Eu usei isso para arquivos estáticos "Lato" e "Open Sans". Eu tive que fazer upload de cada variante, uma de cada vez.

Html

Fui aconselhado a pré -carregar as fontes na cabeça da página HTML. Isso deve acelerar a entrega das fontes e aumentar o desempenho principal da Web (CWVS) do Google. No entanto, vi avisos depois de fazer isso (consulte a edição de Testing/Firefox e Firefox, abaixo).

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

Teste

• Testado em:
• Windows 10
• Cromo
• Firefox, edição de desenvolvedor do Firefox
  • Observação . Os avisos foram exibidos nos consoles apenas desses dois navegadores. Os avisos foram de 2 tipos:
  1. O layout foi forçado antes que a página fosse totalmente carregada. Se as folhas de estilo ainda não estiverem carregadas, isso poderá causar um lampejo de conteúdo não disposto.
  2. Os outros avisos foram para cada variante da fonte e ocorreram após cerca de 10 segundos, por exemplo, "Lato":
  • O recurso em “https://chrisnajman.github.io/selfhosting-fonts/fonts/lato/lato-light-webfont.woff2” pré-carregado com a pré-carga do link não foi usado dentro de alguns segundos. Verifique se todos os atributos da tag pré -carga estão definidos corretamente.
  • O recurso em “https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2” pré-carregado com a pré-carga do link não foi usado dentro de alguns segundos. Verifique se todos os atributos da tag pré -carga estão definidos corretamente.
  • O recurso em “https://chrisnajman.github.io/selfhosting-fonts/fonts/lato/lato-bold-webfont.woff2” pré-carregado com a pré-carga do link não foi usado dentro de alguns segundos. Verifique se todos os atributos da tag pré -carga estão definidos corretamente.
  • A discussão e a pesquisa no transbordamento da pilha não produziram uma resposta compreensível. No entanto, eu mesmo publiquei uma pergunta no Stack Overflow e, se for respondido, atualizarei este ReadMe.md com qualquer nova informação.
• Microsoft Edge

Agradecimentos

A maior parte da informação veio de fontes auto-hospedeiras explicadas (incluindo o Google Fonts) // Tutorial de Font-Face (YouTube). Informações sobre pré-carregamento/CWVs e conformidade não-GDPR emergiram de um thread de comentários na mesma página.