{"id":30596,"date":"2019-11-11T07:49:08","date_gmt":"2019-11-11T15:49:08","guid":{"rendered":"https:\/\/kinsta.com\/?p=55983"},"modified":"2025-09-01T12:40:57","modified_gmt":"2025-09-01T15:40:57","slug":"como-alterar-fontes-no-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/","title":{"rendered":"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)"},"content":{"rendered":"<p>As fontes podem fazer a diferen\u00e7a entre um site sem gra\u00e7a e um site bonito. Ao aprender a mudar a <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-modernas\/\">fonte no WordPress<\/a>, voc\u00ea pode fazer o seu site parecer moderno, profissional e de marca.<\/p>\n<p>Mas qual \u00e9 a melhor maneira de usar <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-wordpress\/\">fontes em seu site WordPress<\/a>, e como voc\u00ea escolhe as fontes certas para seu design?<\/p>\n<p>Neste guia, vou gui\u00e1-lo atrav\u00e9s de tudo o que voc\u00ea precisa saber sobre fontes no WordPress.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2 id=\"terminology\">Fontes: A Terminologia<\/h2>\n<p>Vamos come\u00e7ar por olhar para a terminologia em torno das fontes na web.<\/p>\n<ul>\n<li>As Fontes Web (tamb\u00e9m conhecidas como <a style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" href=\"https:\/\/kinsta.com\/pt\/blog\/html-fontes\/\">fontes HTML<\/a><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">) <\/span>s\u00e3o fontes hospedadas em um site de terceiros e vinculadas ao seu site.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-locais\/\">As fontes hospedadas localmente<\/a> s\u00e3o apenas isso (hospedadas nos servidores do seu site).<\/li>\n<li>As <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-seguras-na-web\/\">fontes Web-safe<\/a> s\u00e3o uma gama limitada de fontes pr\u00e9-instaladas em (quase) todos os computadores e que voc\u00ea pode estar bastante confiante de que todos os seus visitantes ter\u00e3o acesso.<\/li>\n<\/ul>\n<p>Vamos dar uma olhada nas op\u00e7\u00f5es para adicionar fontes ao seu site.<\/p>\n<h2 id=\"options\">Como adicionar fontes ao seu site WordPress (as Op\u00e7\u00f5es)<\/h2>\n<p>Antes de saltar para adicionar fontes ao seu site, isso ajuda se voc\u00ea entender as op\u00e7\u00f5es dispon\u00edveis para voc\u00ea.<\/p>\n<p>As fontes fazem parte do design do seu site, por isso, na maioria dos casos, ser\u00e3o codificadas atrav\u00e9s do seu tema &#8211; mas nem sempre. Em alguns casos, voc\u00ea pode decidir usar um plugin para habilitar uma gama maior de fontes em seu site.<\/p>\n<p>Aqui est\u00e3o algumas das op\u00e7\u00f5es dispon\u00edveis para voc\u00ea:<\/p>\n<ul>\n<li>Usando fontes da web, como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-fontes-google\/\">Google Fonts<\/a>, instalando um plugin que lhe d\u00e1 acesso.<\/li>\n<li>Usando fontes web, codificando-as em seu tema e enfileirando-as (n\u00e3o t\u00e3o complicado quanto parece).<\/li>\n<li>Hospedando suas fontes em seu pr\u00f3prio site e adicionando-as ao <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-um-tema-do-wordpress\/\">seu tema<\/a>.<\/li>\n<\/ul>\n<p>Existem duas distin\u00e7\u00f5es principais &#8211; se voc\u00ea usa fontes web, que s\u00e3o hospedadas fora do seu site, ou se voc\u00ea escolhe hospedar seus pr\u00f3prios arquivos de fontes. Neste guia, vamos ver os pr\u00f3s e contras de cada um.<\/p>\n<p>Vamos come\u00e7ar por olhar para as fontes da web: por que raz\u00e3o pode optar por utiliz\u00e1-las e as formas de as adicionar ao seu site.<\/p>\n<h2 id=\"webfonts\">Usando Fontes Web no WordPress<\/h2>\n<p>As fontes da Web s\u00e3o a forma mais popular de adicionar fontes ao seu site porque facilitam a adi\u00e7\u00e3o de uma vasta gama de fontes.<\/p>\n<h3>O que s\u00e3o fontes da Web?<\/h3>\n<p>As fontes da Web s\u00e3o fontes hospedadas no site de um provedor de terceiros. Em vez de copiar os arquivos para o seu pr\u00f3prio site, voc\u00ea liga para o site do provedor e eles s\u00e3o puxados de l\u00e1.<\/p>\n<p>Isto significa que voc\u00ea tem acesso a uma grande variedade de fontes sem ter que usar o espa\u00e7o do servidor em sua pr\u00f3pria hospedagem. Isso tamb\u00e9m significa que se os arquivos de fonte mudarem com o tempo, voc\u00ea n\u00e3o precisa atualizar seus arquivos e ter\u00e1 acesso automaticamente \u00e0s novas vers\u00f5es dos arquivos do provedor.<\/p>\n<p>As fontes da Web podem ser gratuitas ou voc\u00ea pode pagar por elas, geralmente atrav\u00e9s de uma assinatura. Alguns provedores populares s\u00e3o:<\/p>\n<ul>\n<li><a href=\"https:\/\/fonts.google.com\/\">Fontes do Google<\/a>. O maior fornecedor de fontes web gratuitas. Voc\u00ea tamb\u00e9m pode baixar todas as suas fontes para o seu computador, ou seja, se voc\u00ea quiser criar materiais offline usando as mesmas fontes do seu site, voc\u00ea pode. E \u00e9 tudo gr\u00e1tis.<\/li>\n<li><a href=\"https:\/\/edgewebfonts.adobe.com\/\">Adobe Edge Web Fonts<\/a>. Estes tamb\u00e9m s\u00e3o gratuitos. Embora tenham sido projetados para serem usados com produtos da Adobe, eles funcionam bem em qualquer site.<\/li>\n<li><a href=\"https:\/\/www.fonts.com\/browse\">Fonts.com<\/a> \u00e9 um provedor premium de fontes, que voc\u00ea pode precisar usar se voc\u00ea tiver que combinar sua fonte web com uma fonte do seu material impresso e a fonte n\u00e3o estiver dispon\u00edvel atrav\u00e9s de um provedor gratuito.<\/li>\n<li><a href=\"https:\/\/www.fontfabric.com\/fonts\/\">fontfabric<\/a> \u00e9 um designer de fontes que fornece fontes premium para uso como fontes web e online. Voc\u00ea precisar\u00e1 pagar por isso, mas receber\u00e1 algo mais individual do que se voc\u00ea usasse fontes do Google.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/09\/google-fonts.jpg\" alt=\"Google Fonts\" width=\"1500\" height=\"849\"><figcaption class=\"wp-caption-text\">Google Fonts<\/figcaption><\/figure>\n<p>Todos esses provedores permitem que voc\u00ea sirva as fontes diretamente de seus servidores, adicionando algum c\u00f3digo ao <a href=\"https:\/\/kinsta.com\/pt\/blog\/custo-de-website-wordpress\/\">seu site do WordPress<\/a> ou, \u00e0s vezes, <a href=\"https:\/\/kinsta.com\/pt\/topicos\/plugins-wordpress\/\">usando um plugin<\/a> que significa que voc\u00ea n\u00e3o precisa adicionar nenhum c\u00f3digo.<\/p>\n<p>As fontes da Web s\u00e3o diferentes das fontes seguras para a Web. Voc\u00ea pode us\u00e1-los como um fallback para fontes da web apenas no caso de seu visitante do site n\u00e3o pode se conectar \u00e0 fonte da web por algum motivo. Eu mostro-te como se faz isso mais tarde neste post.<\/p>\n<h3>Por que usar fontes da Web?<\/h3>\n<p>Ent\u00e3o agora voc\u00ea sabe o que s\u00e3o fontes da web, por que voc\u00ea escolheria us\u00e1-las em vez de hospedar suas pr\u00f3prias fontes?<\/p>\n<p>Aqui est\u00e3o alguns dos benef\u00edcios:<\/p>\n<ul>\n<li>Facilidade: adicionar algumas linhas de c\u00f3digo ou instalar um plugin \u00e9 mais r\u00e1pido do que baixar e carregar os arquivos de fontes e torna mais f\u00e1cil mudar as fontes se voc\u00ea decidir no futuro.<\/li>\n<li>Faixa de fontes: h\u00e1 milhares de fontes dispon\u00edveis como fontes da web e a lista est\u00e1 crescendo o tempo todo.<\/li>\n<li>Atualiza\u00e7\u00f5es: Se o arquivo de fonte precisa ser atualizado, talvez para adicionar fontes vari\u00e1veis (mais das quais em breve) ou para adicionar caracteres extras, seu site ter\u00e1 acesso \u00e0 nova vers\u00e3o sem que voc\u00ea tenha que fazer nada.<\/li>\n<\/ul>\n<p>A maioria dos sites usa fontes web, com uma fonte segura como backup. E com o WordPress, \u00e9 muito f\u00e1cil de fazer.<\/p>\n<h3>Encontrando as melhores fontes da Web para o seu site<\/h3>\n<p>Tendo decidido que voc\u00ea vai usar fontes web, agora voc\u00ea tem uma decis\u00e3o dif\u00edcil: quais fontes usar?<\/p>\n<p>Nos bons velhos tempos em que todos os desenvolvedores web tinham acesso eram aquelas fontes web-safe pr\u00e9-instaladas, esta foi uma decis\u00e3o muito f\u00e1cil. Queres usar uma fonte serifa ou sans-serif? (As fontes Serif t\u00eam uma pequena linha ou tra\u00e7o no final de um tra\u00e7o maior em cada caractere, as fontes sans-serif n\u00e3o.) Tendo tomado essa decis\u00e3o, as suas escolhas foram muito limitadas.<\/p>\n<p>Mas agora, o mundo \u00e9 a tua ostra.<\/p>\n<p>Aqui est\u00e3o algumas dicas para ajud\u00e1-lo a escolher a melhor fonte para o seu site:<\/p>\n<ul>\n<li>Olha para os teus materiais impressos. Existem fontes j\u00e1 em uso que voc\u00ea pode encontrar como fontes web? Se n\u00e3o, consegues encontrar algo semelhante?<\/li>\n<li>Veja os sites dos seus concorrentes. Que tipos de fontes est\u00e3o a usar? N\u00e3o recomendo que os copie, mas pode haver certos estilos que transmitam o tipo certo de imagem aos utilizadores do seu website.<\/li>\n<li>Pense no tipo de humor que quer transmitir com as suas fontes. Algumas fontes parecem mais modernas, outras mais tradicionais. Alguns s\u00e3o divertidos, outros mais s\u00e9rios.<\/li>\n<li>Siga as <a href=\"https:\/\/kinsta.com\/pt\/topicos\/estrategia-de-conteudo\/#give-readers-your-very-best\">fontes que s\u00e3o f\u00e1ceis de ler<\/a> para o corpo do texto, e use fontes mais interessantes para as manchetes, se quiser.<\/li>\n<li>Escolha entre <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-fontes-google\/\">as fontes mais populares do Google<\/a> &#8211; estas ser\u00e3o familiares aos visitantes do site e s\u00e3o f\u00e1ceis de ler.<\/li>\n<\/ul>\n<p>Depois de escolher as suas fontes, passe algum tempo a experiment\u00e1-las. Provedores de fontes como o Google Fonts permitem que voc\u00ea digite texto personalizado para ver como ele se parece na fonte escolhida. Uma vez que voc\u00ea veja seu pr\u00f3prio texto na fonte, ele pode ajud\u00e1-lo a decidir se essa \u00e9 a fonte certa para voc\u00ea.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/experimentando-com-sua-fonte-1.jpg\" alt=\"Experimentando com sua fonte\" width=\"1500\" height=\"369\"><figcaption class=\"wp-caption-text\">Experimentando com sua fonte<\/figcaption><\/figure>\n<p>E lembre-se, o uso de fontes da Web facilita muito a altera\u00e7\u00e3o das fontes para que voc\u00ea possa sempre mudar para outra op\u00e7\u00e3o enquanto <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">desenvolve seu tema<\/a> ou configura seu site.<\/p>\n<h3>Como adicionar fontes web com um plugin WordPress<\/h3>\n<p>Ent\u00e3o voc\u00ea escolheu a fonte escolhida, agora \u00e9 hora de adicion\u00e1-la ao seu site.<\/p>\n<p>Se n\u00e3o se sentir \u00e0 vontade para adicionar c\u00f3digo aos seus ficheiros de temas, pode instalar um plugin que lhe permitir\u00e1 aceder \u00e0s fontes do Google e utilizar qualquer fonte que quiser no seu site.<\/p>\n<p>O plug-in <a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\">Google Fonts Typography<\/a> d\u00e1-lhe acesso a toda a biblioteca de fontes do Google e permite-lhe analis\u00e1-las atrav\u00e9s do WordPress Customizer.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-plugins-no-wordpress\/\">Instale o plugin<\/a> em seu site da mesma forma que voc\u00ea faria com qualquer outro plugin, e ent\u00e3o ative-o.<\/p>\n<p>V\u00e1 at\u00e9<strong> Apar\u00eancia &gt; Personalizar para<\/strong> acessar o Personalizador. Voc\u00ea ver\u00e1 uma se\u00e7\u00e3o para o<strong> Google Fonts<\/strong>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/Google-Fonts-no-Customizer1.jpg\" alt=\"Google Fonts no Customizer\" width=\"1500\" height=\"804\"><figcaption class=\"wp-caption-text\">Google Fonts no Customizer<\/figcaption><\/figure>\n<p>Clique nesse link para acessar as configura\u00e7\u00f5es de suas fontes. Configure-os da seguinte forma:<\/p>\n<p><strong>Configura\u00e7\u00f5es B\u00e1sicas<\/strong>: configure a fonte padr\u00e3o para o texto do corpo e seus cabe\u00e7alhos, bem como quaisquer bot\u00f5es. Na imagem abaixo voc\u00ea pode ver que eu adicionei uma fonte serifa de f\u00e1cil leitura para o corpo e uma fonte mais distinta para cabe\u00e7alhos.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/configuracao-basicas.jpg\" alt=\"Configura\u00e7\u00e3o das defini\u00e7\u00f5es b\u00e1sicas\" width=\"1500\" height=\"708\"><figcaption class=\"wp-caption-text\">Configura\u00e7\u00e3o das defini\u00e7\u00f5es b\u00e1sicas<\/figcaption><\/figure>\n<p><strong>Configura\u00e7\u00f5es avan\u00e7adas<\/strong>: Aqui voc\u00ea pode configurar a marca (t\u00edtulo e descri\u00e7\u00e3o do site), navega\u00e7\u00e3o (seu menu), conte\u00fado e t\u00edtulos com mais detalhes, sua barra lateral e rodap\u00e9. Voc\u00ea tamb\u00e9m pode carregar fontes sem atribu\u00ed-las a nada, o que significa que voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">adicion\u00e1-las a qualquer CSS personalizado<\/a> no Customizer.<\/p>\n<p><strong>Carregamento de fontes<\/strong>: Se houver algum tipo de fonte que voc\u00ea n\u00e3o precise (por exemplo, negrito, it\u00e1lico, esse tipo de coisa), voc\u00ea pode desmarc\u00e1-los aqui para que eles n\u00e3o diminuam a velocidade do seu site desnecessariamente.<\/p>\n<p><strong>Debugging<\/strong>: Use isso para for\u00e7ar qualquer fonte a exibir se ela n\u00e3o estiver funcionando como deveria.<\/p>\n<p>Passe algum tempo trabalhando com essas configura\u00e7\u00f5es e testando-as no Customizer para garantir que elas funcionem da maneira que voc\u00ea deseja. Depois, quando estiver satisfeito com suas configura\u00e7\u00f5es, clique no bot\u00e3o<strong> Publicar<\/strong>. N\u00e3o deixe o Customizer sem clicar em<strong> Publicar<\/strong> ou voc\u00ea perder\u00e1 suas altera\u00e7\u00f5es.<\/p>\n<h4>Edi\u00e7\u00e3o de Cores de Fontes<\/h4>\n<p>A vers\u00e3o gratuita do plugin n\u00e3o permite que voc\u00ea edite as cores de suas fontes. Para fazer isso, voc\u00ea ter\u00e1 que comprar a vers\u00e3o premium ou usar a op\u00e7\u00e3o<strong> CSS adicional<\/strong> no Customizer.<\/p>\n<p>Volte para a tela inicial do Personalizador e clique na guia<strong> CSS adicional<\/strong>. Ser-lhe-\u00e1 apresentada uma \u00e1rea de texto vazia onde poder\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">adicionar o seu pr\u00f3prio CSS<\/a>.<\/p>\n<p>Para encontrar o elemento que voc\u00ea precisa para estilizar, selecione-o e <a href=\"https:\/\/www.lifewire.com\/get-inspect-element-tool-for-browser-756549\">use o inspetor de c\u00f3digo<\/a> no seu navegador para descobrir qual a cor que ele j\u00e1 tem.<\/p>\n<p>Abaixo eu estou usando o Google Chrome e eu alvejei um elemento <code>h1<\/code>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/inspecionar-codigo.jpg\" alt=\"Inspecionar o seu c\u00f3digo no Chrome\" width=\"1500\" height=\"774\"><figcaption class=\"wp-caption-text\">Inspecionar o seu c\u00f3digo no Chrome<\/figcaption><\/figure>\n<p>No meu <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-tema-wordpress\/\">tema do WordPress<\/a>, ele herdou sua cor do elemento corpo. Quero acrescentar algo mais espec\u00edfico. Na \u00e1rea de texto do CSS, digite o CSS do elemento e a cor que deseja usar. O meu \u00e9 assim:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #f542f5;\n}<\/code><\/pre>\n<p>Isso d\u00e1-me um elemento H1 rosa brilhante:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/alterar-cabecalho-1.jpg\" alt=\"Alterar a cor do cabe\u00e7alho\" width=\"1500\" height=\"781\"><figcaption class=\"wp-caption-text\">Alterar a cor do cabe\u00e7alho<\/figcaption><\/figure>\n<p>Voc\u00ea pode repetir isso com qualquer elemento de texto ao qual queira adicionar cor, e tamb\u00e9m com qualquer outro que voc\u00ea queira adicionar fontes personalizadas que n\u00e3o foram inclu\u00eddas nas op\u00e7\u00f5es das outras telas. Se voc\u00ea quiser saber o que CSS usar para fontes, leia a se\u00e7\u00e3o deste post sobre como alterar suas fontes via CSS.<\/p>\n<h3>Como adicionar fontes da Web manualmente<\/h3>\n<p>Se voc\u00ea n\u00e3o quiser adicionar um plugin extra ao seu site e ter acesso ao c\u00f3digo do seu tema, voc\u00ea pode instalar e usar fontes da web <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">adicionando algum c\u00f3digo ao seu arquivo de fun\u00e7\u00f5es e \u00e0 sua folha de estilo<\/a>.<\/p>\n<p>Se o seu site estiver usando um tema personalizado que voc\u00ea pode editar, ent\u00e3o voc\u00ea pode editar o arquivo de fun\u00e7\u00f5es e a folha de estilo do seu tema. Mas se voc\u00ea estiver usando um tema de terceiros que voc\u00ea <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-um-tema-do-wordpress\/\">comprou ou comprou do diret\u00f3rio de temas do WordPress<\/a>, ent\u00e3o voc\u00ea precisar\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">criar um tema filho<\/a>. Voc\u00ea precisar\u00e1 ent\u00e3o dar-lhe dois arquivos: <strong>functions.php<\/strong> e <strong>style.css<\/strong>.<\/p>\n<p>Vamos trabalhar no processo de adicionar manualmente fontes web ao seu tema. Vou trabalhar com o Google Fonts para este exemplo, pois \u00e9 o mais usado e \u00e9 gratuito.<\/p>\n<h4>Escolhendo uma fonte e agarrando o link<\/h4>\n<p>Comece por escolher a sua fonte a partir do Google Fonts. Adicione-o \u00e0 sua biblioteca clicando no \u00edcone de mais ao lado dele.<\/p>\n<p>Clique na guia na parte inferior da tela da sua biblioteca e voc\u00ea ver\u00e1 algum c\u00f3digo para adicionar ao seu site. Se voc\u00ea quiser adicionar pesos e estilos de fontes extras, clique na guia<strong> Personalizar<\/strong> e selecione os que voc\u00ea deseja. Ent\u00e3o volte para a aba<strong> Embed<\/strong>.<\/p>\n<p>N\u00e3o copie o c\u00f3digo exatamente: voc\u00ea estar\u00e1 usando-o, mas ao inv\u00e9s de chamar a fonte na se\u00e7\u00e3o &lt; head&gt; do cabe\u00e7alho do seu site, voc\u00ea estar\u00e1 enfileirando as fontes. Esta \u00e9 a maneira correta de faz\u00ea-lo no WordPress.<\/p>\n<p>Em vez disso, na se\u00e7\u00e3o Incorporar fonte, copie apenas o link para a fonte.<\/p>\n<p>Ent\u00e3o, no meu caso, o Google Fonts est\u00e1 a dar-me este c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>S\u00f3 preciso de copiar esta parte:<\/p>\n<pre><code class=\"language-php\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/code><\/pre>\n<h4>Enfileiramento da(s) Fonte(s)<\/h4>\n<p>Abra o ficheiro das fun\u00e7\u00f5es do seu tema e adicione o seguinte, substituindo o link da minha fonte pelo link que o Google lhe deu para o seu:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Isto enfileira o estilo dos servidores de fontes do Google. Se voc\u00ea precisar adicionar mais fontes no futuro, voc\u00ea pode adicionar uma nova linha \u00e0 sua fun\u00e7\u00e3o ou adicion\u00e1-la na mesma linha, assim:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Isto ir\u00e1 enfileirar as fontes Merriweather e Raleway.<\/p>\n<h4>Adicionando a(s) Fonte(s) ao seu Estilo<\/h4>\n<p>Isso ainda n\u00e3o far\u00e1 com que a fonte funcione no seu site: voc\u00ea ainda precisa adicion\u00e1-la \u00e0 folha de estilo do seu tema.<\/p>\n<p>Abra o ficheiro <strong>style.css <\/strong>no seu tema e adicione o c\u00f3digo aos elementos individuais do estilo com as suas fontes web. Certifique-se de <a href=\"https:\/\/kinsta.com\/pt\/blog\/combinar-css-externo\/\">adicion\u00e1-lo depois de qualquer CSS existente<\/a> para fontes, ou ele pode ser substitu\u00eddo por isso.<\/p>\n<p>Os elementos que voc\u00ea criar depender\u00e3o de voc\u00ea, mas \u00e9 comum usar uma fonte leg\u00edvel para o elemento do corpo e algo mais extravagante para os cabe\u00e7alhos.<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', serif;\n}<\/code><\/pre>\n<p>No caso acima, tudo na p\u00e1gina usar\u00e1 a fonte Raleway, exceto os elementos h1, h2 e h3, que usar\u00e3o Merriweather.<\/p>\n<p>Agora, salve sua folha de estilo e verifique seu site para ter certeza de que tudo funciona como voc\u00ea espera. Se as novas fontes n\u00e3o estiverem aparecendo, tente <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-limpar-o-cache\/\">limpar o cache do navegador<\/a> e verificar se as fontes n\u00e3o est\u00e3o sendo substitu\u00eddas por nenhum estilo de fontes mais abaixo na folha de estilo. \u00c9 por isso que \u00e9 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).<\/p>\n<h4>Adicionar uma fonte de backup<\/h4>\n<p>Pode haver ocasi\u00f5es em que algu\u00e9m visite o seu site e n\u00e3o possa acessar os arquivos de fontes da web por algum motivo. Talvez eles estejam em uma conex\u00e3o pobre ou usando um dispositivo antigo que n\u00e3o renderiza fontes web. Ou talvez o seu fornecedor de fontes da web esteja tendo problemas t\u00e9cnicos.<\/p>\n<p>Por esta raz\u00e3o, \u00e9 uma boa ideia ter um backup no lugar.<\/p>\n<p>O c\u00f3digo que lhe \u00e9 dado pelas fontes do Google j\u00e1 tem um backup de simplesmente especificar <code>serif<\/code> or <code>sans-serif<\/code>, mas podemos ir um passo al\u00e9m disso.<\/p>\n<p>Use uma das fontes prontas para a web que j\u00e1 estar\u00e1 instalada na m\u00e1quina do seu visitante e, em seguida, inclua o segundo retorno de apenas <code>serif<\/code> or <code>sans-serif<\/code>, caso eles estejam usando um dispositivo m\u00f3vel que nem mesmo tenha as fontes prontas para a web.<\/p>\n<p>Volte para sua folha de estilo e edite seu CSS para que ele leia algo assim:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Isso significa que as pessoas que visitarem seu site ver\u00e3o suas fontes web se tudo estiver bem; mas se n\u00e3o estiver, elas ver\u00e3o Helv\u00e9tica ou Ge\u00f3rgia, ou, se n\u00e3o estiver, ver\u00e3o as fontes serif e sans-serif que seu navegador \u00e9 capaz de carregar.<\/p>\n<h2 id=\"host\">Hospedando suas pr\u00f3prias fontes no WordPress<\/h2>\n<p>Alguns desenvolvedores preferem n\u00e3o usar fontes web, mas sim hospedar fontes em seus pr\u00f3prios servidores e voc\u00ea pode ser um deles.<\/p>\n<p>Isto pode dever-se a uma ou mais raz\u00f5es, incluindo <a href=\"https:\/\/kinsta.com\/pt\/blog\/seguranca-wordpres\/\">seguran\u00e7a<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-desempenho-para-wordpress\/\">desempenho<\/a> ou or\u00e7amento.<\/p>\n<p>Se voc\u00ea est\u00e1 preocupado com o desempenho, voc\u00ea pode otimizar o desempenho de suas fontes da web de v\u00e1rias maneiras, que s\u00e3o abordadas mais adiante nesta publica\u00e7\u00e3o. Mas se decidiu seguir a rota local, ter\u00e1 de saber como faz\u00ea-lo.<\/p>\n<h3>Por que hospedar suas pr\u00f3prias fontes?<\/h3>\n<p>A utiliza\u00e7\u00e3o de fontes web \u00e9 muitas vezes mais f\u00e1cil e pode dar-lhe mais flexibilidade e ocupar menos espa\u00e7o no seu servidor. Mas isso n\u00e3o significa que n\u00e3o haja ocasi\u00f5es em que <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-locais\/\">hospedagem local de fontes<\/a> possa n\u00e3o ser mais apropriada.<\/p>\n<p>As raz\u00f5es que voc\u00ea pode querer hospedar fontes localmente incluem:<\/p>\n<p>Voc\u00ea pode achar que voc\u00ea pode contornar algumas dessas quest\u00f5es<\/p>\n<ul>\n<li>Voc\u00ea pode preferir n\u00e3o obter recursos de terceiros por raz\u00f5es de seguran\u00e7a, sabendo que a seguran\u00e7a do seu pr\u00f3prio site \u00e9 controlada por voc\u00ea.<\/li>\n<li>Voc\u00ea pode descobrir que o uso de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/desempenho-terceiros\/\">servi\u00e7o de terceiros afeta o desempenho do seu site<\/a>.<\/li>\n<li>Podes ter comprado um ficheiro de fonte e queres usar isso. Certifique-se de que a sua licen\u00e7a inclui o uso do site, bem como o uso em materiais impressos.<\/li>\n<li>Seu site pode ser hospedado localmente, por exemplo, em uma intranet, e os usu\u00e1rios n\u00e3o ter\u00e3o acesso a fontes da web quando o estiverem usando.<\/li>\n<\/ul>\n<h3>Onde encontrar fontes que voc\u00ea pode hospedar localmente<\/h3>\n<p>Muitas fontes web tamb\u00e9m podem ser baixadas para uso como fontes hospedadas localmente, mas voc\u00ea ter\u00e1 que verificar se isso \u00e9 permitido pela licen\u00e7a. No caso do Google Fonts, \u00e9 permitido.<\/p>\n<p>Voc\u00ea tamb\u00e9m ver\u00e1 que existem fontes n\u00e3o dispon\u00edveis como fontes da web que voc\u00ea mesmo pode baixar e hospedar. Qualquer arquivo de fonte que voc\u00ea pode baixar para o seu computador tamb\u00e9m pode ser carregado no seu site e armazenado l\u00e1. Se voc\u00ea precisa usar uma fonte que n\u00e3o est\u00e1 dispon\u00edvel como uma fonte web para se conectar com sua <a href=\"https:\/\/kinsta.com\/pt\/blog\/exemplos-de-sites-de-grandes-marcas-do-wordpress\/\">marca<\/a>, esta ser\u00e1 a solu\u00e7\u00e3o, mas certifique-se de que sua licen\u00e7a o permite.<\/p>\n<h3>Como adicionar fontes hospedadas localmente ao seu site WordPress<\/h3>\n<p>Ent\u00e3o voc\u00ea sabe que quer hospedar suas fontes localmente, como voc\u00ea vai fazer para configur\u00e1-las?<\/p>\n<p>O processo \u00e9 diferente do uso de fontes web. Voc\u00ea tem que <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">carregar<\/a> o(s) arquivo(s) da fonte a seu local e voc\u00ea liga a eles em seu stylesheet sem ter que enfileir\u00e1-los em sua lima das fun\u00e7\u00f5es.<\/p>\n<h4>Baixe e converta as fontes<\/h4>\n<p>Comece por descarregar as fontes que pretende utilizar. No Google Fonts, voc\u00ea pode fazer isso clicando no \u00edcone de download ao visualizar a fonte em sua biblioteca.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/baixando-fontes-google-fonts-1.jpg\" alt=\"Baixando fontes do Google Fonts\" width=\"1500\" height=\"790\"><figcaption class=\"wp-caption-text\">Baixando fontes do Google Fonts<\/figcaption><\/figure>\n<p>Descompacte o arquivo da fonte no seu computador e exclua qualquer fonte que voc\u00ea n\u00e3o precise usar no seu site: n\u00e3o h\u00e1 nenhum ponto em carregar arquivos que voc\u00ea n\u00e3o estar\u00e1 usando.<\/p>\n<p>Para usar em seu site, os arquivos precisar\u00e3o estar no formato . woff. Se n\u00e3o estiverem (n\u00e3o estar\u00e3o se voc\u00ea as tiver obtido de fontes do Google), voc\u00ea pode usar um servi\u00e7o como o <a href=\"https:\/\/convertio.co\/ttf-woff\/\">Convertio<\/a> para convert\u00ea-las.<\/p>\n<h4>Envie as fontes para o seu tema<\/h4>\n<p>Agora carregue o(s) ficheiro(s) de fonte para <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">o seu tema<\/a>, em <strong>wp-content\/themes\/themename<\/strong>, onde<strong> themename<\/strong>\u00a0\u00e9 a pasta do seu tema. \u00c9 uma boa id\u00e9ia colocar qualquer arquivo de fonte em sua pr\u00f3pria pasta no tema, por exemplo, uma pasta de<strong> fontes<\/strong>.<\/p>\n<p>Se voc\u00ea estiver trabalhando com um tema de terceiros, <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">crie um tema filho<\/a> para seus arquivos de fonte e sua folha de estilo.<\/p>\n<p>Depois de fazer isso, voc\u00ea precisar\u00e1 adicionar a fonte \u00e0 sua folha de estilo.<\/p>\n<h4>Adicionar a(s) fonte(s) em CSS<\/h4>\n<p>Abra a folha de estilo do seu tema.<\/p>\n<p>Adiciona c\u00f3digo como este, substituindo as fontes que usei pelas tuas:<\/p>\n<pre><code class=\"language-css\">@font-face {\n font-family: 'Raleway';\n src: url( \"fonts\/Raleway-Medium.ttf\") format('woff'); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Raleway';\n src: url( \"fonts\/Raleway-Bold.ttf\") format('woff'); \/* medium *\/\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Merriweather';\n src: url( \"fonts\/Merriweather.ttf\") format('woff'); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>Adiciona mais alguma coisa que precises. Note que se voc\u00ea quiser usar o negrito, it\u00e1lico, etc. varia\u00e7\u00f5es de sua fonte, voc\u00ea precisa declarar cada um usando <code>@fontface<\/code> , em seguida, <a href=\"https:\/\/css-tricks.com\/whats-deal-declaring-font-properties-font-face\/\">especificar o peso ou estilo para cada um<\/a>, como eu fiz acima com Raleway para negrito e pesos normais.<\/p>\n<p>Agora adicione o estilo para seus elementos, como voc\u00ea faria ao usar fontes da web:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n src: url( \"\/fonts\/Raleway-Medium.ttf\" );\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Suas fontes hospedadas localmente agora funcionar\u00e3o com seu tema.<\/p>\n<h2 id=\"change\">Como alterar fontes no WordPress<\/h2>\n<p>Agora voc\u00ea sabe como instalar fontes em seu site WordPress de uma das duas maneiras. Que tal edit\u00e1-los? Que tal mud\u00e1-los?<\/p>\n<p>Voc\u00ea pode editar suas fontes de uma de tr\u00eas maneiras: atrav\u00e9s do Customizer, na tela de publica\u00e7\u00e3o ou edi\u00e7\u00e3o de p\u00e1gina, ou usando CSS.<\/p>\n<p>Vamos ver cada uma dessas op\u00e7\u00f5es para mudar o estilo, a cor e o tamanho da fonte.<\/p>\n<h3>Como Alterar Estilos de Fontes no WordPress<\/h3>\n<p>Vamos ver como podemos fazer isso se voc\u00ea estiver usando o Block Editor ou o Classic Editor.<\/p>\n<h4>Mudando Estilos de Fontes no Editor de Blocos (Gutenberg)<\/h4>\n<p>Se estiver a utilizar uma vers\u00e3o recente do WordPress com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor do Gutenberg<\/a>, pode alterar o estilo do seu texto ao edit\u00e1-lo no seu post ou p\u00e1gina.<\/p>\n<p>Selecione o bloco que voc\u00ea deseja editar e um menu de estilo aparecer\u00e1 acima dele.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/gutenberg-bloco-estilo-1.jpg\" alt=\"Estilo de bloco Gutenberg\" width=\"1500\" height=\"567\"><figcaption class=\"wp-caption-text\">Estilo de bloco Gutenberg<\/figcaption><\/figure>\n<p>Selecione o texto que pretende editar e, em seguida, clique nos \u00edcones para o tornar negrito ou it\u00e1lico. Se voc\u00ea clicar na seta ao lado delas, ver\u00e1 que voc\u00ea tamb\u00e9m pode selecionar strikethrough.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/strikethrough-em-gutenberg1.jpg\" alt=\"Strikethrough em Gutenberg\" width=\"1500\" height=\"639\"><figcaption class=\"wp-caption-text\">Strikethrough em Gutenberg<\/figcaption><\/figure>\n<h4>Alterando Estilos de Fontes no Editor Cl\u00e1ssico<\/h4>\n<p>Se voc\u00ea estiver executando uma vers\u00e3o mais antiga do WordPress ou tiver o plugin <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/classic-editor\/\">Editor cl\u00e1ssico<\/a> instalado, voc\u00ea tamb\u00e9m pode editar estilos de fonte. (Se n\u00e3o quiser o editor do Gutenberg, \u00e9 melhor <a href=\"https:\/\/kinsta.com\/pt\/docs\/suporte\/escopo-do-suporte\/escopo-de-suporte-de-wordpress-gerenciado\/\">atualizar o WordPress<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/desabilitar-o-editor-wordpress-gutenberg\/\">desativar o Gutenberg<\/a>.)<\/p>\n<p>O Editor Cl\u00e1ssico inclui uma barra de ferramentas acima do painel de edi\u00e7\u00e3o principal, onde voc\u00ea pode alterar os estilos do texto. Se voc\u00ea clicar no \u00edcone da Barra de Ferramentas \u00e0 direita, poder\u00e1 acessar mais op\u00e7\u00f5es, incluindo strikethrough.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/classico-editor-ferramentas.jpg\" alt=\"Barra de ferramentas de estilo do editor cl\u00e1ssico\" width=\"1500\" height=\"727\"><figcaption class=\"wp-caption-text\">Barra de ferramentas de estilo do editor cl\u00e1ssico<\/figcaption><\/figure>\n<h4>Alterar Estilos de Fontes no Personalizador<\/h4>\n<p>Se voc\u00ea quiser mudar o estilo da fonte para um elemento espec\u00edfico, voc\u00ea pode fazer isso adicionando CSS manual ao Customizer.<\/p>\n<p>Abra o Personalizador e clique em<strong> CSS adicional<\/strong>. Isso abrir\u00e1 uma tela onde voc\u00ea pode digitar CSS.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/adicional-css-no-customizador.jpg\" alt=\"CSS adicional no customizador\" width=\"1500\" height=\"879\"><figcaption class=\"wp-caption-text\">CSS adicional no customizador<\/figcaption><\/figure>\n<p>Agora voc\u00ea pode digitar o CSS para suas fontes na caixa. Ent\u00e3o se voc\u00ea quisesse mudar todos os elementos h1 e h2 para it\u00e1lico, voc\u00ea adicionaria este CSS:<\/p>\n<pre><code class=\"language-css\">h1, h2 {\n font-style: italics;\n}<\/code><\/pre>\n<h4>Alterando Estilos de Fontes no seu Estilo de Estilo<\/h4>\n<p>Se voc\u00ea se sentir confort\u00e1vel em adicionar c\u00f3digo \u00e0 sua folha de estilo, esta \u00e9 uma maneira melhor de faz\u00ea-lo.<\/p>\n<p>Se voc\u00ea estiver usando um tema de terceiros, <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">crie um tema filho<\/a> para seu pr\u00f3prio estilo, caso contr\u00e1rio, quaisquer altera\u00e7\u00f5es que voc\u00ea fizer ser\u00e3o perdidas quando voc\u00ea atualizar o tema. Voc\u00ea ter\u00e1 que criar uma folha de estilo no tema infantil para dizer ao WordPress que \u00e9 um tema infantil: \u00e9 onde voc\u00ea coloca seu novo estilo de fonte.<\/p>\n<p>Se voc\u00ea estiver usando seu pr\u00f3prio tema, poder\u00e1 editar e alterar o CSS em sua pr\u00f3pria folha de estilo. O arquivo \u00e9 <strong>style.css <\/strong>e voc\u00ea o encontrar\u00e1 em sua pasta tem\u00e1tica em <strong>wp-content\/themes<\/strong>.<\/p>\n<p>Adicione qualquer estilo de fonte no final da sua folha de estilo para que ela n\u00e3o seja cancelada por nada que j\u00e1 esteja l\u00e1. Ou ainda melhor, remova e substitua qualquer estilo de fonte existente, a menos que voc\u00ea queira mant\u00ea-lo.<\/p>\n<p>Altere o peso de um elemento com o font-weight:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-weight = bold;\n}<\/code><\/pre>\n<p>Altere o estilo de um elemento com font-style:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-style = italic;\n}<\/code><\/pre>\n<p>Modificar o alinhamento com text-alignment:<\/p>\n<pre><code class=\"language-css\">span.featured {\n text-alignment: center;\n}<\/code><\/pre>\n<h3>Como alterar as cores das fontes no WordPress<\/h3>\n<p>Outra mudan\u00e7a que voc\u00ea pode querer fazer \u00e9 mudar a cor de determinado texto em seu site. Cuidado para n\u00e3o exagerar com isso: seu tema foi projetado com cores que funcionam bem juntas e se voc\u00ea adicionar muitas cores, ele pode parecer garrido e pouco profissional.<\/p>\n<h4>Mudando as cores das fontes em Gutenberg<\/h4>\n<p>Os blocos de texto Gutenberg permitem-lhe editar a cor do texto e o fundo. Para isso, abra o bloco que voc\u00ea deseja corrigir e clique na guia<strong> Configura\u00e7\u00f5es de cores<\/strong> na se\u00e7\u00e3o<strong> Bloco<\/strong> \u00e0 direita da tela.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/cor-separador-definicoes.jpg\" alt=\"O separador de defini\u00e7\u00f5es de cor\" width=\"1500\" height=\"667\"><figcaption class=\"wp-caption-text\">O separador de defini\u00e7\u00f5es de cor<\/figcaption><\/figure>\n<p>A partir daqui \u00e9 poss\u00edvel editar a cor de fundo e a cor do texto para os blocos de texto.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/personalizadas-colors-em-um-bloco.jpg\" alt=\"Cores personalizadas em um bloco\" width=\"1500\" height=\"756\"><figcaption class=\"wp-caption-text\">Cores personalizadas em um bloco<\/figcaption><\/figure>\n<p>Note que o WordPress ir\u00e1 avis\u00e1-lo se a combina\u00e7\u00e3o de cores que voc\u00ea usa for ruim para a acessibilidade, como no exemplo que usei acima. Evite a tenta\u00e7\u00e3o de ir ao mar com suas cores &#8211; afinal voc\u00ea escolheu seu tema porque seu design colorido era apropriado para o seu site, e adicionar muito mais cores poderia torn\u00e1-lo garrido.<\/p>\n<p>Se voc\u00ea clicar na guia<strong> Avan\u00e7ado <\/strong>abaixo da guia<strong> Configura\u00e7\u00f5es de cores<\/strong>, voc\u00ea tamb\u00e9m poder\u00e1 adicionar uma classe a esse bloco, que poder\u00e1 ser estilizada no Customizador ou na sua folha de estilo. Assim, por exemplo, se voc\u00ea adicionou uma classe de <code>.featured<\/code> ao seu bloco, voc\u00ea poderia ent\u00e3o estilo-lo usando essa classe.<\/p>\n<h4>Alterando as cores das fontes no editor cl\u00e1ssico<\/h4>\n<p>A barra de ferramentas do editor cl\u00e1ssico permite que voc\u00ea mude a cor do texto selecionado. Assim voc\u00ea pode selecionar uma palavra individual e mudar sua cor. Abaixo fiz uma frase vermelha.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/classico-editor-mudando-cores-1.jpg\" alt=\"Mudando cores no editor cl\u00e1ssico\" width=\"1500\" height=\"716\"><figcaption class=\"wp-caption-text\">Mudando cores no editor cl\u00e1ssico<\/figcaption><\/figure>\n<p>Embora isto te d\u00ea, em teoria, muita flexibilidade, tem cuidado ao us\u00e1-la em demasia. Se voc\u00ea come\u00e7ar a adicionar muito mais cores ao seu texto, isso pode resultar em um site que \u00e9 dif\u00edcil de ler e ruim para a acessibilidade.<\/p>\n<h4>Alterar as cores das fontes no customizador<\/h4>\n<p>Se o seu tema inclui op\u00e7\u00f5es para alterar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/esquemas-de-cores-site\/\">esquema de cores do seu site<\/a>, este \u00e9 o melhor lugar para o fazer.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/editar-cores-esquema-no-1.jpg\" alt=\"Editar o esquema de cores no Customizer\" width=\"1500\" height=\"815\"><figcaption class=\"wp-caption-text\">Editar o esquema de cores no Customizer<\/figcaption><\/figure>\n<p>As op\u00e7\u00f5es para isso variam de acordo com seu tema &#8211; alguns temas permitem que voc\u00ea direcione cabe\u00e7alhos, links e outros elementos e mude sua cor.<\/p>\n<p>Se voc\u00ea quiser direcionar elementos espec\u00edficos para alterar sua cor, mas isso n\u00e3o \u00e9 uma op\u00e7\u00e3o com seu tema, voc\u00ea pode adicionar CSS no Customizer para fazer isso.<\/p>\n<p>Selecione<strong> Personalizar &gt; CSS adicional<\/strong> e digite seu CSS na caixa de texto.<\/p>\n<p>Por exemplo, para modificar a cor dos cabe\u00e7alhos <code>h1<\/code>, digite-o:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #564534;\n}<\/code><\/pre>\n<p>Se isso n\u00e3o funcionar, voc\u00ea pode precisar adicionar um CSS mais espec\u00edfico. No meu tema, a cor para o link de cabe\u00e7alho do site \u00e9 codificado usando o <code>#site-title<\/code> ID, ent\u00e3o eu preciso adicionar este CSS:<\/p>\n<pre><code class=\"language-css\">#site-title a {\n color: #564534;\n}<\/code><\/pre>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/adicional-css-cor.jpg\" alt=\"CSS adicional - cor\" width=\"1500\" height=\"818\"><figcaption class=\"wp-caption-text\">CSS adicional &#8211; cor<\/figcaption><\/figure>\n<p>Substitua a cor que usei acima pela sua pr\u00f3pria cor.<\/p>\n<p>Quando estiver satisfeito com suas altera\u00e7\u00f5es, clique no bot\u00e3o<strong> Publicar<\/strong>.<\/p>\n<h4>Alterar as cores das fontes no seu folheto de estilo<\/h4>\n<p>Assim como nos estilos de fonte, voc\u00ea tamb\u00e9m pode editar a folha de estilo do tema (ou criar um tema infantil) para alterar as <a href=\"https:\/\/kinsta.com\/pt\/blog\/cor-da-fonte-html\/\">cores da fonte<\/a>.<\/p>\n<p>Mude a cor com a cor. Abaixo estou mudando a cor principal para o texto do meu site, usando o <code>body<\/code> element:<\/p>\n<pre><code class=\"language-css\">body {\n color = #222222;\n}<\/code><\/pre>\n<p>Certifique-se de que substitui qualquer estilo existente para os mesmos elementos e que tamb\u00e9m cria estilos para quaisquer elementos que herdem esse estilo se quiser que tenham uma cor diferente. Todo o texto herdar\u00e1 a cor do elemento<strong> body <\/strong>a menos que tenha o seu pr\u00f3prio estilo.<\/p>\n<h3>Modificando tamanhos de fontes no WordPress<\/h3>\n<p>Por raz\u00f5es de acessibilidade, voc\u00ea pode decidir que quer que suas fontes sejam maiores do que s\u00e3o por padr\u00e3o no seu tema. Ou voc\u00ea pode decidir que os t\u00edtulos em suas \u00e1reas de widgets s\u00e3o muito pequenos, por exemplo.<\/p>\n<h4>Alterar o tamanho da fonte em Gutenberg<\/h4>\n<p>Com o editor Gutenberg, pode alterar o tamanho do texto dentro de cada bloco.<\/p>\n<p>Selecione o bloco e clique na guia Configura\u00e7\u00f5es de texto no menu Blocos \u00e0 direita da tela. Voc\u00ea pode tornar o texto no bloco menor ou maior, como mostrado abaixo.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/edicao-font-tamanho-em-gutenberg.jpg\" alt=\"Edi\u00e7\u00e3o do tamanho da fonte em Gutenberg\" width=\"1500\" height=\"672\"><figcaption class=\"wp-caption-text\">Edi\u00e7\u00e3o do tamanho da fonte em Gutenberg<\/figcaption><\/figure>\n<p>Cuidado com isso: se todos os par\u00e1grafos da sua p\u00e1gina forem de tamanhos diferentes, ela parecer\u00e1 desarticulada e dif\u00edcil de ler.<\/p>\n<h4>Alterando o tamanho da fonte no editor cl\u00e1ssico<\/h4>\n<p>O editor cl\u00e1ssico n\u00e3o lhe d\u00e1 a op\u00e7\u00e3o de selecionar texto espec\u00edfico e alterar o seu tamanho: por isso se precisar desta funcionalidade, ter\u00e1 de atualizar para o Gutenberg. Desculpa!<\/p>\n<h4>Alterar o tamanho da fonte no customizador<\/h4>\n<p>Dependendo do seu tema, voc\u00ea pode ter uma op\u00e7\u00e3o para alterar o tamanho da fonte no Personalizador, alterando o tamanho da fonte para todo o site ou direcionando cabe\u00e7alhos e corpo do texto.<\/p>\n<p>Se o seu tema n\u00e3o incluir uma op\u00e7\u00e3o Personalizador para alterar os tamanhos das fontes, mas voc\u00ea pode usar a op\u00e7\u00e3o<strong> CSS adicional<\/strong>. V\u00e1 at\u00e9<strong> Personalizar &gt; CSS adicional e <\/strong>digite o CSS na caixa.<\/p>\n<p>Abaixo eu estou fazendo os cabe\u00e7alhos nas \u00e1reas de widgets maiores, com este CSS:<\/p>\n<pre><code class=\"language-css\">h2.widget-title {\n\u00a0font-size: 3em;\n}<\/code><\/pre>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/10\/tamanho-fonte-estilo-com-adicional-CSS.jpg\" alt=\"Tamanho da fonte de estilo com CSS adicional\" width=\"1500\" height=\"816\"><figcaption class=\"wp-caption-text\">Tamanho da fonte de estilo com CSS adicional<\/figcaption><\/figure>\n<p>Talvez seja um pouco grande demais, mas d\u00e1 uma ideia geral.<\/p>\n<h4>Alterar o tamanho da fonte no seu folheto de estilo<\/h4>\n<p>Alterar o tamanho das fontes na folha de estilo funciona de forma semelhante \u00e0 altera\u00e7\u00e3o de qualquer outro estilo para as suas fontes.<\/p>\n<p>Se voc\u00ea quiser alterar o tamanho de todo o texto em seu site, voc\u00ea usaria o <code>body<\/code> element:<\/p>\n<pre><code class=\"language-css\">body {\n font-size: 14px;\n}<\/code><\/pre>\n<p>Para o <code>body<\/code> element voc\u00ea usa pixels, mas para outros elementos que voc\u00ea usa <code>em<\/code> so o tamanho \u00e9 relativo ao tamanho do <code>body<\/code> element.<\/p>\n<pre><code class=\"language-css\">h1,\n#site-title {\n font-size: 2em;\n}<\/code><\/pre>\n<p>Lembre-se se voc\u00ea vai fazer altera\u00e7\u00f5es nas fontes em sua folha de estilo tem\u00e1tica, teste-a em um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">site de desenvolvimento ou de teste<\/a> primeiro para que voc\u00ea n\u00e3o corra o risco de arruinar seu site ao vivo.<\/p>\n<h2 id=\"optimize\">Como otimizar fontes no WordPress<\/h2>\n<p>Se voc\u00ea estiver usando fontes da Web ou fontes hospedadas localmente, faz sentido fazer tudo o que puder para otimizar suas fontes.<\/p>\n<p>Aqui vou te dar algumas dicas sobre como otimizar suas fontes, tanto para velocidade quanto para design.<\/p>\n<h3>Otimiza\u00e7\u00e3o de fontes para desempenho<\/h3>\n<p>Se voc\u00ea estiver usando fontes da web em seu site, voc\u00ea vai querer fazer tudo o que puder para garantir que elas sejam entregues nas suas p\u00e1ginas o mais r\u00e1pido poss\u00edvel e que o fato de estarem hospedadas em outro lugar n\u00e3o atrase as coisas.<\/p>\n<ul>\n<li>Use cache para garantir que as p\u00e1ginas n\u00e3o precisem ser reconstru\u00eddas toda vez que forem carregadas. Os planos de hospedagem Kinsta v\u00eam com <a href=\"https:\/\/kinsta.com\/pt\/blog\/cache-wordpress\/\">cache embutido<\/a>.<\/li>\n<li>Use um provedor de fontes da Web que forne\u00e7a fontes usando uma <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn\">Rede de Entrega de Conte\u00fado<\/a> ou CDN. O Google Fonts faz isso e acelera a entrega das fontes.<\/li>\n<li>Use apenas as fontes que voc\u00ea precisa. N\u00e3o enfileire varia\u00e7\u00f5es de fontes (pesos, estilos) que voc\u00ea n\u00e3o estar\u00e1 usando em sua folha de estilo. Se voc\u00ea achar que precisa deles em uma data posterior, voc\u00ea pode sempre adicion\u00e1-los.<\/li>\n<li>Se utilizar fontes web, certifique-se de que as enfileira corretamente. N\u00e3o use uma linha @import em sua folha de estilo, mesmo que isso seja o que seu provedor de fontes web lhe diz para fazer.<\/li>\n<li>Ao adicionar CSS manualmente, adicione-o \u00e0 folha de estilo do seu tema e n\u00e3o \u00e0 se\u00e7\u00e3o &lt; head&gt; do seu arquivo header.php. Esta \u00e9 uma das raz\u00f5es pelas quais \u00e9 melhor codificar o CSS manualmente no seu tema em vez de usar o Customizer ou um bloco, j\u00e1 que ambos ir\u00e3o adicionar CSS inline \u00e0 p\u00e1gina em vez de o adicionar \u00e0 folha de estilo.<\/li>\n<li>Considere usar o revestimento em CSS para reduzir alguns milissegundos extras nos tempos de carregamento de p\u00e1gina. Este \u00e9 um processo que usa a codifica\u00e7\u00e3o base64 para adicionar CSS da sua folha de estilo para a p\u00e1gina antes de carreg\u00e1-la, salvando o navegador tendo que carregar arquivos extras. Pode parecer contraintuitivo dado o conselho acima sobre n\u00e3o escrever CSS inline, mas ele ainda funciona a partir de um arquivo CSS separado e n\u00e3o significa codificar manualmente CSS inline. Se voc\u00ea estiver carregando v\u00e1rias fontes, <a href=\"https:\/\/www.bramstein.com\/writing\/web-font-anti-patterns-inlining.html\">o inlining pode acelerar um pouco o seu site<\/a>.<\/li>\n<li>Use <a href=\"https:\/\/kinsta.com\/pt\/blog\/combinar-css-externo\/#combine-external-css-in-wordpress\">a minifica\u00e7\u00e3o<\/a> para reduzir o tamanho da folha de estilo. Isto pode ser feito facilmente se voc\u00ea for um <a href=\"https:\/\/kinsta.com\/pt\/precos\/?plan=visits-business1\">cliente Kinsta<\/a>, aproveitando o <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn#code-minification-1\">recurso de minifica\u00e7\u00e3o de c\u00f3digo<\/a> localizado bem no <a href=\"https:\/\/kinsta.com\/pt\/mykinsta\/\">painel MyKinsta<\/a>. Isto permite aos clientes habilitar a minifica\u00e7\u00e3o autom\u00e1tica de CSS e JavaScript com um simples clique, acelerando seus sites com zero esfor\u00e7o de trabalho manual.<\/li>\n<li>Se voc\u00ea estiver hospedando fontes localmente, carregue apenas os arquivos para as fontes e os pesos e estilos de fontes que voc\u00ea precisa. Adicione apenas as varia\u00e7\u00f5es de que necessita utilizando a declara\u00e7\u00e3o @font-face.<\/li>\n<li>Considere usar uma CDN para hospedar suas pr\u00f3prias fontes em vez de hosped\u00e1-las em seu pr\u00f3prio servidor.<\/li>\n<li>Ao hospedar suas pr\u00f3prias fontes, inclua formatos adicionais: woff2, woff, ttf e eot. Os navegadores podem ent\u00e3o selecionar a vers\u00e3o que vai carregar mais rapidamente.<\/li>\n<li>Se voc\u00ea estiver usando uma fonte diferente para o t\u00edtulo do seu site, enfileire apenas os caracteres que voc\u00ea precisa em vez da biblioteca de fontes inteira.<\/li>\n<\/ul>\n<p>Ent\u00e3o, se o t\u00edtulo do seu site \u00e9 Kinsta, voc\u00ea poderia fazer uma pequena melhoria de performance seguindo a folha de estilo como esta:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_title_font() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway&text=\"kinsta');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );<\/code><\/pre>\n<h3>Otimizando Fontes para Design<\/h3>\n<p>Al\u00e9m de otimizar o desempenho de suas fontes, tamb\u00e9m faz sentido garantir que elas sejam visualmente otimizadas: que se ajustem bem ao design do seu site e aos seus materiais offline.<\/p>\n<p>Este \u00e9 particularmente o caso se voc\u00ea usar um plugin ou um tema filho para adicionar fontes extras al\u00e9m daquelas j\u00e1 empacotadas com seu tema. H\u00e1 um risco de seu tema parecer confuso se houver muitas fontes em muitas cores e estilos.<\/p>\n<p>Antes de adicionar fontes extras ao seu site, considere o seguinte:<\/p>\n<ul>\n<li>As novas fontes s\u00e3o consistentes com as fontes existentes? Eles transmitem um estilo ou humor semelhante?<\/li>\n<li>Se voc\u00ea precisa combinar uma fonte que foi usada para materiais de impress\u00e3o, mas n\u00e3o pode usar a mesma fonte que uma fonte da web, tente encontrar uma correspond\u00eancia o mais pr\u00f3xima poss\u00edvel no Google Fonts.<\/li>\n<li>As fontes que escolheu s\u00e3o consistentes com a sua marca? Se voc\u00ea est\u00e1 executando um neg\u00f3cio s\u00e9rio, voc\u00ea n\u00e3o quer usar Comic Sans (na verdade, qualquer tipo de site que voc\u00ea est\u00e1 executando, voc\u00ea n\u00e3o quer usar Comic Sans).<\/li>\n<li>Se voc\u00ea est\u00e1 mudando as cores de suas fontes, tente usar cores que j\u00e1 est\u00e3o no design do seu tema ou que se coordenam com elas. Adicionar demasiadas cores far\u00e1 com que o seu site pare\u00e7a garrido e pouco profissional.<\/li>\n<li>Se voc\u00ea estiver tentando escolher um par de fontes no Google Fonts, tente usar um servi\u00e7o como o <a href=\"https:\/\/fontpair.co\/\">fontpair<\/a> para encontrar duas que funcionem bem juntas.<\/li>\n<\/ul>\n<p>As fontes que voc\u00ea usa em seu design ter\u00e3o um impacto sobre a impress\u00e3o que os visitantes recebem quando chegam ao seu site. Certifique-se de que voc\u00ea considerou isso e escolheu fontes que ir\u00e3o refor\u00e7ar a sua marca.<\/p>\n<h3><strong>Trabalhando com fontes vari\u00e1veis<\/strong><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\/\">Fontes vari\u00e1veis<\/a> s\u00e3o um novo tipo de fontes que tornam mais eficiente adicionar mais fontes ao seu site.<\/p>\n<p>Eles permitem que mais informa\u00e7\u00f5es sejam armazenadas em um arquivo de fonte, de modo que se voc\u00ea quiser varia\u00e7\u00f5es em sua fonte (negrito, it\u00e1lico, etc.), voc\u00ea n\u00e3o tem que carregar v\u00e1rios arquivos de fonte, mas pode apenas carregar um.<\/p>\n<p>Para uma fonte com m\u00faltiplos pesos, estilos e inclina\u00e7\u00f5es de fontes, isso pode economizar muito espa\u00e7o de arquivo e tornar o processo de enfileirar a fonte ou adicion\u00e1-la via @fontface mais f\u00e1cil tamb\u00e9m.<\/p>\n<p>Fontes vari\u00e1veis s\u00e3o suportadas nas vers\u00f5es mais recentes do Chrome, Edge, Firefox e Safari, mas n\u00e3o por navegadores mais antigos. E ainda n\u00e3o h\u00e1 muitas fontes vari\u00e1veis dispon\u00edveis. O Google Fonts n\u00e3o inclui nenhuma, mas o Google suporta as especifica\u00e7\u00f5es, por isso \u00e9 prov\u00e1vel que sejam adicionadas ao longo do tempo.<\/p>\n<p>Os desenvolvedores de fontes est\u00e3o trabalhando para <a href=\"https:\/\/www.monotype.com\/resources\/articles\/variable-fonts-making-the-promise-a-reality\/\">criar mais fontes vari\u00e1veis e melhorar sua confiabilidade<\/a>, ent\u00e3o vale a pena observar o progresso para que voc\u00ea possa usar fontes vari\u00e1veis para otimizar suas fontes quando elas se tornarem mais est\u00e1veis.<\/p>\n\n<h2><strong>Resumo<\/strong><\/h2>\n<p>Alterar fontes no seu site do WordPress n\u00e3o \u00e9 uma tarefa f\u00e1cil. Voc\u00ea tem diferentes possibilidades para escolher:<\/p>\n<ol>\n<li>Usando fontes web instalando um plugin.<\/li>\n<li>Usando fontes web, codificando-as em seu tema e enfileirando-as.<\/li>\n<li>A hospedar as suas fontes.<\/li>\n<\/ol>\n<p>Ent\u00e3o, voc\u00ea deve se concentrar em como otimizar suas fontes para um melhor desempenho. Se voc\u00ea seguir as dicas neste guia, voc\u00ea deve ser capaz n\u00e3o s\u00f3 de mudar as fontes no WordPress, mas tamb\u00e9m ter mais controle sobre elas no seu tema.<\/p>\n<p>Deseja diminuir o layout da sua p\u00e1gina ou blog para que seus leitores se concentrem em seu conte\u00fado? Ent\u00e3o, confira isto: <a href=\"https:\/\/kinsta.com\/pt\/blog\/remover-barra-lateral-wordpress\/\">Como remover a barra lateral no WordPress (4 m\u00e9todos)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As fontes podem fazer a diferen\u00e7a entre um site sem gra\u00e7a e um site bonito. Ao aprender a mudar a fonte no WordPress, voc\u00ea pode fazer &#8230;<\/p>\n","protected":false},"author":105,"featured_media":30616,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[215,120],"topic":[1039,1028],"class_list":["post-30596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-website","topic-design-sites-wordpress","topic-fontes-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)<\/title>\n<meta name=\"description\" content=\"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)\" \/>\n<meta property=\"og:description\" content=\"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-11T15:49:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:40:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)\",\"datePublished\":\"2019-11-11T15:49:08+00:00\",\"dateModified\":\"2025-09-01T15:40:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\"},\"wordCount\":6498,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg\",\"keywords\":[\"fonts\",\"website\"],\"articleSection\":[\"Melhores Tutoriais WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\",\"name\":\"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg\",\"datePublished\":\"2019-11-11T15:49:08+00:00\",\"dateModified\":\"2025-09-01T15:40:57+00:00\",\"description\":\"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Como Alterar Fontes no WordPress (e Alterar Tamanho, Cor, Otimizar)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fontes WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/fontes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"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.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)","description":"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)","og_description":"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.","og_url":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2019-11-11T15:49:08+00:00","article_modified_time":"2025-09-01T15:40:57+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Rachel McCollin","Tempo estimado de leitura":"31 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)","datePublished":"2019-11-11T15:49:08+00:00","dateModified":"2025-09-01T15:40:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/"},"wordCount":6498,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg","keywords":["fonts","website"],"articleSection":["Melhores Tutoriais WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/","name":"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg","datePublished":"2019-11-11T15:49:08+00:00","dateModified":"2025-09-01T15:40:57+00:00","description":"Aprenda tudo o que voc\u00ea precisa sobre como alterar fontes no WordPress, como alterar o tamanho da fonte, as cores da fonte e como otimiz\u00e1-las para p\u00e1ginas mais r\u00e1pidas.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/11\/como-alterar-fontes-no-wordpress.jpg","width":1460,"height":730,"caption":"Como Alterar Fontes no WordPress (e Alterar Tamanho, Cor, Otimizar)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Fontes WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/fontes-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Alterar Fontes no WordPress (Tamanho, Cor e Otimizar)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"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.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/30596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=30596"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/30596\/revisions"}],"predecessor-version":[{"id":72719,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/30596\/revisions\/72719"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/fr"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/translations\/se"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/30596\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/30616"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=30596"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=30596"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=30596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}