Inserindo Fontes em um Template do WordPress

Published in 19 de abril de 2019 by


Nesse artigo você irá aprender a importar uma fonte para o WordPress sem a necessidade de plugins e que funcione em todos os navegadores, em especial o Internet Explorer.

Existem diversas formas fáceis de inserir fontes em site WordPress, como por exemplo instalar um plugin, mas instalar outro plugin? Para os amantes de código, a resposta é não!

A vantagem principal de fazer pela forma mais difícil é que não teremos preocupação de um dia essa fonte sair ar, pois ela estará em seu servidor.

Fique de olho no passo a passo:

1 – Escolher uma fonte para usar, nesse tutorial iremos buscar a fonte do Google Fonts: https://fonts.google.com/

Após escolher a fonte, clique no sinal de mais no canto superior direito, segue um print:

Irá surgir na parte inferior  da página algo semelhante ao GIF abaixo:

Clique na caixa que surgiu para abrir as opções, no canto superior direito existem um ícone indicando onde o local para fazer download:

No caso deste tutorial, optei pelo download, se você optar pelo EMBED é mais simples, pois é necessário apenas inserir um código no head e outro no arquivo CSS.

Seguindo pela forma mais difícil…

2 – Logo após o Download e descompactar o arquivo, crie uma pasta chamada fonts dentro da pasta do seu template (raiz/wp-content/themes/nome-do-tema) e cole os arquivos lá.

Tipo assim:

Depois é bem simples, adicione os códigos abaixo no seu arquivo CSS e faça as alterações necessárias.

@font-face {
    font-family: Nunito;
    src: local(Nunito), url(../fonts/Nunito/Nunito-Regular.ttf)
}

#chamada{
	font-family: 'Nunito';
}
<center>
	<h2 id="chamada">Últimas Notícias</h2>
</center>

Se desejar inserir mais de uma fonte em seu template, você pode fazer das seguintes formas:

@font-face {
    font-family: ProstoOne-Regular;
    src: local(ProstoOne-Regular), url(../fonts/ProstoOne-Regular/ProstoOne-Regular.ttf)
}

@font-face {
    font-family: BreeSerif-Regular;
    src: local(BreeSerif-Regular), url(../fonts/BreeSerif-Regular/BreeSerif-Regular.ttf)
}

Ou

@font-face {
    font-family: Nunito;
    src: local(Nunito), url(../fonts/Nunito/Nunito-Regular.ttf);
    font-family: QueenofCamelot;
    src: local(QueenofCamelot), url(../fonts/queen-of-camelot/QueenofCamelot.otf);
}

Se você tiver alguma dúvida ou sugestão é só deixar nos comentários!


Categories: Sem categoria

Leave a comment

Your email address will not be published.

*
*

4 × 2 =