Como incorporar fontes no WordPress ?

Como faço para integrar fontes no WordPress?

As fontes são a vitrine do seu tema. Se forem suficientemente atraentes, eles podem fazer com que seu website profissional e otimizar a experiência do usuário

No entanto, se forem muito “feias”, seu site pode parecer enfadonho e ter uma má experiência de usuário

  • Como o senhor encontra boas fontes?
  • Como o senhor os integra no WordPress?
  • Como o senhor muda a cor e o tamanho deles no WordPress?

Se o senhor alguma vez se fez alguma dessas perguntas, pergunte a si mesmo e continue lendo esse mini-guia.

Vamos começar!

Table des matières

Capítulo 1: Por que usar fontes personalizadas e como adicioná-las ao WordPress?

1.1. Por que usar fontes personalizadas para seu website?

Por padrão, o WordPress oferece temas com fontes já incorporadas. Embora essas fontes sejam ótimas e bastante simpáticas, integrá-las você mesmo com seu toque pessoal pode ter bastantes benefícios para o site

Aqui estão alguns deles:

  • O senhor pode personalizar o tema de acordo com seu gosto

Se o senhor não está realmente encantado com o tema básico de seu site, tem a possibilidade de personalizar você mesmo suas fontes e obter um tema que lhe conviria melhor

  • O senhor se destaca do concurso

A personalização de suas fontes faz com que seu projeto seja diferente do de seus concorrentes, que se mantêm com as fontes padrão do WordPress

Muitos proprietários de sites WordPress estão satisfeitos com as fontes padrão e o design oferecido a eles pelo CMS

Isso, por si só, não é uma coisa ruim. No entanto, se o senhor quiser diferenciar seu site do de seus concorrentes potenciais, a personalização das fontes em seu tema é o melhor caminho a seguir.

  • O projeto de seu site melhorará

Se o senhor escolher as fontes corretas, o projeto geral de seu site terá um facelift, o que é um grande passo para otimizar a experiência do usuário

É evidente que a maioria dos visitantes gostará de passar o tempo em um local otimizado com uma aparência cativante. Este não é o caso de um site com fontes e um tema geral do qual eles se cansam.

Agora, como você integra essas fontes personalizadas em um site WordPress? Isso é o que veremos na próxima seção.

1.2 Como posso acrescentar fontes personalizadas a um site WordPress?

Aqui, vou mostrar-lhe três métodos para personalizar suas fontes no WordPress. O senhor pode escolher entre um e outro:

  • Usar fontes da web;
  • Acrescentar fontes manualmente
  • Acolhimento de fontes em seu site.

É importante notar que esses não são os únicos métodos para personalizar suas fontes. Há outros, mas optei por mostrar-lhe os mais populares e de mais fácil acesso

Vamos ver como funciona cada uma dessas opções

1.2.1. Fontes da Web

O uso de fontes da web é o método mais comum de acrescentar fontes a um website. Há uma grande variedade que o senhor pode usar para personalizar o aspecto de seu site

Primeiro, passemos a uma explicação do termo:

1.2.1.1. O que é uma fonte da web?

As fontes da Web são fontes hospedadas por um provedor externo. Isto é, eles estão armazenados no website do provedor. Para acessá-los, o senhor não precisa baixá-los

Tudo que o senhor tem que fazer é codificar um link para o site do provedor para recuperar as fontes e usá-las diretamente em seu site. O senhor também pode usar uma prorrogação para poupar-se do trabalho de codificação

No entanto, é muito importante não confundir fontes da web com fontes seguras para a web. As fontes seguras para a Internet existem como plano de apoio. Eles só são exibidos quando o visitante do site não consegue se conectar com a fonte que o senhor definiu para seu site.

Isso pode ser porque o servidor do provedor é inalcançável ou o navegador do visitante está desatualizado e não suporta a fonte personalizada

1.2.1.2. Por que usar uma fonte da web?

