Como carregar
Uma linha resolve. O fontes.css já traz o @font-face das duas famílias, com font-display: swap e a faixa de peso variável inteira.
<link rel="stylesheet" href="https://cdn.biglink.io/brand/v1/fontes/fontes.css">
/* depois disso, use os tokens */
h1, h2, h3{ font-family: var(--bl-fonte-titulo); }
body{ font-family: var(--bl-fonte-texto); }
Uma família por papel
Onest em título, interface e número grande. Inter em texto corrido e tabela. Não inverta: a marca perde a voz e ninguém sabe dizer por quê.
Se precisar declarar na mão
Em projeto que não pode incluir CSS de terceiro, copie os dois blocos. As fontes são variáveis, então um arquivo cobre de 100 a 900 e não existe arquivo por peso.
@font-face{
font-family:'Onest';
src:url('https://cdn.biglink.io/brand/v1/fontes/onest-variable.woff2') format('woff2-variations'),
url('https://cdn.biglink.io/brand/v1/fontes/onest-variable.woff2') format('woff2');
font-weight:100 900;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:'Inter';
src:url('https://cdn.biglink.io/brand/v1/fontes/inter-variable.woff2') format('woff2-variations'),
url('https://cdn.biglink.io/brand/v1/fontes/inter-variable.woff2') format('woff2');
font-weight:100 900;
font-style:normal;
font-display:swap;
}
:root{
--bl-fonte-titulo: 'Onest', 'Segoe UI', Arial, Helvetica, sans-serif;
--bl-fonte-texto: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
}
Pilha de fallback
--bl-fonte-titulo: 'Onest', 'Segoe UI', Arial, Helvetica, sans-serif; --bl-fonte-texto: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
Em e-mail, não
Cliente de e-mail não carrega webfont de forma confiável, e o Outlook simplesmente ignora. Em comunicado, declare 'Onest',Arial,Helvetica,sans-serif em cada elemento e conte com o fallback. O que importa é a mensagem chegar legível.
O que a OFL obriga você a fazer
Onest e Inter são SIL Open Font License 1.1. Usar em produto comercial, converter formato e embutir tudo é permitido. Duas obrigações valem sempre: não vender a fonte sozinha e fazer o aviso de copyright e o texto da licença acompanharem cada cópia redistribuída.
Consumindo do CDN pelo fontes.css, você não redistribui nada e não precisa fazer mais nada: as licenças já estão publicadas ao lado dos arquivos e citadas no cabeçalho do CSS. Se você copiar o .woff2 para dentro do seu projeto, aí passa a redistribuir, e precisa levar junto o arquivo de licença correspondente.
LICENCA-ONEST.txt · LICENCA-INTER.txt
Nenhuma das duas distribuições declara Nome de Fonte Reservado depois da linha de copyright, então a conversão para WOFF2 pode manter os nomes Onest e Inter. Se um dia alguém baixar o Inter direto do repositório do autor em vez do Google Fonts, confira de novo: lá o nome é reservado.
Os arquivos
Nenhum arquivo com esses filtros.