Olá galera do bem,
Já aconteceu de se fazer um projeto usando uma fonte (tipo de letra) , no seu equipamento a fonte escolhida navegando no site aparece normalmente , mas ao visitar o site em outro equipamento aparece outra fonte que não tem nada haver com a que você definiu?
Pois bem, simples, isso acontece devido você ter escolhido uma fonte que existe instalada no seu equipamento e não é uma fonte de sistema. Se esta fonte não estiver instalada no equipamento que estiver navegando no site, será substituída por uma fonte do sistema.
Não é nenhuma novidade não é?
Mas vamos contornar esta situação com o FontFace.
Então faça assim:
Na raiz da hospedam do site crie duas pastas caso não existir. Uma de nome "fontes" e outra "css".
Localize o arquivo da fonte no seu computador , ou baixe na internet. Geralmente a extensão do arquivo da fonte é "ttf" ou "otf".
Hospede este arquivo dentro da pasta fontes criada na sua hospedagem.
Agora com um editor de texto crie um arquivo com o nome fontes.css
Copie o código abaixo e cole neste arquivo fontes.css
@font-face {
font-family: "nomedafonte";
src: url("nomedafonte.ttf") format("truetype");
}
.nomedafonte-font{
font-family: "nomedafonte";
}
Substitua os trechos em vermelho conforme abaixo:
nomefonte: somente o nome da fonte
nomedafonte.ttf : pela url completa da fonte.
Como exemplo vou utilizar a fonte usada na logo do Instagram. A fonte se chama billabong.ttf
então ficará assim:
@font-face {
font-family: "billabong";
src: url("http://www.webacappellashow.com.br/templates/spa/fontes/billabong.ttf") format("truetype");
}
billabong-font{
font-family: "billabong";
}
Agora salve o arquivo fontes.css e hospede dentro da pasta "css" na sua hospedagem.
No Webacappella vai na opção SITE>> PROPRIEDADES DO SITE, clique na catraca e cole o seguinte código no campo head.
<link href="css/fontes.css" rel="stylesheet">
Prontinho, agora a fonte escolhida vai aparecer corretamente no seu site mesmo que o visitante não a tenha instalado no seu equipamento