A vantagem de usar fontes da web é que você tem acesso a uma infinidade de fontes sem necessariamente hospedá-los em seu site ou localmente em seu computador

O senhor economizará muito mais tempo criando algumas linhas de código ou instalando uma extensão em vez de baixar e depois carregar os arquivos de fontes

Além disso, quando o fornecedor em questão precisar fazer atualizações em sua gama de fontes, o senhor terá acesso imediato às versões atualizadas dos arquivos de fontes que o senhor selecionou

Muito flexível, não é isso?

1.2.1.3. Onde encontrar as fontes da web?

A maioria dos provedores populares trabalha sem a necessidade de uma assinatura. No entanto, as fontes podem ser pagas ou gratuitamente, dependendo do provedor

Os provedores mais populares são :

O Google Fonts é o principal fornecedor de fontes da web. Ela oferece uma gama extra grande de fontes gratuitas da web

O senhor também pode salvar as fontes em seu computador e depois usá-las para seus documentos off-line de maneira totalmente gratuita.

Para adicionar fontes da web ao seu site WordPress do Google Fonts, uma das maneiras mais fáceis é usar o Fontes fáceis do Google

Basta baixar o plugin e inserir as fontes da ‘família de fontes’ do Google na guia de tipografia do painel ‘Aparência’ e ‘Personalização’ de seu WordPress.

Uma vez que tenha feito isso, clique em “Salvar e publicar” para ativar suas mudanças.

Se o senhor está procurando fontes de alto nível, Fonts.com é a melhor opção para o senhor. Esse provedor pago lhe fornece fontes de alta qualidade

O Adobe Typekit requer um pouco mais de reserva do que as fontes do Google. É um mercado para tipógrafos profissionais, mas há também algo para os amadores

O Adobe Typekit também oferece um grande número de fontes gratuitas para aqueles que não querem investir e ter acesso às opções de prêmio. O acesso a essa base de fontes requer apenas o registro.

Para usar o Adobe Typekit, vá até a barra de busca a partir da interface de casa e procure por “kits”

Na tela seguinte, selecione a opção “Criar um novo kit”. O senhor será solicitado a digitar o nome de domínio de seu site como ingresso para a próxima fase

Será então fornecido ao senhor um javascript que o senhor deve guardar em uma pequena nota de texto em seu computador.

Seu kit já está pronto. A partir de então, o senhor poderá consultar a coleção do Adobe Typekit e acrescentar as fontes que quiser ao seu kit. A próxima parte é a codificação na interface do seu site WordPress

Lembra-se do trecho de javascript que lhe pedi para salvar?

Agora é o momento de colá-lo no cabeçalho do seu tema.php no arquivo Appearance and Editor tabs

Depois clique em “Atualizar arquivo” e pronto. O senhor poderá acrescentar outras fontes do Adobe Typekit, modificando sua folha de estilo.

Como mencionei acima, há muitos fornecedores de fontes, acabamos de ver os mais populares

Com todos esses fornecedores, o senhor pode integrar diretamente as fontes em suas publicações, criando linhas de código ou usando uma extensão que o senhor instala em seu site WordPress

Também é bom lembrar que provedores como o Google oferecem ao senhor a possibilidade de prever o resultado que obterá depois de ter optado definitivamente por uma determinada fonte.

1.2.2. Adição manual de fontes

A segunda opção que sugiro para personalizar suas fontes em seu site WordPress é adicioná-las manualmente ao seu site

Essas podem ser fontes da web ou fontes que o senhor hospeda localmente em seu computador.

Para acrescentar manualmente fontes da web a seu site, o senhor precisará criar linhas de código para seu folha de funções e seu folha de estilo

Se o senhor estiver usando um tema personalizado, a modificação da folha de funções e da folha de estilo certamente não lhe causará nenhum problema

No entanto, se o senhor está usando um tema WordPress, precisará necessariamente recriar seu tema

