As fontes podem fazer a diferença entre um site sem graça e um site bonito. Ao aprender a mudar a fonte no WordPress, você pode fazer o seu site parecer moderno, profissional e de marca.
Mas qual é a melhor maneira de usar fontes em seu site WordPress, e como você escolhe as fontes certas para seu design?
Neste guia, vou guiá-lo através de tudo o que você precisa saber sobre fontes no WordPress.
Fontes: A Terminologia
Vamos começar por olhar para a terminologia em torno das fontes na web.
- As Fontes Web (também conhecidas como fontes HTML) são fontes hospedadas em um site de terceiros e vinculadas ao seu site.
- As fontes hospedadas localmente são apenas isso (hospedadas nos servidores do seu site).
- As fontes Web-safe são uma gama limitada de fontes pré-instaladas em (quase) todos os computadores e que você pode estar bastante confiante de que todos os seus visitantes terão acesso.
Vamos dar uma olhada nas opções para adicionar fontes ao seu site.
Como adicionar fontes ao seu site WordPress (as Opções)
Antes de saltar para adicionar fontes ao seu site, isso ajuda se você entender as opções disponíveis para você.
As fontes fazem parte do design do seu site, por isso, na maioria dos casos, serão codificadas através do seu tema – mas nem sempre. Em alguns casos, você pode decidir usar um plugin para habilitar uma gama maior de fontes em seu site.
Aqui estão algumas das opções disponíveis para você:
- Usando fontes da web, como o Google Fonts, instalando um plugin que lhe dá acesso.
- Usando fontes web, codificando-as em seu tema e enfileirando-as (não tão complicado quanto parece).
- Hospedando suas fontes em seu próprio site e adicionando-as ao seu tema.
Existem duas distinções principais – se você usa fontes web, que são hospedadas fora do seu site, ou se você escolhe hospedar seus próprios arquivos de fontes. Neste guia, vamos ver os prós e contras de cada um.
Vamos começar por olhar para as fontes da web: por que razão pode optar por utilizá-las e as formas de as adicionar ao seu site.
Usando Fontes Web no WordPress
As fontes da Web são a forma mais popular de adicionar fontes ao seu site porque facilitam a adição de uma vasta gama de fontes.
O que são fontes da Web?
As fontes da Web são fontes hospedadas no site de um provedor de terceiros. Em vez de copiar os arquivos para o seu próprio site, você liga para o site do provedor e eles são puxados de lá.
Isto significa que você tem acesso a uma grande variedade de fontes sem ter que usar o espaço do servidor em sua própria hospedagem. Isso também significa que se os arquivos de fonte mudarem com o tempo, você não precisa atualizar seus arquivos e terá acesso automaticamente às novas versões dos arquivos do provedor.
As fontes da Web podem ser gratuitas ou você pode pagar por elas, geralmente através de uma assinatura. Alguns provedores populares são:
- Fontes do Google. O maior fornecedor de fontes web gratuitas. Você também pode baixar todas as suas fontes para o seu computador, ou seja, se você quiser criar materiais offline usando as mesmas fontes do seu site, você pode. E é tudo grátis.
- Adobe Edge Web Fonts. Estes também são gratuitos. Embora tenham sido projetados para serem usados com produtos da Adobe, eles funcionam bem em qualquer site.
- Fonts.com é um provedor premium de fontes, que você pode precisar usar se você tiver que combinar sua fonte web com uma fonte do seu material impresso e a fonte não estiver disponível através de um provedor gratuito.
- fontfabric é um designer de fontes que fornece fontes premium para uso como fontes web e online. Você precisará pagar por isso, mas receberá algo mais individual do que se você usasse fontes do Google.
Todos esses provedores permitem que você sirva as fontes diretamente de seus servidores, adicionando algum código ao seu site do WordPress ou, às vezes, usando um plugin que significa que você não precisa adicionar nenhum código.
As fontes da Web são diferentes das fontes seguras para a Web. Você pode usá-los como um fallback para fontes da web apenas no caso de seu visitante do site não pode se conectar à fonte da web por algum motivo. Eu mostro-te como se faz isso mais tarde neste post.
Por que usar fontes da Web?
Então agora você sabe o que são fontes da web, por que você escolheria usá-las em vez de hospedar suas próprias fontes?
Aqui estão alguns dos benefícios:
- Facilidade: adicionar algumas linhas de código ou instalar um plugin é mais rápido do que baixar e carregar os arquivos de fontes e torna mais fácil mudar as fontes se você decidir no futuro.
- Faixa de fontes: há milhares de fontes disponíveis como fontes da web e a lista está crescendo o tempo todo.
- Atualizações: Se o arquivo de fonte precisa ser atualizado, talvez para adicionar fontes variáveis (mais das quais em breve) ou para adicionar caracteres extras, seu site terá acesso à nova versão sem que você tenha que fazer nada.
A maioria dos sites usa fontes web, com uma fonte segura como backup. E com o WordPress, é muito fácil de fazer.
Encontrando as melhores fontes da Web para o seu site
Tendo decidido que você vai usar fontes web, agora você tem uma decisão difícil: quais fontes usar?
Nos bons velhos tempos em que todos os desenvolvedores web tinham acesso eram aquelas fontes web-safe pré-instaladas, esta foi uma decisão muito fácil. Queres usar uma fonte serifa ou sans-serif? (As fontes Serif têm uma pequena linha ou traço no final de um traço maior em cada caractere, as fontes sans-serif não.) Tendo tomado essa decisão, as suas escolhas foram muito limitadas.
Mas agora, o mundo é a tua ostra.
Aqui estão algumas dicas para ajudá-lo a escolher a melhor fonte para o seu site:
- Olha para os teus materiais impressos. Existem fontes já em uso que você pode encontrar como fontes web? Se não, consegues encontrar algo semelhante?
- Veja os sites dos seus concorrentes. Que tipos de fontes estão a usar? Não recomendo que os copie, mas pode haver certos estilos que transmitam o tipo certo de imagem aos utilizadores do seu website.
- Pense no tipo de humor que quer transmitir com as suas fontes. Algumas fontes parecem mais modernas, outras mais tradicionais. Alguns são divertidos, outros mais sérios.
- Siga as fontes que são fáceis de ler para o corpo do texto, e use fontes mais interessantes para as manchetes, se quiser.
- Escolha entre as fontes mais populares do Google – estas serão familiares aos visitantes do site e são fáceis de ler.
Depois de escolher as suas fontes, passe algum tempo a experimentá-las. Provedores de fontes como o Google Fonts permitem que você digite texto personalizado para ver como ele se parece na fonte escolhida. Uma vez que você veja seu próprio texto na fonte, ele pode ajudá-lo a decidir se essa é a fonte certa para você.
E lembre-se, o uso de fontes da Web facilita muito a alteração das fontes para que você possa sempre mudar para outra opção enquanto desenvolve seu tema ou configura seu site.
Como adicionar fontes web com um plugin WordPress
Então você escolheu a fonte escolhida, agora é hora de adicioná-la ao seu site.
Se não se sentir à vontade para adicionar código aos seus ficheiros de temas, pode instalar um plugin que lhe permitirá aceder às fontes do Google e utilizar qualquer fonte que quiser no seu site.
O plug-in Google Fonts Typography dá-lhe acesso a toda a biblioteca de fontes do Google e permite-lhe analisá-las através do WordPress Customizer.
Instale o plugin em seu site da mesma forma que você faria com qualquer outro plugin, e então ative-o.
Vá até Aparência > Personalizar para acessar o Personalizador. Você verá uma seção para o Google Fonts.
Clique nesse link para acessar as configurações de suas fontes. Configure-os da seguinte forma:
Configurações Básicas: configure a fonte padrão para o texto do corpo e seus cabeçalhos, bem como quaisquer botões. Na imagem abaixo você pode ver que eu adicionei uma fonte serifa de fácil leitura para o corpo e uma fonte mais distinta para cabeçalhos.
Configurações avançadas: Aqui você pode configurar a marca (título e descrição do site), navegação (seu menu), conteúdo e títulos com mais detalhes, sua barra lateral e rodapé. Você também pode carregar fontes sem atribuí-las a nada, o que significa que você pode adicioná-las a qualquer CSS personalizado no Customizer.
Carregamento de fontes: Se houver algum tipo de fonte que você não precise (por exemplo, negrito, itálico, esse tipo de coisa), você pode desmarcá-los aqui para que eles não diminuam a velocidade do seu site desnecessariamente.
Debugging: Use isso para forçar qualquer fonte a exibir se ela não estiver funcionando como deveria.
Passe algum tempo trabalhando com essas configurações e testando-as no Customizer para garantir que elas funcionem da maneira que você deseja. Depois, quando estiver satisfeito com suas configurações, clique no botão Publicar. Não deixe o Customizer sem clicar em Publicar ou você perderá suas alterações.
Edição de Cores de Fontes
A versão gratuita do plugin não permite que você edite as cores de suas fontes. Para fazer isso, você terá que comprar a versão premium ou usar a opção CSS adicional no Customizer.
Volte para a tela inicial do Personalizador e clique na guia CSS adicional. Ser-lhe-á apresentada uma área de texto vazia onde poderá adicionar o seu próprio CSS.
Para encontrar o elemento que você precisa para estilizar, selecione-o e use o inspetor de código no seu navegador para descobrir qual a cor que ele já tem.
Abaixo eu estou usando o Google Chrome e eu alvejei um elemento h1.
No meu tema do WordPress, ele herdou sua cor do elemento corpo. Quero acrescentar algo mais específico. Na área de texto do CSS, digite o CSS do elemento e a cor que deseja usar. O meu é assim:
h1 {
color: #f542f5;
}Isso dá-me um elemento H1 rosa brilhante:
Você pode repetir isso com qualquer elemento de texto ao qual queira adicionar cor, e também com qualquer outro que você queira adicionar fontes personalizadas que não foram incluídas nas opções das outras telas. Se você quiser saber o que CSS usar para fontes, leia a seção deste post sobre como alterar suas fontes via CSS.
Como adicionar fontes da Web manualmente
Se você não quiser adicionar um plugin extra ao seu site e ter acesso ao código do seu tema, você pode instalar e usar fontes da web adicionando algum código ao seu arquivo de funções e à sua folha de estilo.
Se o seu site estiver usando um tema personalizado que você pode editar, então você pode editar o arquivo de funções e a folha de estilo do seu tema. Mas se você estiver usando um tema de terceiros que você comprou ou comprou do diretório de temas do WordPress, então você precisará criar um tema filho. Você precisará então dar-lhe dois arquivos: functions.php e style.css.
Vamos trabalhar no processo de adicionar manualmente fontes web ao seu tema. Vou trabalhar com o Google Fonts para este exemplo, pois é o mais usado e é gratuito.
Escolhendo uma fonte e agarrando o link
Comece por escolher a sua fonte a partir do Google Fonts. Adicione-o à sua biblioteca clicando no ícone de mais ao lado dele.
Clique na guia na parte inferior da tela da sua biblioteca e você verá algum código para adicionar ao seu site. Se você quiser adicionar pesos e estilos de fontes extras, clique na guia Personalizar e selecione os que você deseja. Então volte para a aba Embed.
Não copie o código exatamente: você estará usando-o, mas ao invés de chamar a fonte na seção < head> do cabeçalho do seu site, você estará enfileirando as fontes. Esta é a maneira correta de fazê-lo no WordPress.
Em vez disso, na seção Incorporar fonte, copie apenas o link para a fonte.
Então, no meu caso, o Google Fonts está a dar-me este código:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">Só preciso de copiar esta parte:
https://fonts.googleapis.com/css?family=RalewayEnfileiramento da(s) Fonte(s)
Abra o ficheiro das funções do seu tema e adicione o seguinte, substituindo o link da minha fonte pelo link que o Google lhe deu para o seu:
function kinsta_add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );Isto enfileira o estilo dos servidores de fontes do Google. Se você precisar adicionar mais fontes no futuro, você pode adicionar uma nova linha à sua função ou adicioná-la na mesma linha, assim:
function kinsta_add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );Isto irá enfileirar as fontes Merriweather e Raleway.
Adicionando a(s) Fonte(s) ao seu Estilo
Isso ainda não fará com que a fonte funcione no seu site: você ainda precisa adicioná-la à folha de estilo do seu tema.
Abra o ficheiro style.css no seu tema e adicione o código aos elementos individuais do estilo com as suas fontes web. Certifique-se de adicioná-lo depois de qualquer CSS existente para fontes, ou ele pode ser substituído por isso.
Os elementos que você criar dependerão de você, mas é comum usar uma fonte legível para o elemento do corpo e algo mais extravagante para os cabeçalhos.
body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3 {
font-family: 'Merriweather', serif;
}No caso acima, tudo na página usará a fonte Raleway, exceto os elementos h1, h2 e h3, que usarão Merriweather.
Agora, salve sua folha de estilo e verifique seu site para ter certeza de que tudo funciona como você espera. Se as novas fontes não estiverem aparecendo, tente limpar o cache do navegador e verificar se as fontes não estão sendo substituídas por nenhum estilo de fontes mais abaixo na folha de estilo. É por isso que é uma boa ideia adicionar o seu novo estilo na parte inferior da folha de estilo ou substituir o estilo de fonte existente pelo seu novo estilo (ainda melhor).
Adicionar uma fonte de backup
Pode haver ocasiões em que alguém visite o seu site e não possa acessar os arquivos de fontes da web por algum motivo. Talvez eles estejam em uma conexão pobre ou usando um dispositivo antigo que não renderiza fontes web. Ou talvez o seu fornecedor de fontes da web esteja tendo problemas técnicos.
Por esta razão, é uma boa ideia ter um backup no lugar.
O código que lhe é dado pelas fontes do Google já tem um backup de simplesmente especificar serif or sans-serif, mas podemos ir um passo além disso.
Use uma das fontes prontas para a web que já estará instalada na máquina do seu visitante e, em seguida, inclua o segundo retorno de apenas serif or sans-serif, caso eles estejam usando um dispositivo móvel que nem mesmo tenha as fontes prontas para a web.
Volte para sua folha de estilo e edite seu CSS para que ele leia algo assim:
body {
font-family: 'Raleway', Helvetica, sans-serif;
}
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
}Isso significa que as pessoas que visitarem seu site verão suas fontes web se tudo estiver bem; mas se não estiver, elas verão Helvética ou Geórgia, ou, se não estiver, verão as fontes serif e sans-serif que seu navegador é capaz de carregar.
Hospedando suas próprias fontes no WordPress
Alguns desenvolvedores preferem não usar fontes web, mas sim hospedar fontes em seus próprios servidores e você pode ser um deles.
Isto pode dever-se a uma ou mais razões, incluindo segurança, desempenho ou orçamento.
Se você está preocupado com o desempenho, você pode otimizar o desempenho de suas fontes da web de várias maneiras, que são abordadas mais adiante nesta publicação. Mas se decidiu seguir a rota local, terá de saber como fazê-lo.
Por que hospedar suas próprias fontes?
A utilização de fontes web é muitas vezes mais fácil e pode dar-lhe mais flexibilidade e ocupar menos espaço no seu servidor. Mas isso não significa que não haja ocasiões em que hospedagem local de fontes possa não ser mais apropriada.
As razões que você pode querer hospedar fontes localmente incluem:
Você pode achar que você pode contornar algumas dessas questões
- Você pode preferir não obter recursos de terceiros por razões de segurança, sabendo que a segurança do seu próprio site é controlada por você.
- Você pode descobrir que o uso de um serviço de terceiros afeta o desempenho do seu site.
- Podes ter comprado um ficheiro de fonte e queres usar isso. Certifique-se de que a sua licença inclui o uso do site, bem como o uso em materiais impressos.
- Seu site pode ser hospedado localmente, por exemplo, em uma intranet, e os usuários não terão acesso a fontes da web quando o estiverem usando.
Onde encontrar fontes que você pode hospedar localmente
Muitas fontes web também podem ser baixadas para uso como fontes hospedadas localmente, mas você terá que verificar se isso é permitido pela licença. No caso do Google Fonts, é permitido.
Você também verá que existem fontes não disponíveis como fontes da web que você mesmo pode baixar e hospedar. Qualquer arquivo de fonte que você pode baixar para o seu computador também pode ser carregado no seu site e armazenado lá. Se você precisa usar uma fonte que não está disponível como uma fonte web para se conectar com sua marca, esta será a solução, mas certifique-se de que sua licença o permite.
Como adicionar fontes hospedadas localmente ao seu site WordPress
Então você sabe que quer hospedar suas fontes localmente, como você vai fazer para configurá-las?
O processo é diferente do uso de fontes web. Você tem que carregar o(s) arquivo(s) da fonte a seu local e você liga a eles em seu stylesheet sem ter que enfileirá-los em sua lima das funções.
Baixe e converta as fontes
Comece por descarregar as fontes que pretende utilizar. No Google Fonts, você pode fazer isso clicando no ícone de download ao visualizar a fonte em sua biblioteca.
Descompacte o arquivo da fonte no seu computador e exclua qualquer fonte que você não precise usar no seu site: não há nenhum ponto em carregar arquivos que você não estará usando.
Para usar em seu site, os arquivos precisarão estar no formato . woff. Se não estiverem (não estarão se você as tiver obtido de fontes do Google), você pode usar um serviço como o Convertio para convertê-las.
Envie as fontes para o seu tema
Agora carregue o(s) ficheiro(s) de fonte para o seu tema, em wp-content/themes/themename, onde themename é a pasta do seu tema. É uma boa idéia colocar qualquer arquivo de fonte em sua própria pasta no tema, por exemplo, uma pasta de fontes.
Se você estiver trabalhando com um tema de terceiros, crie um tema filho para seus arquivos de fonte e sua folha de estilo.
Depois de fazer isso, você precisará adicionar a fonte à sua folha de estilo.
Adicionar a(s) fonte(s) em CSS
Abra a folha de estilo do seu tema.
Adiciona código como este, substituindo as fontes que usei pelas tuas:
@font-face {
font-family: 'Raleway';
src: url( "fonts/Raleway-Medium.ttf") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
src: url( "fonts/Raleway-Bold.ttf") format('woff'); /* medium */
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Merriweather';
src: url( "fonts/Merriweather.ttf") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}Adiciona mais alguma coisa que precises. Note que se você quiser usar o negrito, itálico, etc. variações de sua fonte, você precisa declarar cada um usando @fontface , em seguida, especificar o peso ou estilo para cada um, como eu fiz acima com Raleway para negrito e pesos normais.
Agora adicione o estilo para seus elementos, como você faria ao usar fontes da web:
body {
font-family: 'Raleway', Helvetica, sans-serif;
src: url( "/fonts/Raleway-Medium.ttf" );
}
h1, h2, h3 {
font-family: 'Merriweather', Georgia, serif;
}Suas fontes hospedadas localmente agora funcionarão com seu tema.
Como alterar fontes no WordPress
Agora você sabe como instalar fontes em seu site WordPress de uma das duas maneiras. Que tal editá-los? Que tal mudá-los?
Você pode editar suas fontes de uma de três maneiras: através do Customizer, na tela de publicação ou edição de página, ou usando CSS.
Vamos ver cada uma dessas opções para mudar o estilo, a cor e o tamanho da fonte.
Como Alterar Estilos de Fontes no WordPress
Vamos ver como podemos fazer isso se você estiver usando o Block Editor ou o Classic Editor.
Mudando Estilos de Fontes no Editor de Blocos (Gutenberg)
Se estiver a utilizar uma versão recente do WordPress com o editor do Gutenberg, pode alterar o estilo do seu texto ao editá-lo no seu post ou página.
Selecione o bloco que você deseja editar e um menu de estilo aparecerá acima dele.
Selecione o texto que pretende editar e, em seguida, clique nos ícones para o tornar negrito ou itálico. Se você clicar na seta ao lado delas, verá que você também pode selecionar strikethrough.
Alterando Estilos de Fontes no Editor Clássico
Se você estiver executando uma versão mais antiga do WordPress ou tiver o plugin Editor clássico instalado, você também pode editar estilos de fonte. (Se não quiser o editor do Gutenberg, é melhor atualizar o WordPress e desativar o Gutenberg.)
O Editor Clássico inclui uma barra de ferramentas acima do painel de edição principal, onde você pode alterar os estilos do texto. Se você clicar no ícone da Barra de Ferramentas à direita, poderá acessar mais opções, incluindo strikethrough.
Alterar Estilos de Fontes no Personalizador
Se você quiser mudar o estilo da fonte para um elemento específico, você pode fazer isso adicionando CSS manual ao Customizer.
Abra o Personalizador e clique em CSS adicional. Isso abrirá uma tela onde você pode digitar CSS.
Agora você pode digitar o CSS para suas fontes na caixa. Então se você quisesse mudar todos os elementos h1 e h2 para itálico, você adicionaria este CSS:
h1, h2 {
font-style: italics;
}Alterando Estilos de Fontes no seu Estilo de Estilo
Se você se sentir confortável em adicionar código à sua folha de estilo, esta é uma maneira melhor de fazê-lo.
Se você estiver usando um tema de terceiros, crie um tema filho para seu próprio estilo, caso contrário, quaisquer alterações que você fizer serão perdidas quando você atualizar o tema. Você terá que criar uma folha de estilo no tema infantil para dizer ao WordPress que é um tema infantil: é onde você coloca seu novo estilo de fonte.
Se você estiver usando seu próprio tema, poderá editar e alterar o CSS em sua própria folha de estilo. O arquivo é style.css e você o encontrará em sua pasta temática em wp-content/themes.
Adicione qualquer estilo de fonte no final da sua folha de estilo para que ela não seja cancelada por nada que já esteja lá. Ou ainda melhor, remova e substitua qualquer estilo de fonte existente, a menos que você queira mantê-lo.
Altere o peso de um elemento com o font-weight:
span.featured {
font-weight = bold;
}Altere o estilo de um elemento com font-style:
span.featured {
font-style = italic;
}Modificar o alinhamento com text-alignment:
span.featured {
text-alignment: center;
}Como alterar as cores das fontes no WordPress
Outra mudança que você pode querer fazer é mudar a cor de determinado texto em seu site. Cuidado para não exagerar com isso: seu tema foi projetado com cores que funcionam bem juntas e se você adicionar muitas cores, ele pode parecer garrido e pouco profissional.
Mudando as cores das fontes em Gutenberg
Os blocos de texto Gutenberg permitem-lhe editar a cor do texto e o fundo. Para isso, abra o bloco que você deseja corrigir e clique na guia Configurações de cores na seção Bloco à direita da tela.
A partir daqui é possível editar a cor de fundo e a cor do texto para os blocos de texto.
Note que o WordPress irá avisá-lo se a combinação de cores que você usa for ruim para a acessibilidade, como no exemplo que usei acima. Evite a tentação de ir ao mar com suas cores – afinal você escolheu seu tema porque seu design colorido era apropriado para o seu site, e adicionar muito mais cores poderia torná-lo garrido.
Se você clicar na guia Avançado abaixo da guia Configurações de cores, você também poderá adicionar uma classe a esse bloco, que poderá ser estilizada no Customizador ou na sua folha de estilo. Assim, por exemplo, se você adicionou uma classe de .featured ao seu bloco, você poderia então estilo-lo usando essa classe.
Alterando as cores das fontes no editor clássico
A barra de ferramentas do editor clássico permite que você mude a cor do texto selecionado. Assim você pode selecionar uma palavra individual e mudar sua cor. Abaixo fiz uma frase vermelha.
Embora isto te dê, em teoria, muita flexibilidade, tem cuidado ao usá-la em demasia. Se você começar a adicionar muito mais cores ao seu texto, isso pode resultar em um site que é difícil de ler e ruim para a acessibilidade.
Alterar as cores das fontes no customizador
Se o seu tema inclui opções para alterar o esquema de cores do seu site, este é o melhor lugar para o fazer.
Por exemplo, no site abaixo, estou usando um tema que me permite escolher um novo esquema de cores para todo o tema. Isso ajuda a garantir que as novas cores funcionem bem em conjunto e sejam coerentes.
As opções para isso variam de acordo com seu tema – alguns temas permitem que você direcione cabeçalhos, links e outros elementos e mude sua cor.
Se você quiser direcionar elementos específicos para alterar sua cor, mas isso não é uma opção com seu tema, você pode adicionar CSS no Customizer para fazer isso.
Selecione Personalizar > CSS adicional e digite seu CSS na caixa de texto.
Por exemplo, para modificar a cor dos cabeçalhos h1, digite-o:
h1 {
color: #564534;
}Se isso não funcionar, você pode precisar adicionar um CSS mais específico. No meu tema, a cor para o link de cabeçalho do site é codificado usando o #site-title ID, então eu preciso adicionar este CSS:
#site-title a {
color: #564534;
}
Substitua a cor que usei acima pela sua própria cor.
Quando estiver satisfeito com suas alterações, clique no botão Publicar.
Alterar as cores das fontes no seu folheto de estilo
Assim como nos estilos de fonte, você também pode editar a folha de estilo do tema (ou criar um tema infantil) para alterar as cores da fonte.
Mude a cor com a cor. Abaixo estou mudando a cor principal para o texto do meu site, usando o body element:
body {
color = #222222;
}Certifique-se de que substitui qualquer estilo existente para os mesmos elementos e que também cria estilos para quaisquer elementos que herdem esse estilo se quiser que tenham uma cor diferente. Todo o texto herdará a cor do elemento body a menos que tenha o seu próprio estilo.
Modificando tamanhos de fontes no WordPress
Por razões de acessibilidade, você pode decidir que quer que suas fontes sejam maiores do que são por padrão no seu tema. Ou você pode decidir que os títulos em suas áreas de widgets são muito pequenos, por exemplo.
Alterar o tamanho da fonte em Gutenberg
Com o editor Gutenberg, pode alterar o tamanho do texto dentro de cada bloco.
Selecione o bloco e clique na guia Configurações de texto no menu Blocos à direita da tela. Você pode tornar o texto no bloco menor ou maior, como mostrado abaixo.
Cuidado com isso: se todos os parágrafos da sua página forem de tamanhos diferentes, ela parecerá desarticulada e difícil de ler.
Alterando o tamanho da fonte no editor clássico
O editor clássico não lhe dá a opção de selecionar texto específico e alterar o seu tamanho: por isso se precisar desta funcionalidade, terá de atualizar para o Gutenberg. Desculpa!
Alterar o tamanho da fonte no customizador
Dependendo do seu tema, você pode ter uma opção para alterar o tamanho da fonte no Personalizador, alterando o tamanho da fonte para todo o site ou direcionando cabeçalhos e corpo do texto.
Se o seu tema não incluir uma opção Personalizador para alterar os tamanhos das fontes, mas você pode usar a opção CSS adicional. Vá até Personalizar > CSS adicional e digite o CSS na caixa.
Abaixo eu estou fazendo os cabeçalhos nas áreas de widgets maiores, com este CSS:
h2.widget-title {
font-size: 3em;
}
Talvez seja um pouco grande demais, mas dá uma ideia geral.
Alterar o tamanho da fonte no seu folheto de estilo
Alterar o tamanho das fontes na folha de estilo funciona de forma semelhante à alteração de qualquer outro estilo para as suas fontes.
Se você quiser alterar o tamanho de todo o texto em seu site, você usaria o body element:
body {
font-size: 14px;
}Para o body element você usa pixels, mas para outros elementos que você usa em so o tamanho é relativo ao tamanho do body element.
h1,
#site-title {
font-size: 2em;
}Lembre-se se você vai fazer alterações nas fontes em sua folha de estilo temática, teste-a em um site de desenvolvimento ou de teste primeiro para que você não corra o risco de arruinar seu site ao vivo.
Como otimizar fontes no WordPress
Se você estiver usando fontes da Web ou fontes hospedadas localmente, faz sentido fazer tudo o que puder para otimizar suas fontes.
Aqui vou te dar algumas dicas sobre como otimizar suas fontes, tanto para velocidade quanto para design.
Otimização de fontes para desempenho
Se você estiver usando fontes da web em seu site, você vai querer fazer tudo o que puder para garantir que elas sejam entregues nas suas páginas o mais rápido possível e que o fato de estarem hospedadas em outro lugar não atrase as coisas.
- Use cache para garantir que as páginas não precisem ser reconstruídas toda vez que forem carregadas. Os planos de hospedagem Kinsta vêm com cache embutido.
- Use um provedor de fontes da Web que forneça fontes usando uma Rede de Entrega de Conteúdo ou CDN. O Google Fonts faz isso e acelera a entrega das fontes.
- Use apenas as fontes que você precisa. Não enfileire variações de fontes (pesos, estilos) que você não estará usando em sua folha de estilo. Se você achar que precisa deles em uma data posterior, você pode sempre adicioná-los.
- Se utilizar fontes web, certifique-se de que as enfileira corretamente. Não use uma linha @import em sua folha de estilo, mesmo que isso seja o que seu provedor de fontes web lhe diz para fazer.
- Ao adicionar CSS manualmente, adicione-o à folha de estilo do seu tema e não à seção < head> do seu arquivo header.php. Esta é uma das razões pelas quais é melhor codificar o CSS manualmente no seu tema em vez de usar o Customizer ou um bloco, já que ambos irão adicionar CSS inline à página em vez de o adicionar à folha de estilo.
- Considere usar o revestimento em CSS para reduzir alguns milissegundos extras nos tempos de carregamento de página. Este é um processo que usa a codificação base64 para adicionar CSS da sua folha de estilo para a página antes de carregá-la, salvando o navegador tendo que carregar arquivos extras. Pode parecer contraintuitivo dado o conselho acima sobre não escrever CSS inline, mas ele ainda funciona a partir de um arquivo CSS separado e não significa codificar manualmente CSS inline. Se você estiver carregando várias fontes, o inlining pode acelerar um pouco o seu site.
- Use a minificação para reduzir o tamanho da folha de estilo. Isto pode ser feito facilmente se você for um cliente Kinsta, aproveitando o recurso de minificação de código localizado bem no painel MyKinsta. Isto permite aos clientes habilitar a minificação automática de CSS e JavaScript com um simples clique, acelerando seus sites com zero esforço de trabalho manual.
- Se você estiver hospedando fontes localmente, carregue apenas os arquivos para as fontes e os pesos e estilos de fontes que você precisa. Adicione apenas as variações de que necessita utilizando a declaração @font-face.
- Considere usar uma CDN para hospedar suas próprias fontes em vez de hospedá-las em seu próprio servidor.
- Ao hospedar suas próprias fontes, inclua formatos adicionais: woff2, woff, ttf e eot. Os navegadores podem então selecionar a versão que vai carregar mais rapidamente.
- Se você estiver usando uma fonte diferente para o título do seu site, enfileire apenas os caracteres que você precisa em vez da biblioteca de fontes inteira.
Então, se o título do seu site é Kinsta, você poderia fazer uma pequena melhoria de performance seguindo a folha de estilo como esta:
function kinsta_add_title_font() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway&text="kinsta');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );Otimizando Fontes para Design
Além de otimizar o desempenho de suas fontes, também faz sentido garantir que elas sejam visualmente otimizadas: que se ajustem bem ao design do seu site e aos seus materiais offline.
Este é particularmente o caso se você usar um plugin ou um tema filho para adicionar fontes extras além daquelas já empacotadas com seu tema. Há um risco de seu tema parecer confuso se houver muitas fontes em muitas cores e estilos.
Antes de adicionar fontes extras ao seu site, considere o seguinte:
- As novas fontes são consistentes com as fontes existentes? Eles transmitem um estilo ou humor semelhante?
- Se você precisa combinar uma fonte que foi usada para materiais de impressão, mas não pode usar a mesma fonte que uma fonte da web, tente encontrar uma correspondência o mais próxima possível no Google Fonts.
- As fontes que escolheu são consistentes com a sua marca? Se você está executando um negócio sério, você não quer usar Comic Sans (na verdade, qualquer tipo de site que você está executando, você não quer usar Comic Sans).
- Se você está mudando as cores de suas fontes, tente usar cores que já estão no design do seu tema ou que se coordenam com elas. Adicionar demasiadas cores fará com que o seu site pareça garrido e pouco profissional.
- Se você estiver tentando escolher um par de fontes no Google Fonts, tente usar um serviço como o fontpair para encontrar duas que funcionem bem juntas.
As fontes que você usa em seu design terão um impacto sobre a impressão que os visitantes recebem quando chegam ao seu site. Certifique-se de que você considerou isso e escolheu fontes que irão reforçar a sua marca.
Trabalhando com fontes variáveis
Fontes variáveis são um novo tipo de fontes que tornam mais eficiente adicionar mais fontes ao seu site.
Eles permitem que mais informações sejam armazenadas em um arquivo de fonte, de modo que se você quiser variações em sua fonte (negrito, itálico, etc.), você não tem que carregar vários arquivos de fonte, mas pode apenas carregar um.
Para uma fonte com múltiplos pesos, estilos e inclinações de fontes, isso pode economizar muito espaço de arquivo e tornar o processo de enfileirar a fonte ou adicioná-la via @fontface mais fácil também.
Fontes variáveis são suportadas nas versões mais recentes do Chrome, Edge, Firefox e Safari, mas não por navegadores mais antigos. E ainda não há muitas fontes variáveis disponíveis. O Google Fonts não inclui nenhuma, mas o Google suporta as especificações, por isso é provável que sejam adicionadas ao longo do tempo.
Os desenvolvedores de fontes estão trabalhando para criar mais fontes variáveis e melhorar sua confiabilidade, então vale a pena observar o progresso para que você possa usar fontes variáveis para otimizar suas fontes quando elas se tornarem mais estáveis.
Resumo
Alterar fontes no seu site do WordPress não é uma tarefa fácil. Você tem diferentes possibilidades para escolher:
- Usando fontes web instalando um plugin.
- Usando fontes web, codificando-as em seu tema e enfileirando-as.
- A hospedar as suas fontes.
Então, você deve se concentrar em como otimizar suas fontes para um melhor desempenho. Se você seguir as dicas neste guia, você deve ser capaz não só de mudar as fontes no WordPress, mas também ter mais controle sobre elas no seu tema.
Deseja diminuir o layout da sua página ou blog para que seus leitores se concentrem em seu conteúdo? Então, confira isto: Como remover a barra lateral no WordPress (4 métodos).
Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.
Deixe um comentário