A melhor maneira de adicionar uma fonte externa no seu site

janeiro 25, 2022
Tempo de leitura: 3 minutos

As fontes disponíveis no Wordpress são as Google Fonts. Porém o que fazer quando o layout pede uma fonte externa? Apesar de existir mais de uma maneira, a seguir você encontrará a mais eficiente para otimizar o seu site.

Porque essa é a melhor maneira

Embora esse não seja o único modo, ele é o melhor para você e o seu site. Mas por quê?

Por exemplo: se adicionar os arquivos da fonte no tema, não poderá continuar usando se precisar trocá-lo. Além disso, o melhor lugar para colocar sua fonte é no servidor do site já que o navegador baixa a fonte diretamente de lá. Isso significa não só que você pode trocar de tema, mas também que a fonte carregará mais rápido.

Também, se seguir devidamente o passo a passo, além de eficiente é uma maneira rápida e fácil.

Plugins

Você precisará de três plugins para adicionar a fonte externa. O File Manager para pegar o caminho da fonte, My Custom Funcionality Master para inserir o plugin e Elegant Custom Fonts onde adicionaremos as regras da fonte.

Passo a Passo

Por fim, agora vamos ao que realmente interessa: o passo a passo para a instalção.

1- Uma vez que tiver a fonte no seu PC ou notebook, deverá adicioná-la aos arquivos do My Custom Funcionality Master. Para fazê-lo, você só precisa extrair o arquivo .zip do plugin e colar os arquivos da fonte no seguinte local: my-custom-funcionality-master > assets > fonts. É muito importante que todas as fontes tenham seus nomes padronizados e formatos iguais. Por exemplo, se a família da fonte externa for Lato, os arquivos devem estar todos como no print abaixo (capitalize e .ttf). Depois disso, comprima o arquivo com a fonte e adicione-o ao seu site.

Arquivos da fonte

2 - Agora é a hora de instalar os outros plugins (File Manager e Elegant Custom Fonts).

3 - Ao instalar o File Manager, ele vai aparecer na barra lateral do Wordpress. É só clicar que os arquivos irão aparecer. Na sequencia você deve procurar pelo seguinte caminho: wp-content > plugins > my-custom-funcionality-master > assets > fonts.

4 - Após chegar nos arquivos da fonte é só clicar com o botão direito, depois em Get info & Share. Em "Path :" você copiará o caminha da fonte a partir de /wp-content. Refaça esse processo em todos os arquivos, um a um. Uma dica interessante é que você copie e cole esse caminho, num bloco de notas por exemplo, para evitar erros e agilizar o processo.

5 - Feito isso temos a parte final e mais importante do processo. No Elegant Custom Fonts, adicione uma nova Font Family. Após colocar o nome, é hora de acrescentar a font-face. É nesse momento em que você precisa de mais atenção para que não adicione nada diferente do layout. Após escolher font-weight e font-style, o .woff URL é aquele caminho do passo 4, lembra? É só colar ele aqui. Não se esqueça de conferir se está tudo certo. Se houver uma segunda família de fonte, é só repetir o processo em uma nova Font Family.

6 - Depois de conferir e tudo estiver certo, a(s) fonte(s) irá aparecer no seu site e voilá! Você acabou de instalar uma fonte externa da melhor maneira possível!

É importante lembrar que, se algo deu errado, não precisa desanimar. Reveja o passo a passo com calma e refaça onde errou.

Se curtiu essa dica acompanhe nosso blog para muito mais!

Você também pode se interessar:

© MDGA Comunicação e Design - Todos os direitos reservados 2016-
2022
menu-circle