Portanto, vamos dar uma olhada nos passos para acrescentar manualmente as fontes da web:

  • Selecione uma fonte

Primeiro, o senhor precisa selecionar uma fonte de sua escolha e recuperar sua ligação.

  • Incorporar o link da fonte escolhida

O segundo passo é integrar o link copiado na folha de função de seu tema. Para fazer isso, o senhor precisa substituir o link da fonte existente no arquivo de funções pelo link gerado pelo fornecedor e inicialmente copiado

Agora o senhor fez fila com sua fonte. Não vai funcionar imediatamente. O senhor precisa passar para o próximo passo.

  • Acrescentar a fonte à folha de estilo

Para que a fonte possa ser usada em seu site, o senhor precisa acrescentá-la à folha de estilo de seu site

Para fazer isso, acrescente o código para aplicar as fontes a seu arquivo style.css arquive e selecione o elemento que deseja estilizar (o corpo de seu texto ou as cabeças).

Finalmente, salve a folha de estilo modificada e verifique se suas mudanças funcionam no site

Se tudo isso parece complexo, aqui está um vídeo

No entanto, é também uma boa idéia acrescentar um fonte de emergência ou fonte “web-safe” no caso de um dos visitantes do site do senhor não conseguir acessar a fonte que o senhor solicitou

Daí a importância de se ter um site otimizado, bem desenhado e móvel. Mostrar-lhe-ei abaixo como baixar e converter os arquivos de fontes.

1.2.3. Hospedagem de fontes em seu blog

Outra maneira é hospedar as fontes no servidor do seu site. Uma das vantagens deste método é que o senhor tem o monopólio da segurança de seu site sem vínculos com terceiros.

As fontes a serem hospedadas são fontes da web disponíveis para download nos sites dos fornecedores. O senhor deve ainda verificar se a licença do site fornecedor permite que o senhor faça isso

O senhor também pode hospedar fontes localmente, carregá-las em seu site e inseri-las em sua folha de estilo sem enfileirá-las em seu arquivo de funções.

Em termos concretos, isto significa

  • Em primeiro lugar, faça o download das fontes de sua escolha de um site fornecedor. Para poder usar esses arquivos de fontes em seu website, certifique-se de que eles estejam no formato woff. Se necessário, o senhor pode usar um conversor de formato para torná-los utilizáveis. Voltaremos a isso com mais detalhes no próximo capítulo
  • A seguir, o senhor terá de carregar todos os arquivos de fontes baixados na pasta temática de sua autoria. Seria ainda mais sensato e tático criar uma subpasta chamada “fontes” em sua pasta temática, onde todos os seus arquivos de fontes serão encontrados. Este é mais um ponto na customização e otimização do seu site WordPress
  • Finalmente, o senhor precisará apenas integrar as fontes em sua folha de estilo, seguindo o mesmo processo, e ver seu site mudar subliminarmente sua aparência.

Agora que já exploramos essas várias opções para personalizar suas fontes, vou partilhar com o senhor como converter seus arquivos de fontes

A fim de incorporar manualmente as fontes em seu site WordPress, o senhor deve necessariamente baixá-las primeiro e carregá-las em seu site. O senhor também precisa se certificar de que esses arquivos estejam no formato correto

Para fazer isso:

  • Comece visitando o local do fornecedor que o senhor escolheu
  • Em seguida, selecione a fonte que lhe convém
  • Vá à seção “Licença e Uso” do site para ver se o senhor tem permissão para baixar e usar o arquivo de fontes
  • Clique na aba “download” e salve o arquivo zip localmente em seu computador;
  • Em seguida, abra o arquivo zip em seu computador para extrair as fontes. Geralmente o senhor os encontrará nos formatos WOFF e WOFF 2.0

Agora que o senhor sabe como integrar as fontes no WordPress, vamos ver como o senhor mesmo pode modificá-las a qualquer momento.

