Digamos que eu precise colocar uma fonte personalizada no meu site.
Eu tenho essa fonte, digamos que ela se chama "Aphias". Eu uso essa pergunta: https://stackoverflow.com/a/43366402/3536236 e tenho o CSS assim:
@font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias.woff') format('woff'),
url('/assets/fonts/Aphias.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Ok, mas a fonte que tenho tem muitos arquivos separados para diferentes iterações, como um arquivo Bold e um arquivo itálico.
Meu diretório de fontes contém:
Aphias.ttf
Aphias.woff
Aphias-Negrito.ttf
Aphias-Negrito.woff
Aphias-Itálico.ttf
Aphias-Itálico.woff
Qual é a maneira correta de adicionar essas iterações ao CSS para que, por exemplo, a <strong></strong>
versão da fonte seja carregada no momento correto ou quando um texto for marcado como font-weight: bold;
tal, a iteração em negrito seja exibida:
Por exemplo
@font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias.woff') format('woff'),
url('/assets/fonts/Aphias.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'Aphias', Arial, sans-serif;
font-size: 1rem;
}
p > span {
font-weight: bold;
}
<p>
This is some text with the custom font on display. Loaded from the font file.
<span>This is the same text but should be bold / heavy font.</span></p>
Acho que a única maneira de fazer isso é com vários @font-face
s, mas eles parecem não funcionar.
por exemplo
@font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias.woff') format('woff'),
url('/assets/fonts/Aphias.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Aphias Italic';
src: url('/assets/fonts/Aphias-Italic.woff') format('woff'),
url('/assets/fonts/Aphias-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Aphias Bold';
src: url('/assets/fonts/Aphias-Bold.woff') format('woff'),
url('/assets/fonts/Aphias-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Não consigo encontrar nenhuma documentação sobre esse problema específico. Como faço isso funcionar? A pergunta semelhante aqui: Definindo CSS @Font-Face bold italic answers não respondem realmente à pergunta feita.