{"id":48912,"date":"2025-12-02T14:06:21","date_gmt":"2025-12-02T17:06:21","guid":{"rendered":"\/pt\/tutoriais\/como-adicionar-fontes-personalizadas-wordpress"},"modified":"2026-03-10T12:59:25","modified_gmt":"2026-03-10T15:59:25","slug":"como-adicionar-fontes-personalizadas-wordpress","status":"publish","type":"post","link":"\/pt\/tutoriais\/como-adicionar-fontes-personalizadas-wordpress","title":{"rendered":"Como adicionar fontes personalizadas no WordPress: guia completo"},"content":{"rendered":"<p>Existem v&aacute;rias formas de deixar seu&nbsp;<strong>site WordPress<\/strong>&nbsp;mais atraente, e uma delas &eacute; usando fontes personalizadas.<\/p><p>Explico: apesar de o WordPress oferecer algumas op&ccedil;&otilde;es de fontes por conta pr&oacute;pria, elas podem ser limitadas e variar de acordo com o tema que voc&ecirc; usa.&nbsp;<\/p><p>&Eacute; exatamente para isso que estamos aqui. Neste artigo, voc&ecirc; vai aprender passo a passo como adicionar fontes personalizadas no WordPress para dar um toque &uacute;nico ao seu site. Boa leitura!<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-onde-baixar-fontes-para-wordpress\"><strong>Onde baixar fontes para WordPress?<\/strong><\/h2><p>Existem muitos sites onde voc&ecirc; pode encontrar fontes gratuitas para a web, e o&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.fontsquirrel.com\/\">Font Squirrel<\/a>&nbsp;&eacute; um dos mais populares. L&aacute;, voc&ecirc; encontra fontes livres para uso comercial com facilidade. Outra op&ccedil;&atilde;o muito conhecida &eacute; o&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>, que oferece mais de 900 fam&iacute;lias de fontes. A Adobe tamb&eacute;m disponibiliza uma grande cole&ccedil;&atilde;o atrav&eacute;s do&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/edgewebfonts.adobe.com\/\">Edge Web Fonts<\/a>.<\/p><p>Se voc&ecirc; busca fontes premium, o&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/elements.envato.com\/fonts\">Envato Elements<\/a>&nbsp;&eacute; uma &oacute;tima escolha, com mais de 28 mil op&ccedil;&otilde;es para voc&ecirc; explorar.<\/p><p>Para quem quer fontes mais voltadas para uso pessoal, vale a pena conferir sites como&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/fonts.com\/\">Fonts.com<\/a>,&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/www.dafont.com\/\">DaFont<\/a>&nbsp;e&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/www.1001freefonts.com\/\">1001 Free Fonts<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-convertendo-fontes-para-um-formato-compativel-com-a-web\"><strong>Convertendo fontes para um formato compat&iacute;vel com a web<\/strong><\/h2><p>Vale lembrar que nem todos os navegadores suportam todos os tipos de fontes personalizadas. Por&eacute;m, mesmo que a fonte que voc&ecirc; escolheu n&atilde;o seja suportada, &eacute; poss&iacute;vel convert&ecirc;-la para um formato compat&iacute;vel.<\/p><p>Antes de fazer essa convers&atilde;o, vamos conhecer os principais formatos de fonte:<\/p><ul class=\"wp-block-list\">\n<li><strong>OpenType (OTF) &ndash;&nbsp;<\/strong>s&atilde;o as fontes web mais usadas e uma marca registrada da Microsoft. Funcionam bem na maioria dos navegadores.<\/li>\n\n\n\n<li><strong>TrueType (TTF) &ndash;&nbsp;<\/strong>criadas pela Microsoft e Apple na d&eacute;cada de 1980, s&atilde;o amplamente usadas tanto no Windows quanto no macOS.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF) &ndash;&nbsp;<\/strong>formato bastante utilizado em sites e recomendado pelo&nbsp;<a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>World Wide Web Consortium<\/strong><\/a>&nbsp;(W3C).<\/li>\n\n\n\n<li><strong>WOFF 2.0 &ndash;&nbsp;<\/strong>uma vers&atilde;o melhorada do WOFF 1.0, com compress&atilde;o mais eficiente. N&atilde;o &eacute; suportado pelo Safari e Internet Explorer, mas funciona bem no Chrome, Firefox e Opera.<\/li>\n\n\n\n<li><strong>Embedded OpenType (EOF) &ndash;&nbsp;<\/strong>uma vers&atilde;o mais compacta do OTF usada para fontes incorporadas em p&aacute;ginas web, suportada pela maioria dos navegadores.<\/li>\n<\/ul><p>Se voc&ecirc; n&atilde;o tem certeza se sua fonte base tem suporte nos navegadores mais populares, pode usar o&nbsp;<strong>Web Font Generator<\/strong>. Essa ferramenta facilita a convers&atilde;o de quase qualquer fonte para um formato amig&aacute;vel &agrave; web. O processo &eacute; simples e n&atilde;o precisa sequer de login:<\/p><ol class=\"wp-block-list\">\n<li>Acesse o&nbsp;<a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Webfont Generator<\/strong><\/a>.<\/li>\n\n\n\n<li>Clique no bot&atilde;o&nbsp;<strong>Upload Fonts<\/strong>&nbsp;e escolha a fonte que deseja converter.<\/li>\n\n\n\n<li>Marque a caixa na se&ccedil;&atilde;o&nbsp;<strong>Agreement<\/strong>&nbsp;para confirmar que a fonte pode ser legalmente usada na web.<\/li>\n\n\n\n<li>Clique no bot&atilde;o&nbsp;<strong>Download Your Kit&nbsp;<\/strong>e salve o arquivo&nbsp;<strong>.zip&nbsp;<\/strong>em seu computador.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69f2f67fa9798\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/05\/convert-font-to-web-friendly-format-to-add-custom-fonts-1024x450.png\" alt=\"convertendo fonte para formato web no webfont generator\" class=\"wp-image-50054\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Dentro do arquivo compactado, voc&ecirc; vai encontrar as fontes nos formatos&nbsp;<strong>WOFF<\/strong>&nbsp;e&nbsp;<strong>WOFF 2.0<\/strong>, al&eacute;m dos arquivos&nbsp;<strong>CSS<\/strong>&nbsp;e uma p&aacute;gina demo em&nbsp;<strong>HTML<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-como-adicionar-fontes-personalizadas-no-wordpress\"><strong>Como adicionar fontes personalizadas no WordPress<\/strong><\/h2><p>Voc&ecirc; pode adicionar fontes personalizadas no WordPress de duas formas: manualmente ou usando plugins. Vamos explicar o passo a passo para ambos os m&eacute;todos.<\/p><h3 class=\"wp-block-heading\"><strong>Como adicionar fontes ao WordPress manualmente<\/strong><\/h3><p>Se voc&ecirc; prefere n&atilde;o sobrecarregar seu WordPress com plugins, pode adicionar as fontes manualmente. Para isso, basta enviar o arquivo da fonte para a sua conta de hospedagem (ou para o servi&ccedil;o que voc&ecirc; usa) e editar o arquivo CSS do seu tema. Veja como:&nbsp;<\/p><ol class=\"wp-block-list\">\n<li>No seu computador, salve ou localize o arquivo da fonte que voc&ecirc; deseja usar e extraia o arquivo&nbsp;<strong>.zip<\/strong>, se necess&aacute;rio.<\/li>\n\n\n\n<li>Fa&ccedil;a o upload do arquivo da fonte no diret&oacute;rio&nbsp;<strong>wp-content\/themes\/seu-tema\/fonts<\/strong>. Se essa pasta&nbsp;<strong>fonts<\/strong>&nbsp;n&atilde;o existir, crie uma. Voc&ecirc; pode usar um&nbsp;<a href=\"\/pt\/tutoriais\/como-configurar-o-cliente-filezilla\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>cliente FTP, como o FileZilla<\/strong><\/a>, ou o&nbsp;<a href=\"\/pt\/tutoriais\/como-utilizar-o-gerenciador-de-arquivos-hostinger\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Gerenciador de arquivos&nbsp;<\/strong><\/a>da Hostinger para essa tarefa. Em nosso exemplo, fizemos o upload da fonte&nbsp;<strong>AguafinaScript-Regular.ttf&nbsp;<\/strong>usando o Gerenciador de Arquivos do hPanel.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69f2f67fab605\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/05\/filemanager-publichtm-wpcontent-yourtheme-fonts.png\" alt=\"adicionando fonte a site WordPress pelo gerenciador de arquivos da hostinger\" class=\"wp-image-50053\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Em seguida, entre no painel administrativo do WordPress, v&aacute; em&nbsp;<strong>Apar&ecirc;ncia<\/strong>&nbsp;&rarr;&nbsp;<strong>Editor de arquivos do tema<\/strong>&nbsp;e abra o arquivo&nbsp;<strong>style.css<\/strong>. Role a tela para baixo e adicione o seguinte c&oacute;digo:&nbsp;<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@font-face {  font-family: Aguafina Script-Regular;  src: url(http:\/\/test-site.com\/wp-content\/themes\/twentynineteen\/fonts\/AguafinaScript-Regular.ttf);  font-weight: normal;  }<\/pre><p><div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>N&atilde;o esque&ccedil;a de substituir&nbsp;<strong>font-family<\/strong>&nbsp;e <strong>test-site.com<\/strong> pelo nome da sua fonte e o URL correto da sua instala&ccedil;&atilde;o.<\/p>\n                <\/div>\n\n\n<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f2f67faca56\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/05\/update-changes-in-style-css-editor.png\" alt=\"alterando op&ccedil;&otilde;es de estilo no editor css do wordpress\" class=\"wp-image-50052\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Pressione o bot&atilde;o&nbsp;<strong>Atualizar arquivo&nbsp;<\/strong>para salvar suas altera&ccedil;&otilde;es.<\/li>\n<\/ol><p>A regra&nbsp;<strong>@font-face<\/strong>&nbsp;faz o navegador carregar a fonte quando algu&eacute;m visita seu site, mas ainda n&atilde;o define onde ela ser&aacute; usada.<\/p><p>Para aplicar a fonte a um elemento espec&iacute;fico &mdash; por exemplo, o t&iacute;tulo do site &mdash; adicione o c&oacute;digo abaixo no mesmo arquivo&nbsp;<strong>style.css<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.site-title { \nfont-family: \"Aguafina Script-Regular\", Arial, sans-serif; \n}<\/pre><p>Aqui est&aacute; uma visualiza&ccedil;&atilde;o do resultado final:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69f2f67fad275\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/05\/adding-title-fonts-result.png\" alt=\"resultado ap&oacute;s adicionar fonte personalizada a um site wordpress\" class=\"wp-image-50051\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\"><strong>Como adicionar fontes personalizadas no WordPress usando um plugin<\/strong><\/h3><p><a href=\"\/pt\/tutoriais\/como-instalar-plugins-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Instalar um plugin&nbsp;<\/strong><\/a>para adicionar fontes personalizadas ao WordPress &eacute; provavelmente a maneira mais simples de realizar a tarefa. Aqui est&atilde;o algumas das op&ccedil;&otilde;es mais populares:<\/p><h4 class=\"wp-block-heading\"><a href=\"https:\/\/br.wordpress.org\/plugins\/wp-google-fonts\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WP Google Fonts<\/strong><\/a><\/h4><p>O WP Google Fonts permite usar fontes personalizadas e aplic&aacute;-las a elementos CSS espec&iacute;ficos. Basta instalar o plugin pela&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">biblioteca do WordPress<\/a>&nbsp;e acessar o&nbsp;<strong>painel de controle do Google Fonts<\/strong>&nbsp;no seu dashboard. L&aacute; voc&ecirc; escolhe as fontes e ajusta configura&ccedil;&otilde;es como estilo e onde aplicar.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69f2f67fad9ae\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/05\/wp-google-font-control-panel-screenshot-1024x638.png\" alt=\"painel de controle do plugin WP google fonts\" class=\"wp-image-50050\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h4 class=\"wp-block-heading\"><a href=\"https:\/\/br.wordpress.org\/plugins\/easy-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Easy Google Fonts<\/strong><\/a><\/h4><p>Com o Easy Google Fonts, voc&ecirc; pode usar qualquer tema e visualizar as fontes em tempo real, sem precisar saber programar.&nbsp;<\/p><p>Ap&oacute;s instalar e ativar o plugin, acesse&nbsp;<strong>Configura&ccedil;&otilde;es<\/strong>&nbsp;&rarr;&nbsp;<strong>Google Fonts<\/strong>&nbsp;para gerenciar as fontes. Quer editar a tipografia direto no tema? Entre no&nbsp;<strong>Personalizador<\/strong>&nbsp;em&nbsp;<strong>Apar&ecirc;ncia<\/strong>&nbsp;&rarr;&nbsp;<strong>Personalizar<\/strong>, e v&aacute; at&eacute; a se&ccedil;&atilde;o&nbsp;<strong>Tipografia<\/strong>&nbsp;para fazer ajustes em qualquer parte do site.<\/p><h4 class=\"wp-block-heading\"><a href=\"https:\/\/br.wordpress.org\/plugins\/use-any-font\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Use Any Font<\/strong><\/a><\/h4><p>O Use Any Font &eacute; outro plugin &oacute;timo para adicionar v&aacute;rias fontes ao seu site. Depois de instalado, voc&ecirc; cria uma chave API gratuita e verifica o plugin no bot&atilde;o&nbsp;<strong>Verify<\/strong>.&nbsp;<\/p><p>Com isso, &eacute; poss&iacute;vel fazer upload de fontes nos formatos&nbsp;<strong>TTF<\/strong>,&nbsp;<strong>OTF<\/strong>&nbsp;e&nbsp;<strong>WOFF<\/strong>. Tamb&eacute;m d&aacute; para aplicar as fontes a elementos personalizados do site.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69f2f67fae17a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/05\/screenshot-of-use-any-font-plugin-dashboard.png\" alt=\"painel do plugin use any font para wordpress\" class=\"wp-image-50049\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/br.wordpress.org\/plugins\/custom-fonts\/\"><strong>Custom Fonts<\/strong><\/a><\/p><p>O&nbsp;<strong>Custom Fonts<\/strong>&nbsp;permite que voc&ecirc; hospede suas fontes personalizadas localmente no seu servidor, o que melhora a velocidade do site ao reduzir as requisi&ccedil;&otilde;es externas. Al&eacute;m disso, oferece a flexibilidade de fazer upload de fontes como .ttf ou .otf e escolher entre uma vasta cole&ccedil;&atilde;o de fontes do Google, mantendo total controle sobre seu uso.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Agora voc&ecirc; sabe como baixar e converter fontes para um formato amig&aacute;vel para a web &mdash; e tamb&eacute;m aprendeu duas maneiras simples de adicionar fontes personalizadas no WordPress. Independentemente da fonte escolhida, certifique-se de que ela combine com o estilo e o tema do seu site.<\/p><p>Se tiver d&uacute;vidas sobre como adicionar fontes no WordPress, deixe seu coment&aacute;rio abaixo. Para quest&otilde;es gerais sobre o CMS, confira nosso&nbsp;<a href=\"\/pt\/tutoriais\/tutorial-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>guia geral do WordPress<\/strong><\/a>.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Mais tutoriais avan&ccedil;ados sobre WordPress<\/h4>\n                    <p><a href=\"\/pt\/tutoriais\/como-aumentar-tamanho-fonte-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Como mudar o tamanho da fonte<br><\/strong><\/a><a href=\"\/pt\/tutoriais\/criar-slider-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Usando sliders no WordPress<br><\/strong><\/a><a href=\"\/pt\/tutoriais\/tamanho-imagens-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Tamanhos de imagem no WordPress<br><\/strong><\/a><a href=\"\/pt\/tutoriais\/construtor-de-paginas-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Melhores criadores de p&aacute;ginas do WordPress<br><\/strong><\/a><a href=\"\/pt\/tutoriais\/campos-personalizados-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Campos personalizados do WordPress<\/strong><\/a><\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-adicionar-fontes-personalizadas-no-wordpress-perguntas-frequentes\"><strong>Como adicionar fontes personalizadas no WordPress: perguntas frequentes<\/strong><\/h2><p>Agora que voc&ecirc; sabe como adicionar fontes personalizadas no WordPress, aqui est&atilde;o algumas perguntas frequentes sobre o assunto.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694417565629c\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Como adicionar uma fonte personalizada no WordPress sem usar plugins?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Para adicionar fontes manualmente, voc&ecirc; precisa usar um cliente FTP como o FileZilla ou o Gerenciador de Arquivos do seu provedor. Fa&ccedil;a o upload da fonte no seu servidor e edite o arquivo CSS do seu tema para aplic&aacute;-la.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69441756562a0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Posso usar qualquer fonte no WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim, &eacute; poss&iacute;vel usar qualquer fonte no WordPress. Mas &eacute; importante lembrar que algumas fontes podem n&atilde;o combinar bem com o seu site, seja por serem muito grandes, muito pequenas, impr&oacute;prias para texto ou incompat&iacute;veis com o tema. Escolha sempre uma fonte que se encaixe bem no visual do seu site.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69441756562a1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&Eacute; ilegal usar a mesma fonte que outra empresa?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>A legalidade do uso de uma fonte depende do contexto e da licen&ccedil;a da fonte. Fontes s&atilde;o consideradas propriedade intelectual e, em muitos pa&iacute;ses, est&atilde;o protegidas por leis de direitos autorais. Por isso, &eacute; recomend&aacute;vel consultar um advogado para entender as regras espec&iacute;ficas do seu pa&iacute;s.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Existem v&aacute;rias formas de deixar seu&nbsp;site WordPress&nbsp;mais atraente, e uma delas &eacute; usando fontes personalizadas. Explico: apesar de o WordPress oferecer algumas op&ccedil;&otilde;es de fontes por conta pr&oacute;pria, elas podem ser limitadas e variar de acordo com o tema que voc&ecirc; usa.&nbsp; &Eacute; exatamente para isso que estamos aqui. Neste artigo, voc&ecirc; vai aprender passo [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/como-adicionar-fontes-personalizadas-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Tutorial: como adicionar fontes personalizadas no WordPress","rank_math_description":"Aprenda a adicionar fontes personalizadas no WordPress de forma simples e pr\u00e1tica. Melhore o visual do seu site agora mesmo!","rank_math_focus_keyword":"como adicionar fontes personalizadas no wordpress","footnotes":""},"categories":[4911],"tags":[4798],"class_list":["post-48912","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-fontes-personalizadas-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/ajouter-police-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/fuentes-personalizadas-en-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/fuentes-personalizadas-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/joomla-vs-wordpress-cms-utilizar-21","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/fuentes-personalizadas-en-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-fontes-personalizadas-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-custom-fonts-to-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=48912"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48912\/revisions"}],"predecessor-version":[{"id":49492,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48912\/revisions\/49492"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=48912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=48912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=48912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}