Capítulo 2: Como faço para editar minhas fontes no WordPress?

2.1. Edição de suas fontes no WordPress

O senhor tem a capacidade de editar suas fontes, e há várias maneiras de fazer isso:

  • Use o editor do bloco ou o editor clássico;
  • Use a ferramenta de personalização do WordPress;
  • Fazendo mudanças nos cargos;
  • Fazendo mudanças em sua folha de estilo.

2.1.1. O Editor do Bloco de Gutenberg

Com o editor do bloco de Gutenberg, o senhor pode mudar o estilo do texto em seu posto ou em sua página. Para isso, selecione a parte que o senhor deseja modificar

Fonte kinsta.com

Um pequeno menu aparecerá, clique sobre os ícones que aparecem para modificar seu texto. O senhor pode fazer o texto ousadoitálico, em em itálico, o sublinhadoetc.

2.1.2. O Editor Clássico

O editor clássico está presente em versões mais antigas do WordPress e inclui uma barra de ferramentas onde o senhor pode editar facilmente seu texto.

Fonte kinsta.com

2.1.3. A ferramenta de personalização do WordPress

Na ferramenta de personalização, o senhor pode modificar o texto, acrescentando o CSS manual. Para fazer isso, vá até a guia de personalização e clique em “Acrescentar CSS adicional”

Em seguida, preencha a caixa de diálogo com o CSS que o senhor deseja acrescentar.

2.1.4. Fazer mudanças na folha de estilo

Para esse cenário, se o senhor está usando um tema padrão do WordPress, precisará criar um tema infantil

Nesse tema infantil, o senhor precisará criar uma nova folha de estilo onde integrará seu novo estilo de fonte.

Caso o senhor esteja usando um tema personalizado, abra sua pasta temática wp-conteúdo/temas e mudar o CSS no estilo.css.

2.2. Como mudar as cores das fontes no WordPress?

O senhor também pode mudar a cor de alguns dos textos de seu site usando os mesmos métodos que para mudar o estilo da fonte.

2.2.1. Editor de Gutenberg

O editor do bloco de Gutenberg permite que o senhor mude não só a cor do texto, mas também o fundo do mesmo. Para fazer isso, o senhor deve

  • Abra o quadro;
  • Vá para a guia “Color Settings”
  • Em seguida, selecione as paletas de cores que o senhor gosta de mudar a cor de seus blocos de texto e seu fundo.

2.2.2. O Editor WordPress clássico

O Editor Clássico em versões mais antigas do WordPress também lhe dá a possibilidade de mudar apenas a cor do texto que o senhor selecionou

2.2.3. Personalização do tema

Alguns temas permitem ao senhor mudar as cores de seu site. Mas o senhor deve primeiro acrescentar o CSS à ferramenta de personalização, a fim de mudar as cores

Clique na guia “Adicionar CSS adicional” na seção de personalização e digite seu CSS na caixa de texto.

Fonte kinsta.com

2.2.4. A folha de estilo

A folha de estilo também permite que o senhor mude as cores da fonte. Mas, para usá-lo, certifique-se de criar um tema infantil e uma nova folha de estilo, se seu tema for um tema padrão.

Quanto ao tamanho da fonte, o senhor também pode mudá-lo com esses diferentes métodos. Mas tenha cuidado, porque se seus parágrafos diferem muito em tamanho, parecerão inconsistentes e difíceis de ler

Para as cores, se a combinação tornar difícil o acesso, o senhor receberá um aviso do WordPress. Observe também que se as cores forem demais, seu site não terá um aspecto verdadeiramente profissional, o que certamente decepcionará seus visitantes.

Falando em “agradar a seus visitantes”, no próximo capítulo mostro-lhe como escolher as fontes certas para incluir em seu site WordPress.

Capítulo 3. Melhores práticas para encontrar boas fontes

