Este artigo reúne algumas anotações sobre o uso de @font-face em sites para permitir o uso de fontes independentemente do usuário tê-las carregadas no sistema.
Compreensão Geral
A base das explicações sobre o uso de @font-face, e sempre um ótimo lugar para começar é a W3Schools. No link abaixo é explicado o básico sobre a regra @font-face.
https://www.w3schools.com/css/css3_fonts.asp
Um exemplo completo de processo para incluir uma fonte em um site é muito bem descrito neste macro tutorial da Mozilla.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
Aprofundamento
Este artigo é um aprofundamento sobre o trabalho com as fontes e como aproveitá-las bem, além de explicar mais sobre os formatos, aborda outros temas como font-smoothing e font-kerning.
Conversor de Fontes
Você em algum momento precisará converter as fontes ttf ou otf para um formato bem aceito nos navegadores. Eu usei este do link abaixo. Ele gera as fontes em formato .woff e .woff2.
https://www.fontsquirrel.com/tools/webfont-generator
Checagem com editor do Firefox
O editor de fontes do Firefox me ajuda muito na checagem final do uso das fontes para verificar se apliquei o nome das famílias corretamente e se as diferenciações de negrito e itálico estão bem colocadas. O link abaixo explica como usar
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts
Configuração do @font-face
Este é o artigo que considero mais importante. Ele explica muito detalhadamente as diversas formas de configurar o uso das fontes para contemplar negrito e itálico.
Não entender a forma como essa diferenciação de fontes ocorre pode gerar problemas graves de itálico ou negrito duplo ou de não aplicação dos estilos, descaracterizando a fonte desejada.
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/
Conclusões
- Na prática o formato .woff sozinho é suficiente;
- Se quiser adicionar o .woff2 para sites que tem suporte, é legal, economiza transferência de rede e é sempre bom otimizar.
- É muito importante checar se as fontes estão sendo usadas corretamente antes de publicar, um pequeno erro de digitação e o navegador vai usar uma fonte de fallback. E caso seu olho não seja muito bom de detalhe como o meu, você pode achar que a fonte está corretíssima. O editor de fontes do Firefox é excelente para isso.
- Eu prefiro configurar as fontes de negrito e itálico com as propriedades font-weight e font-style apropriadas. Isso elimina a necessidade de ficar ajustando todas as regras possíveis de CSS onde um negrito ou itálico seria aplicado. Considero também mais elegante e parecido com a maneira como usamos fontes no sistema.