Arial Narrow no CSS: pilha font-family e código @font-face
Revisado em pela equipe editorial do ArialNarrow.com
Resposta rápida
Escreva font-family: 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;. Quem tem o Office vê a fonte original, quem usa Linux recebe um clone com as mesmas larguras e o resto vê a Arial. Para mostrar a Arial Narrow para todos os visitantes, compre uma licença web da Monotype e hospede a fonte você mesmo com @font-face.
1. Uso básico do font-family (sem licença)
Este jeito não custa nada e não precisa de licença. Você só cita o nome da fonte, e o navegador de cada visitante usa a cópia instalada dele, se houver:
.text-arial-narrow {
font-family: 'Arial Narrow', Arial, sans-serif;
}
.text-arial-narrow-bold {
font-family: 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
}Repare na ordem do fallback: navegadores no macOS ou no Linux sem a Arial Narrow pulam direto para a Arial padrão (ou para a substituta com métricas compatíveis), e não para uma fonte que não tem nada a ver.
2. Implementação com @font-face (fonte web licenciada)
Quer que todos os visitantes vejam a mesma coisa? Compre uma licença web da Monotype, converta os arquivos para WOFF2, hospede-os você mesmo e declare assim:
@font-face {
font-family: 'Arial Narrow';
src: url('/fonts/ArialNarrow.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arial Narrow';
src: url('/fonts/ArialNarrow-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}O font-display: swap mantém o texto visível enquanto o arquivo baixa. O FAQ abaixo explica por quê.
3. Pilha de fallback para todos os navegadores
Esta pilha ordena as fontes da mais parecida para a mais genérica, então cada sistema operacional cai na melhor fonte que tem:
font-family: 'Arial Narrow', 'Liberation Sans Narrow',
'Helvetica Neue Condensed', Arial, sans-serif;A Liberation Sans Narrow pega o Linux, a Helvetica Neue Condensed pega o Mac (só para texto em negrito, já que o macOS traz apenas os pesos Condensed Bold e Black) e Arial, sans-serif cobre o resto.
4. Suporte dos navegadores
@font-face e font-display funcionam em todas as versões atuais do Chrome, Firefox, Safari e Edge. A única preocupação prática é o formato da fonte: sirva .woff2 como formato principal (menor arquivo e suporte universal nos navegadores modernos), com um fallback em .woff só se você ainda precisa atender navegadores de antes de 2016, mais ou menos.
Atenção à licença
Nunca suba para um servidor web o TTF da pasta de fontes do Windows. A licença do Office não cobre incorporação na web, e as fundidoras mandam, sim, notificações de violação para sites que hospedam a fonte sem licença. Regras de licença web da Arial Narrow → Prefere pular a parte da licença de vez? Fontes grátis do Google parecidas →
Perguntas frequentes
Por que font-family: "Arial Narrow" aparece com outra fonte no Mac ou no Linux?
O navegador só consegue usar as fontes que o visitante tem. A Arial Narrow vem com o Microsoft Office, então Macs sem Office e a maioria das máquinas Linux não a têm. O navegador desce pela sua pilha de fontes sem avisar e usa a próxima que encontrar, muitas vezes a Liberation Sans Narrow no Linux ou a Arial comum no Mac.
O que o font-display: swap faz na prática?
Ele diz ao navegador para mostrar o texto na hora com uma fonte de fallback e trocar para a fonte web quando ela chegar. Sem isso, alguns navegadores escondem o texto por até três segundos enquanto o arquivo baixa. Você troca uma pequena mudança no layout por um texto que dá para ler na hora, e isso quase sempre compensa.
Posso fazer subset do arquivo da fonte para carregar mais rápido?
Sim, desde que a licença permita modificações. Remova os sistemas de escrita que você nunca usa, como grego e cirílico, com o pyftsubset do fonttools ou o glyphhanger, e o arquivo WOFF2 muitas vezes cai para menos da metade. Depois, adicione uma linha unicode-range na regra @font-face para que o navegador só baixe a fonte quando precisar.
Posso carregar a Arial Narrow pelo Google Fonts?
Não. O Google Fonts só hospeda fontes de código aberto, e a Arial Narrow é proprietária. As fontes mais próximas que o Google oferece são Roboto Condensed, Archivo Narrow e Barlow Condensed.