É bom personalizar suas fontes. Mas é ainda melhor escolher e aplicar as fontes corretas

Como disse anteriormente, as fontes são a vitrine do seu tema. Eles refletem de uma maneira ou de outra a imagem de seu website.

3.1. Coisas a considerar na escolha de suas fontes

A primeira coisa é escolher de acordo com a imagem que o senhor quer dar a seu site ou marca. O senhor também deve se concentrar em :

  • Legibilidade se a fonte não for muito visível ou ilegível, a interface de seu site será desagradável e os visitantes também se cansarão de ler o senhor por causa da escolha errada da fonte.
  • Tamanho de letra escolha uma fonte com um bom tamanho para tornar seu blog mais agradável de ler.
  • Espaçamento entre linhas e espaçamento entre caracteres espaçamento: é do conhecimento geral que o fluxo da Internet é agora propriedade dos smartphones. Imagine ler um post de blog com caracteres difíceis de discernir em seu smartphone

Também é importante que a combinação de fontes seja correta. O senhor pode escolher fontes da mesma família ou escolher e escolher as que lhe interessam

Portanto, saiba fazer a combinação certa, para não sobrecarregar seu tema ou não perder sua personalização. Há também várias ferramentas on-line, tais como Fontjoy ou Fontpair para ajudar o senhor a criar a combinação perfeita.

3.2. Dicas para escolher

Não é fácil fazer a escolha certa que vai agradar a você, seus visitantes e fazer seu WordPress bela” como diriam os ingleses

Para ajudar o senhor, aqui estão algumas dicas que devem orientá-lo para uma boa escolha da fonte:

  • Procure fontes em seus documentos impressos que sejam suficientemente interessantes para serem usadas como fontes da web
  • Escolha as fontes mais populares dos bancos de fontes. Elas são usadas por um grande número de pessoas, por isso são familiares aos usuários da Internet.
  • Visite os sites de seus concorrentes e veja o que eles têm a oferecer para que o senhor possa responder melhor.

Dê-se ao trabalho de fazer experiências com suas escolhas antes de aplicá-las a seu site. Além disso, evite enfileirar variações de fontes que o senhor não usa ou não hospeda em seu site que não usa

Assegure-se também de que as fontes que o senhor usa estejam devidamente enfileiradas.

Capítulo 4: Outras perguntas sobre as fontes do WordPress

4.1. Como posso incorporar uma fonte personalizada no WordPress?

Há várias opções para se fazer isso:

  • Codifique as fontes da web no seu tema e use-as;
  • Instale em seu site uma extensão que permita ao senhor usar fontes da web;
  • Adicionando manualmente a partir de fontes locais previamente baixadas;
  • Hospedando fontes em seu site WordPress.

4.2) Como faço para carregar a fonte através do gerenciador de arquivos no WordPress?

Para carregar sua fonte usando o administrador de arquivos, siga estes passos:

  1. Vá ao site do seu cPanel;
  2. Vá até o Administrador de arquivos;
  3. Vá para wp-content/themes/your-theme/fonts (ou crie uma pasta de fontes, se não existir);
  4. Faça o download do arquivo zip da fonte personalizada;
  5. Descompacte a fonte para dentro da pasta ;
  6. Tome nota do caminho dos arquivos, pois o senhor precisará fazer referência a ele em seu CSS.

4.3. Como o senhor acrescenta sua fonte personalizada ao seu tema?

Isso exige que o senhor o mencione em seu documento de estilo.css e especifique onde o senhor deseja que ele seja aplicado.

Se o senhor ainda não o fez, certifique-se de que está usando um tema infantil para que seu CSS personalizado não se perca nas atualizações de temas. Falamos sobre isso no Capítulo 2.

O senhor pode acrescentar CSS personalizado a seu website para fazer referência a sua nova fonte. Para fazer isso, o senhor tem duas opções:

  • Use o editor do WordPress;
  • Use o administrador de arquivos.

