Inserindo fontes extras no seu site Webacappella com FontFace

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