Como mudar a fonte no WordPress

Existem várias formas de se trocar fontes de um site WordPress. Você pode, por exemplo, formatar blocos de texto ou seções in­di­vi­du­ais di­re­ta­mente no editor. O processo é simples, mas resulta em páginas de aparência in­con­sis­tente a longo prazo. Prefira con­fi­gu­rar fontes novas no tema do seu WordPress, para que elas sejam aplicadas a todo o site. Isso lhe pro­por­ci­o­nará um design con­sis­tente e muito mais atrativo, mas lhe exigirá direitos de ad­mi­nis­tra­dor e algum co­nhe­ci­mento técnico. Nosso tutorial ensina como mudar a fonte no WordPress do jeito certo.

Mudar fonte no WordPress

Vamos con­si­de­rar o caso mais simples de mudança de fonte em um site WordPress. Nor­mal­mente, cada tema vem com uma fonte pré-definida, que será usada para a exibição dos textos. Digamos que esta se trata de uma fonte genérica sem serifa (sans-serif). Contudo, desejamos utilizar, nos títulos, uma fonte com serifa (serif). Para realizar a alteração no WordPress, siga estes dois passos:

1. Defina a fonte para os elementos HTML no CSS
2. Inclua o código CSS no WordPress

Para de­fi­nir­mos a fonte de um elemento HTML, devemos usar a pro­pri­e­dade CSS font-family. Já para de­fi­nir­mos fontes per­so­na­li­za­das, @font-face deve ser usada.

Es­pe­ci­fi­car fonte para elemento HTML no CSS

Primeiro, entenda como definir a fonte para elementos HTML no CSS. No nosso exemplo, queremos usar uma fonte com serifa nos títulos H1 a H6. Para isso, adi­ci­o­na­mos o seguinte código:

h1, h2, h3, h4, h5, h6 {
    font-family: serif;
}

Incluir CSS adicional no WordPress

Existem di­fe­ren­tes métodos para integrar um CSS adicional ao WordPress. O método a ser escolhido depende da forma como o tema é cons­truído. Temas co­mer­ci­ais e cons­tru­to­res de páginas costumam dis­po­ni­bi­li­zar uma con­fi­gu­ra­ção per­so­na­li­zada, que aceita a inclusão de CSS adicional. Abaixo estão dois métodos que podem ser aplicados nessas situações:

1. Use a opção “Per­so­na­li­zar” (Customize) do WordPress para incluir um CSS adicional, como mostra a imagem abaixo.
2. Inclua um CSS adicional pelo arquivo functions.php, ide­al­mente com tema filho do WordPress (child theme). O pro­ce­di­mento es­pe­cí­fico pode ser en­con­trado no nosso tutorial que explica como editar ca­be­ça­lhos no WordPress.

Close

Close

Close

Como adicionar nova fonte ao WordPress

Para que uma nova fonte possa ser adi­ci­o­nada a um site WordPress, esta tem de ser uma fonte web (web font). É possível encontrá-la di­re­ta­mente no Google Fonts (ou em pla­ta­for­mas similares) e inclui-la a uma folha de estilo adicional hospedada pelo Google, no seu WordPress. No entanto, tenha ciência de que este processo pode afetar questões relativas à pri­va­ci­dade. De­pen­dendo do método de in­cor­po­ra­ção utilizado, o de­sem­pe­nho do seu site também poderá ser afetado. Portanto, re­co­men­da­mos que você hospede fontes web na pasta do seu tema, no próprio servidor do WordPress.

Hospedar fonte web no WordPress

Hospedar fontes web por conta própria é mais com­pli­cado do que pode parecer. Portanto, sugerimos que você faça uso de fer­ra­men­tas es­pe­ci­a­li­za­das na geração de todos os tipos de fontes web em formatos comuns, a partir de arquivos de fontes, pois elas já fornecem o código CSS cor­res­pon­dente. Ao longo dos anos, a pla­ta­forma Font Squirrel se con­so­li­dou como a solução padrão da indústria. Al­ter­na­ti­va­mente, você pode recorrer a plugins, como o Use Any Font, para adicionar uma nova fonte ao WordPress.

Font Squirrel

Close

Close

Use Any Font

Close

Close

Close

Close

Close

Close

Close

Usar fontes de ícones

Além de fontes web, fontes de ícones (icon fonts) também podem ser usadas para exibir textos, já que os glifos de uma fonte não precisam, ne­ces­sa­ri­a­mente, re­pre­sen­tar letras. Como vetores são formas definidas ma­te­ma­ti­ca­mente, você também consegue exibir fontes de ícones no WordPress, vas­ta­mente uti­li­za­das por redes sociais, por exemplo.

Close

Usar fonte web do Google Fonts