4.4. Que fontes podem ser usadas na web?

Tecnicamente falando, o senhor pode acrescentar praticamente qualquer fonte a qualquer website.

Entretanto, ao procurar uma fonte online, o senhor deve sempre ter em mente o preço, o contrato de licença e o método de instalação.

Sem mais demora, aqui estão algumas das mais populares bibliotecas de fontes que podem ajudar o senhor a encontrar a fonte perfeita

4.5. Quais são os diferentes formatos de fonte que existem?

É hora de conhecer os diferentes tipos de fontes que existem. É importante lembrar que cada tipo de fonte tem uma extensão diferente e uma compatibilidade diferente com uma gama de navegadores.

  • TrueType font (TTF) ;
  • Fonte OpenType (OTF) ;
  • Formato da fonte Web Open Font Format (WOFF);
  • Formato da fonte Web Open Font Format 2.0 (WOFF2) ;
  • Tipo de letra OpenType (EOT) embutido.

4.6. Como os formatos das fontes são suportados pelos navegadores?

Nos últimos anos, os navegadores modernos têm feito melhorias significativas na maneira como apoiam as fontes personalizadas. Mas ainda hoje, nem todos os formatos são suportados em todos os navegadores.

Aqui estão os navegadores mais populares e o formato de fonte que eles suportam atualmente:

  • Fonte TrueType (TTF): Compatível com Internet Explorer versão 9.0 e superior, Chrome de 4.0, Firefox de 3.5, Safari de 3.1 e Opera de 10.0 ;
  • Fonte OpenType (OTF): Tem a mesma compatibilidade de navegador que a fonte TrueType;
  • Formato da fonte Web Open Font (WOFF): Funciona com Internet Explorer versão 9.0 e superior, Chrome 5.0+, Firefox 3.6+, Safari 5.1+ e Opera 11.1 e superior;
  • Formato da fonte Web Open Font Format 2.0 (WOFF2): Trabalha com Google Chrome desde a versão 36.0, Firefox desde 35.0 e Opera desde 26.0 ;
  • Fonte Embedded OpenType (EOT): Funciona somente com o Internet Explorer versão 6+.
Font format

Fonte w3escolas

4.7. Como escolher o formato correto da fonte?

Fonte Web Open O formato (WOFF) tornou-se o tipo de fonte padrão da indústria, pois contém metadados adicionais e usa menos largura de banda para renderizar.

No entanto, muitas vezes é difícil encontrar versões WOFF de todas as fontes, e é um tipo de fonte usado em navegadores modernos.

As fontes TTF e fontes OTF são mais fáceis de encontrar e podem estar disponíveis se o senhor não conseguir encontrar uma versão WOFF da fonte escolhida.

Em resumo, usando TTF/OTF e WOFF assegurará que suas fontes sejam suportadas por todos os navegadores.

Para mais detalhes sobre os formatos de fonte suportados, tente Posso usaruma ótima ferramenta para verificar a compatibilidade de características entre diferentes versões do navegador (FREE).

Em resumo

A personalização da fonte é um bem importante, se o senhor quiser colocar seu site WordPress à parte dos outros

Embora não seja um exercício fácil, ajuda a embelezar o tema ou desenho de seu site e a otimizar a experiência do usuário

A escolha das fontes é tão importante quanto seu formato. Portanto, certifique-se de selecionar as fontes corretas para sua marca e de mudá-las a seu gosto

Considere também fontes seguras para a web fontes para quando os visitantes não podem ver as fontes que o senhor incluiu por uma razão ou outra

Não exagere, porém, as mudanças. Isso poderia tornar seu site de difícil acesso e seus textos cansados e de difícil leitura.

Agora o senhor sabe como integrar e modificar as fontes em seu site WordPress, como modificar as cores do texto e também como escolher as fontes certas para que seu site pareça atraente e profissional.

Obrigado e até breve!

Deixe um comentário