queryLocalFonts

Um dos maiores downloads ao solicitar uma página da Web são as fontes personalizadas. Há muitas técnicas excelentes de carregamento lento de fontes para melhorar o desempenho de quem tem conexões ruins. Ao obter informações sobre as fontes que o usuário tem disponíveis, podemos evitar o carregamento de fontes personalizadas. É por isso que o queryLocalFonts uma função JavaScript nativa para coletar informações sobre a fonte do usuário.

queryLocalFonts é um async que requer permissão do usuário por meio de um prompt do navegador quando executada pela primeira vez. queryLocalFonts retorna uma matriz de FontData que contém informações sobre todas as fontes disponíveis:

const localFonts = await window.queryLocalFonts();

// [FontData, FontData, ...]

/*
{
  family: "Academy Engraved LET",
  fullName: "Academy Engraved LET Plain:1.0",
  postscriptName: "AcademyEngravedLetPlain",
  style: "Plain",
}
*/

Se o senhor quiser direcionar uma face de fonte específica, também pode consultar diretamente o objeto postscriptName propriedade:

const canelaFonts = await window.queryLocalFonts({
  postscriptNames: ["Canela", "Canela-Bold"],
});

// [FontData, FontData, ...]

Com queryLocalFonts o senhor pode aproveitar as fontes que o usuário já possui em vez de baixar fontes personalizadas caras. No entanto, a solicitação de permissões parece que impediria os usuários de permitir a API. Mas é muito legal que essa API exista!