Pré-visualização de fontes
Veja o seu texto em qualquer fonte instalada neste dispositivo, ou envie um arquivo de fonte, e copie o CSS.
Lista todas as fontes instaladas neste dispositivo. Apenas em navegadores Chromium — o navegador pede permissão uma vez.
Nada enviado ainda.
TTF, OTF, WOFF e WOFF2 até 20 MB. As fontes enviadas são registradas apenas nesta página: não são mandadas para lugar nenhum e são descartadas ao recarregar.
font-family: system-ui; font-size: 44px; font-weight: 400; font-style: normal; letter-spacing: 0px; line-height: 1.35; text-align: left; text-transform: none; color: #0f172a; background-color: #ffffff;
O que é uma ferramenta de pré-visualização de fontes?
A maioria das pré-visualizações de fontes na web mostra sempre a mesma lista curta de fontes «seguras para a web» — uma lista que você já conhece e que não diz nada sobre as fontes realmente instaladas na sua máquina. Esta página faz o caminho inverso e parte do seu próprio sistema.
Há três formas de colocar uma fonte aqui. As famílias genéricas (system-ui, sans-serif, serif, monospace) funcionam em qualquer navegador. «Ler fontes locais» enumera, pela Local Font Access API do navegador, todas as fontes instaladas neste dispositivo e as coloca no seletor — elas aparecem na hora, porque os contornos já estão na sua máquina e nada é baixado. Ou envie um arquivo de fonte (TTF, OTF, WOFF ou WOFF2) e a página o registra para esta sessão, assim você pode conferir uma tipografia de marca licenciada sem instalá-la.
Escolha uma fonte, digite o seu texto e ajuste tamanho, peso, estilo, espaçamento, altura da linha, cores e alinhamento. A linha do conjunto de caracteres mostra como números e pontuação se comportam, e o bloco CSS está pronto para copiar — com o esqueleto @font-face incluído quando a fonte ativa veio de um arquivo enviado.
Nem o seu texto nem os seus arquivos saem do navegador.
Como usar
Primeiros passos
- Escolha uma fonte no painel «Origem da fonte». As famílias genéricas funcionam em qualquer lugar; «Ler fontes locais» lista tudo o que está instalado neste dispositivo.
- Para pré-visualizar uma fonte que você já tem como arquivo, clique em «Enviar arquivo de fonte» e escolha um TTF, OTF, WOFF ou WOFF2. Ela é registrada para esta sessão e aparece no mesmo seletor.
- Digite o texto que quer conferir — um título, o rótulo de um botão, o nome de um produto.
- Ajuste tamanho, peso, estilo, espaçamento entre letras, altura da linha, alinhamento, caixa do texto e as duas cores. A pré-visualização aplica exatamente as mesmas propriedades CSS da sua folha de estilo.
- Copie o bloco CSS. Se a fonte foi enviada, ele traz também um esqueleto @font-face em que o nome original do arquivo ocupa o lugar do caminho.
Dicas para resultados confiáveis
- A lista enumerada é exata, mas descreve apenas este dispositivo. O que está instalado aqui não está necessariamente nos computadores dos seus visitantes: mantenha uma pilha de reserva no CSS de produção.
- A enumeração de fontes locais é exclusiva do Chromium e exige um contexto seguro (HTTPS ou localhost). Em Safari e Firefox o botão fica oculto e o motivo é informado; o envio continua disponível.
- Uma família com vários pesos ou estilos aparece uma única vez no seletor. Use o controle de peso e o botão de itálico para alternar entre os cortes que ela realmente traz.
- As fontes enviadas vivem apenas na memória: ao recarregar são descartadas e nada é gravado no disco. É uma decisão deliberada, não uma limitação que dá para desligar nas configurações.
- Arquivos CJK grandes (10 MB ou mais) levam um instante para serem analisados; o seletor é atualizado assim que a fonte é decodificada.
Casos de uso
Como fontes locais e envios são tratados
Duas APIs do navegador sem relação entre si trabalham aqui, e seus comportamentos são bem diferentes.
A enumeração das fontes instaladas usa a Local Font Access API: window.queryLocalFonts() devolve um registro por corte instalado, com família, nome completo, nome PostScript e estilo. A página agrupa esses registros por família, ordena e entrega ao seletor. Para renderizar não é preciso baixar nada: o nome da família vai direto para o CSS e os contornos são fornecidos pelo sistema operacional, exatamente como na sua própria folha de estilo. O Chromium oferece a API após uma permissão única; Safari e Firefox não a implementam, por isso a entrada é ocultada ali em vez de ser deixada para falhar.
O envio usa a Font Loading API: o arquivo é lido em um ArrayBuffer, entregue a new FontFace(family, buffer), carregado e adicionado a document.fonts. A partir daí a fonte se comporta como qualquer outra família e pode ser referenciada pelo nome no CSS.
- queryLocalFonts() exige um contexto seguro (HTTPS ou localhost) e rejeita com NotAllowedError se o diálogo de permissão for descartado; o painel informa os dois casos em vez de lançar uma exceção.
- Uma mesma família pode aparecer em vários estilos. A lista é deduplicada pelo nome da família, então cada tipografia aparece uma vez e o controle de estilo escolhe o corte.
- FontFace aceita TTF, OTF, WOFF e WOFF2. Um arquivo corrompido ou de formato não suportado faz load() falhar; a página avisa em vez de deixar uma entrada quebrada no seletor.
- Os envios ficam apenas na memória — sem requisições de rede, sem gravação em disco, sem localStorage. É por isso que não sobrevivem a um recarregamento.
- As famílias genéricas são resolvidas internamente pelo navegador e não precisam de API nenhuma, e por isso continuam disponíveis onde as outras duas vias estão fechadas.
Exemplos
Listar as fontes instaladas neste dispositivo
const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]
const families = [...new Set(faces.map((f) => f.family))].sort();
// O que for escolhido vai direto para o CSS: os contornos vêm do sistema,
// nenhum arquivo é baixado
element.style.fontFamily = `"${families[0]}", sans-serif`;Registrar um arquivo enviado
const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load(); // falha se o arquivo estiver corrompido ou o formato não valer
document.fonts.add(face);
// a partir daqui, exatamente como uma fonte instalada localmente
element.style.fontFamily = '"Aurora Sans", sans-serif';O bloco CSS de uma fonte enviada
@font-face {
font-family: "Aurora Sans";
src: url("./AuroraSans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;
/* O caminho em src é um marcador: troque pelo endereço
de onde você serve o arquivo. */Perguntas frequentes
Por que o botão «Ler fontes locais» não aparece no meu navegador?
A Local Font Access API só está implementada em navegadores Chromium (Chrome, Edge, Opera, Brave) e exige uma origem segura (HTTPS ou localhost). Em Safari e Firefox o botão fica oculto e o painel explica o motivo; tanto enviar um arquivo quanto as famílias genéricas continuam funcionando.
A leitura das minhas fontes instaladas envia algo a um servidor?
Não. O navegador mostra um diálogo de permissão e, depois que você autoriza, a página recebe apenas nomes de famílias e estilos. Nenhum dado de fonte é lido, nada é enviado e a lista não é transmitida a lugar algum.
As fontes que eu envio são salvas ou mandadas para algum lugar?
Nem uma coisa nem outra. O arquivo é lido na memória, registrado no conjunto de fontes do navegador e descartado ao fechar ou recarregar a página. Não há requisição de rede, nem gravação em disco, nem localStorage.
Por que minhas fontes enviadas desaparecem ao recarregar?
Porque a página as mantém na memória de propósito. Mantê-las exigiria gravar o arquivo de fonte no armazenamento do navegador, e uma ferramenta de pré-visualização não tem motivo para guardar uma cópia de um arquivo que você já tem. Basta enviar de novo para continuar.
Quais formatos posso enviar?
TTF, OTF, WOFF e WOFF2, até 20 MB por arquivo: são os quatro formatos de contêiner aceitos pelo FontFace do navegador. Coleções TrueType (.ttc) reúnem vários cortes em um único arquivo e não são suportadas; exporte os cortes separadamente.
Por que alguns pesos parecem estranhos ou grossos demais?
Quando a família não tem o peso pedido, o navegador o sintetiza: o falso negrito engrossa os contornos e o falso itálico os inclina. Se só o 600 fica borrado enquanto 400 e 700 estão normais, é que a família não tem um 600.
Posso usar isto para descobrir o que meus visitantes têm instalado?
Não, e nenhum site consegue. A enumeração exige um diálogo de permissão explícito na máquina do visitante, então uma página nunca consegue inventariar escondido as fontes de um estranho. A lista daqui descreve apenas este dispositivo, e é justamente por isso que uma pilha de reserva deve ficar no CSS de produção.
O que colocar na URL do src do @font-face?
O caminho de onde o seu build serve o arquivo de fonte, por exemplo /fonts/AuroraSans.woff2. A palavra-chave format() é gerada corretamente a partir da extensão, então só a URL precisa ser trocada.
Ferramentas relacionadas
二维码生成器
在线二维码生成工具，支持文本、网址、名片等类型。自定义样式、颜色、大小，一键下载高清图片。
颜色选择器
在线颜色选择工具，HEX、RGB、HSL格式互转。生成调色板，获取网页配色，提升设计效率。
条形码生成器
在线条形码生成器，支持CODE128、EAN13、EAN8、UPC、CODE39、ITF14等多种条码格式。可自定义颜色、尺寸，一键生成并下载PNG或SVG格式条形码。
渐变生成器
在线CSS渐变生成工具，创建线性渐变、径向渐变背景。可视化调整颜色，一键复制CSS代码。
屏幕检测
在线屏幕检测工具，检测坏点、亮点、漏光问题。多种纯色测试、对比度测试，评估显示器质量。
SVG 查看器
在线SVG查看器和编辑器，实时预览SVG代码效果。支持源码编辑、可视化预览、下载SVG文件，前端开发者和设计师必备工具。