Re­co­men­da­mos que você hospede suas fontes web por conta própria, salvo exceções. Talvez você queira somente ex­pe­ri­men­tar uma nova fonte no ambiente de teste do seu site. Também pode ser que você tenha um pequeno blog, não sendo um ótimo de­sem­pe­nho a sua pri­o­ri­dade. Nestes casos, é possível proceder de outras formas, que também serão ex­plo­ra­das por este tutorial.

Siga os passos abaixo para adicionar uma fonte do Google Fonts no WordPress:

1. Selecione a fonte do Google Fonts desejada: Use a função de busca e filtro ou navegue pelo catálogo ma­nu­al­mente.
2. Selecione as variações de estilo: Lembre-se que cada variação de estilo adicional requer um novo download, de um outro arquivo de fonte.
3. Adicione o código da folha de estilo ao cabeçalho do WordPress: Siga os passos do nosso tutorial que explica como editar o cabeçalho do WordPress.
4. Defina a fonte por CSS: A definição pode ser feita para todo o site ou para elementos in­di­vi­du­ais.

Close

Close

Close

Métodos para incluir fonte web no WordPress

Encontre, na tabela abaixo, os métodos mais uti­li­za­dos para adicionar novas fontes ao WordPress. Cada um tem vantagens e des­van­ta­gens próprias, que também serão apontadas:

Per­so­na­li­zar fonte no WordPress

Agora que você já aprendeu como mudar a fonte no WordPress, descubra como alterar o tamanho e as cores das fontes do seu site. Os pro­ce­di­men­tos são ba­si­ca­mente os mesmos que os aplicados a mudanças de fontes:

1. Localizar o elemento desejado e iden­ti­fi­car o seletor
2. Es­que­ma­ti­zar as regras CSS no inspetor web
3. Incluir es­pe­ci­fi­ca­ções CSS no WordPress

Observe, abaixo, as es­pe­ci­fi­ca­ções CSS mais im­por­tan­tes para mudar o tamanho e a cor de uma fonte no WordPress:

Mudar tamanho de fonte no WordPress

Novamente, ex­plo­ra­re­mos o caso mais simples de aplicação. Desejamos mudar o tamanho da fonte de todo o site WordPress. Para fazermos isso, usamos o elemento raiz HTML como seletor, jun­ta­mente com uma por­cen­ta­gem que define o tamanho da fonte. Isso faz com que a mudança de tamanho fique mais fácil ser com­pre­en­dida:

• “Deixar a fonte 10% maior”: html { font-size: 110%; }
• “Exibir a fonte 10% menor”: html { font-size: 90%; }

Agora, vejamos como mudar o tamanho da fonte de elementos es­pe­cí­fi­cos. Mais uma vez, uti­li­za­re­mos os títulos H1 a H6 como exemplo.

Observe, pri­mei­ra­mente, como não realizar a ação:

h1 { font-size: 35px; }
h2 { font-size: 28px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

Podemos encontrar dois erros no exemplo acima. O primeiro deles diz respeito ao uso de pixels (px), que são uma unidade de medida absoluta. O segundo cor­res­ponde ao fato de que tamanhos de fontes in­di­vi­du­ais foram definidos ar­bi­tra­ri­a­mente, o que resultará em um design in­con­sis­tente. In­fe­liz­mente, ambos os erros, que deveriam ser evitados, podem ser en­con­tra­dos em grande parte dos temas, inclusive em temas co­mer­ci­ais. Ide­al­mente, faça uso de unidades de medida relativas para es­pe­ci­fi­car o tamanho das fontes. A unidade rem, por exemplo, baseia es­pe­ci­fi­ca­ções de tamanho no elemento raiz HTML. Assim, a es­pe­ci­fi­ca­ção de 2rem indica duas vezes o tamanho da fonte normal.

Combinar a por­cen­ta­gem para o elemento raiz HTML com o rem para todos os outros elementos de texto é a fórmula perfeita para um design res­pon­sivo. Você só precisa de consultas de mídia CSS para di­fe­ren­tes tamanhos de tela, para que o tamanho da sua fonte se ajuste ao elemento raiz HTML. Todos os outros elementos de texto serão au­to­ma­ti­ca­mente re­di­men­si­o­na­dos, o que garantirá a coerência das pro­por­ções. Observe:

/*Mobile-first font size*/
html { font-size: 100%; }
/*'medium' Breakpoint*/
@media screen and (min-width: 30em) and (max-width: 60em) {
    html { font-size: 105%; }
}
/*'large' Breakpoint*/
@media screen and (min-width: 60em) {
    html { font-size: 110%; }
}

Ainda devemos refletir, contudo, sobre que tamanhos escolher para elementos de texto in­di­vi­du­ais. Conforme já es­cla­re­cido, a definição de valores ar­bi­trá­rios não é in­te­res­sante. Assim, sugerimos que você adote a abordagem de escala ti­po­grá­fica, inspirada em harmonias musicais e baseada em fórmulas ma­te­má­ti­cas, como na proporção áurea. Tamanhos de fonte di­men­si­o­na­dos por escala ti­po­grá­fica apre­sen­tam uma aparência mais pro­por­ci­o­nal. Por sorte, geradores de escalas ti­po­grá­fi­cas on-line dis­po­ni­bi­li­zam códigos CSS. No exemplo abaixo, adotamos a abordagem da escala ti­po­grá­fica e a uti­li­za­mos no framework Tachyons:

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

Close

Mudar cor de fonte no WordPress

Você já deve saber que não é in­te­li­gente se­le­ci­o­nar textos de uma página e mudar as res­pec­ti­vas cores in­di­vi­du­al­mente, pois essa ação é pouco eficiente e pode com­pro­me­ter a con­sis­tên­cia da aparência do seu site. Para mudar a cor de uma fonte do seu site WordPress, proceda de forma similar ao processo de alteração do tamanho da fonte. Defina a nova cor por código CSS. Isso é possível de ser feito por variados métodos, mas nem todos serão men­ci­o­na­dos por este tutorial. As regras CSS exem­pli­fi­ca­das abaixo se equivalem:

body {
    color: black;
    color: #000000;
    color: #000;
    color: rgb(0, 0, 0)
}

Como você pode observar, para de­fi­nir­mos a cor da fonte do site todo, usamos o elemento HTML body com a pro­pri­e­dade CSS color. Assim, todos os elementos de texto herdarão as de­fi­ni­ções, a partir do elemento body. Se ne­ces­sá­rio, também é possível subs­ti­tuir o valor de cor herdado em elementos es­pe­cí­fi­cos. Por exemplo, para de­ter­mi­nar­mos a exibição dos títulos em tom de cinza escuro, usamos o código a seguir:

h1, h2, h3, h4, h5, h6 {
    color: #555555;
}

A cor de uma fonte, assim como o tipo de fonte, é um elemento de design essencial, uma vez que cores são capazes de trans­mi­tir sensações. Para evitar más im­pres­sões, mantenha a con­sis­tên­cia das cores e não configure cores em excesso nas suas páginas. Um esquema de cores in­con­sis­tente ou mal planejado pode incomodar e afastar vi­si­tan­tes. Em caso de dúvida, lembre-se sempre que menos é mais!

Para garantir a usa­bi­li­dade do seu site, utilize fontes com contraste su­fi­ci­en­te­mente alto. Somente assim os textos poderão ser lidos com pouco esforço. Fe­liz­mente, é possível calcular valores de contraste para combinar cores de fontes com cores de planos de fundo. O framework Tachyons, já men­ci­o­nado por este tutorial, oferece sólidas tabelas de cores, com com­bi­na­ções de alto contraste. Você pode copiar valores de cores da tabela e reproduzi-los no seu site WordPress, o que não tem erro.

De­pen­dendo do editor utilizado, também é possível mudar a cor da fonte no WordPress fora do CSS. No entanto, a prática costuma resultar numa aparência in­con­sis­tente a longo prazo, por isso não a re­co­men­da­mos. O moderno editor Gutenberg do WordPress é uma al­ter­na­tiva de meio-termo. Ele dispõe de uma paleta de cores pre­de­fi­nida, que pode ser adaptada ao esquema de cores do tema utilizado. Assim, quando uma das cores pre­de­fi­ni­das é atribuída, por você, a um bloco de texto, o editor adiciona apenas outras poucas classes de CSS, o que preserva a separação de tópicos. Substitua ou silencie as classes pos­te­ri­or­mente, se ne­ces­sá­rio.

O Gutenberg também permite que você atribua, di­re­ta­mente, cores es­pe­cí­fi­cas a blocos de texto in­di­vi­du­ais. Evite este pro­ce­di­mento a todo custo, pois, neste caso, o editor insere uma cor in­di­vi­dual, como um valor co­di­fi­cado, em cada estilo inline do código HTML. O exemplo abaixo ilustra o problema:

<span style="color:#38a300" class="has-inline-color">Eu moro em São Paulo, tenho um cachorro chamado Zeca e gosto de sorvete</span>

Estilos inline têm es­pe­ci­fi­ci­da­des CSS mais altas, portanto, resistem a mudanças pos­te­ri­o­res. Por esse motivo, re­co­men­da­mos que você desative as cores per­so­na­li­za­das do editor. Para fazer isso, insira o código abaixo no arquivo functions.php do seu tema filho:

function disable_gutenberg_custom_color_picker() {
    add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_picker' );

Al­ter­na­ti­va­mente, desative com­ple­ta­mente a paleta de cores do Gutenberg. Novamente, faça isso pelo arquivo functions.php:

function disable_gutenberg_custom_color_palette() {
    add_theme_support( 'editor-color-palette' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_palette' );