{"id":34742,"date":"2020-02-04T07:18:09","date_gmt":"2020-02-04T15:18:09","guid":{"rendered":"https:\/\/kinqsta.com\/?p=9545"},"modified":"2023-08-22T05:53:08","modified_gmt":"2023-08-22T08:53:08","slug":"fontes-locais","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/","title":{"rendered":"Guia Detalhado de Hospedagem de Fontes Locais em WordPress"},"content":{"rendered":"<p>Quando se trata de hospedagem e uso de fontes no seu site WordPress, h\u00e1 muitas op\u00e7\u00f5es diferentes. Voc\u00ea pode hosped\u00e1-las localmente, voc\u00ea pode usar as fontes do Google (a maioria dos temas atualmente tem as fontes do Google integradas), ou utilizar outro servi\u00e7o de terceiros como o Adobe Fonts. Hoje queremos mergulhar em algumas das raz\u00f5es pelas quais hospedar fontes locais no WordPress pode ser vantajoso. Voc\u00ea n\u00e3o s\u00f3 pode ter uma sele\u00e7\u00e3o maior de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/html-fontes\/\">HTML fontes<\/a>, mas \u00e0s vezes h\u00e1 <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\">benef\u00edcios de desempenho<\/a> para isso tamb\u00e9m. Confira nosso tutorial detalhado abaixo sobre como hospedar suas fontes premium localmente, bem como qualquer fam\u00edlia de fontes do Google.<\/p>\n<ul>\n<li><a href=\"#web-fonts\"> O que s\u00e3o fontes da Web? <\/a><\/li>\n<li><a href=\"#local-fonts-vs-3rd-party\"> Acolhendo Fontes Locais vs 3\u00aa Parte <\/a><\/li>\n<li><a href=\"#host-local-fonts-wordpress\"> Como Hospedar Fontes Locais no WordPress <\/a><\/li>\n<\/ul>\n<h2 id=\"web-fonts\">O que s\u00e3o Fontes da Web?<\/h2>\n<p>Quando voc\u00ea navega para o site WordPress de algu\u00e9m, voc\u00ea v\u00ea dois tipos de fontes b\u00e1sicas, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-seguras-na-web\/\">fontes seguras da web<\/a> ou fontes da web. Ou tamb\u00e9m podem estar a usar uma mistura de ambos.<\/p>\n<p>Leitura sugerida: <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\">Como mudar a fonte no WordPress<\/a>.<\/p>\n<ul>\n<li><strong>Fontes seguras para a Web <\/strong>s\u00e3o fontes pr\u00e9-instaladas em um dispositivo ou sistema operacional. Alguns exemplos de fontes seguras na web incluem Arial, Times New Roman e Courier New, bem como fam\u00edlias de fontes gen\u00e9ricas como serif, sans-serif (ver <a href=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-modernas\/\">fontes modernas<\/a>) e monospace. Estas s\u00e3o fontes que voc\u00ea tem visto por muitos anos. Veja uma <a href=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-seguras-na-web\/\">lista completa de fontes seguras na web<\/a>.<\/li>\n<li><strong>As fontes Web <\/strong>s\u00e3o fontes que n\u00e3o est\u00e3o pr\u00e9-instaladas num dispositivo e devem ser descarregadas pelo browser do utilizador antes de serem apresentadas. Alguns exemplos de fontes web incluem a fonte Open Sans e Roboto do Google, bem como a popular fonte Proxima Nova da Adobe Fonts.<\/li>\n<\/ul>\n<p>Google Fonts \u00e9 um diret\u00f3rio de fontes de c\u00f3digo aberto que se tornou amplamente utilizado nos \u00faltimos dois anos. De acordo com o BuiltWith, mais de 45% dos 10.000 maiores sites est\u00e3o <a href=\"https:\/\/trends.builtwith.com\/widgets\/Google-Font-API\">a utilizar as fontes do Google<\/a> nos seus sites. E se olharmos para a <a href=\"https:\/\/fonts.google.com\/analytics\">an\u00e1lise do Google Fonts<\/a>, podemos ver que eles j\u00e1 tiveram mais de 17 quadrili\u00f5es de visualiza\u00e7\u00f5es. Isso \u00e9 muito! Open Sans e Roboto s\u00e3o as suas duas fam\u00edlias de fontes mais utilizadas, com Roboto a registar um crescimento de 77% no \u00faltimo ano. N\u00f3s temos um post sobre as melhores fontes do Google, n\u00e3o deixe de dar uma olhada: <a href=\"https:\/\/kinqsta.com\/pt\/blog\/melhores-fontes-google\/\">15 Melhores Fontes Google pelos N\u00fameros<\/a>.<\/p>\n<figure style=\"width: 2597px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/estatisticas-fontes-google-1.png\" alt=\"Estat\u00edsticas de fontes do Google\" width=\"2597\" height=\"1802\"><figcaption class=\"wp-caption-text\">Estat\u00edsticas de fontes do Google<\/figcaption><\/figure>\n<h2 id=\"local-fonts-vs-3rd-party\">Acolhendo Fontes Locais vs 3\u00aa Parte<\/h2>\n<p>Antes de mergulharmos no tutorial, \u00e9 importante entender algumas das vantagens e desvantagens entre hospedar fontes locais e simplesmente usar um servi\u00e7o de terceiros. Hospedar fontes localmente significa que voc\u00ea realmente tem os arquivos de fontes no seu pr\u00f3prio servidor (e ou copiados para o seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/cdn-para-wordpress\/\">CDN<\/a> que voc\u00ea tamb\u00e9m usa para todos os seus outros ativos). Enquanto que se voc\u00ea usar uma terceira parte, como Google Fonts ou Adobe Fonts, voc\u00ea est\u00e1 simplesmente incluindo as fontes atrav\u00e9s de um link para um ativo externo.<\/p>\n<h3>Vantagens das Fontes Locais<\/h3>\n<h4>1. Sele\u00e7\u00e3o mais Ampla de Fontes<\/h4>\n<p>Uma grande vantagem de usar fontes locais \u00e9 que voc\u00ea tem uma <strong>sele\u00e7\u00e3o muito mais ampla de fontes! <\/strong>Embora servi\u00e7os de terceiros como o Google Fonts e Adobe Fonts tenham grandes bibliotecas, eles n\u00e3o se comparam a lojas de fontes premium nas quais voc\u00ea pode comprar qualquer fonte premium da web que quiser e hosped\u00e1-la no seu site. Na verdade, estaremos usando uma fonte premium em nosso tutorial abaixo da qual voc\u00ea n\u00e3o pode obter de nenhum servi\u00e7o de terceiros.<\/p>\n<h4>2. Poderia Integrar Melhor<\/h4>\n<p>Devido \u00e0 maior sele\u00e7\u00e3o de fontes, hosped\u00e1-las localmente pode permitir que voc\u00ea escolha uma fonte que<strong> se integre melhor com sua marca para manter a consist\u00eancia<\/strong> em todo o site. Tudo isto depende das suas necessidades e prefer\u00eancias em termos de design.<\/p>\n<h4>3. N\u00e3o \u00e9 Necess\u00e1rio Contar com os Servi\u00e7os de Terceiros<\/h4>\n<p>Quando voc\u00ea hospeda fontes localmente, <strong>voc\u00ea n\u00e3o precisa confiar em servi\u00e7os de terceiros <\/strong>ou em seus servidores<strong>. <\/strong>Servi\u00e7os como o Adobe Fonts (anteriormente Typekit) s\u00e3o conhecidos por serem descidos, o que, por sua vez, faz voc\u00ea parecer mal. Ter menos depend\u00eancias no seu site WordPress \u00e9 sempre melhor.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">When <a href=\"https:\/\/t.co\/Kde0okKlP0\">https:\/\/t.co\/Kde0okKlP0<\/a> is down the web stops working <a href=\"https:\/\/twitter.com\/hashtag\/customfontssuck?src=hash&amp;ref_src=twsrc%5Etfw\">#customfontssuck<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/3rdpartyjs?src=hash&amp;ref_src=twsrc%5Etfw\">#3rdpartyjs<\/a><\/p>\n<p>&mdash; Mark \u26d4\ufe0f\ud83d\udc1d (@markhealey) <a href=\"https:\/\/twitter.com\/markhealey\/status\/666484210090176513?ref_src=twsrc%5Etfw\">November 17, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<h4>4. Controle Total Sobre o Caching<\/h4>\n<p>Ao utilizar fontes locais voc\u00ea tem<strong> controle total sobre o cache<\/strong> dos seus arquivos de fontes. Se voc\u00ea estiver usando as fontes do Google ou outro servi\u00e7o de terceiros, voc\u00ea pode ver erros ou avisos de que os recursos est\u00e3o faltando um validador de cache ou que eles exigem <a href=\"https:\/\/kinqsta.com\/pt\/blog\/adicionar-cabecalhos-expirados-wordpress\/\">cabe\u00e7alhos expirados<\/a>. Estes s\u00e3o fixados no n\u00edvel do servidor, e quando est\u00e3o em um servidor de terceiros voc\u00ea n\u00e3o tem controle sobre a sua fixa\u00e7\u00e3o.<\/p>\n<figure style=\"width: 1384px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/especifique-validador-cache.jpg\" alt=\"Especifique um validador de cache\" width=\"1384\" height=\"273\"><figcaption class=\"wp-caption-text\">Especifique um validador de cache<\/figcaption><\/figure>\n<h4>5. Menos Pedidos Podem Igualar Tempos de Carga Mais R\u00e1pidos<\/h4>\n<p>Devido ao fato de as fontes web terem de ser descarregadas de terceiros, isto pode, por sua vez, ter um impacto na velocidade de carga do seu site. Nunca se sabe a rapidez com que os seus servidores est\u00e3o a funcionar no momento dado. No entanto, voc\u00ea tem mais controle sobre isso com seu host WordPress, ou deveria! Adobe Fonts, por exemplo, adiciona 2 <a href=\"https:\/\/kinqsta.com\/pt\/blog\/fazer-menos-solicitacoes-http\/\">solicita\u00e7\u00f5es HTTP<\/a> externas e tamb\u00e9m codifica todos os formatos de fonte na base64. Se voc\u00ea n\u00e3o est\u00e1 familiarizado com fontes que voc\u00ea n\u00e3o precisa mais servir todos os formatos de fonte, voc\u00ea s\u00f3 precisa de WOFF e WOFF2 (se voc\u00ea est\u00e1 indo para compress\u00e3o extra).<\/p>\n<p>Com o Google Fonts voc\u00ea tamb\u00e9m tem um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/reduzir-dns-pesquisas\/\">pedido DNS extra para procurar<\/a> fonts.googleapis.com para pegar o arquivo CSS. Voc\u00ea ent\u00e3o tem pedidos adicionais ao fonts.gstatic.com para baixar os arquivos de fontes. <strong>Quando voc\u00ea hospeda localmente todas as solicita\u00e7\u00f5es s\u00e3o do mesmo dom\u00ednio<\/strong>, e muito provavelmente<strong> voc\u00ea n\u00e3o precisar\u00e1 de outro arquivo CSS<\/strong>, pois ele estar\u00e1 dentro do arquivo CSS do seu tema do WordPress.<\/p>\n<figure style=\"width: 1680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/pedidos-http-fonte-google.jpg\" alt=\"Pedidos HTTP da fonte Google\" width=\"1680\" height=\"308\"><figcaption class=\"wp-caption-text\">Pedidos HTTP da fonte Google<\/figcaption><\/figure>\n<h4>6. Conex\u00e3o \u00danica HTTP\/2<\/h4>\n<p>Se voc\u00ea ainda n\u00e3o leu sobre as <a href=\"https:\/\/kinqsta.com\/pt\/aprenda\/http2\/\">vantagens do HTTP\/2<\/a>, n\u00f3s lhe pedimos que o fa\u00e7a. Ao hospedar suas fontes localmente, ou em seu CDN, voc\u00ea pode aproveitar uma <strong>\u00fanica conex\u00e3o HTTP\/2 <\/strong>para um melhor paralelismo e multiplexa\u00e7\u00e3o.<\/p>\n<h3>Desvantagens das Fontes Locais<\/h3>\n<p>Agora que superamos a vantagem das fontes locais, h\u00e1 tamb\u00e9m algumas desvantagens a serem observadas.<\/p>\n<h4>1. A Fonte do Google j\u00e1 pode ser Armazenada em Cache<\/h4>\n<p>O Google Fonts usa o seu pr\u00f3prio CDN, que \u00e9 r\u00e1pido, afinal de contas \u00e9 o Google. Devido ao facto de tantos sites j\u00e1 utilizarem o Google Fonts, pode muito bem ser que o utilizador<strong> j\u00e1 tenha a fonte no cache do seu navegador<\/strong>. Se voc\u00ea usar uma fonte mais exclusiva e premium, <strong>ela pode aumentar o tempo de download<\/strong>. Por exemplo, se algu\u00e9m visitar um site que utiliza a fonte Roboto do Google Fonts, ela ser\u00e1 transferida para o seu cache. Se depois visitarem o seu website, que tamb\u00e9m usa Roboto, a fonte n\u00e3o precisar\u00e1 de ser descarregada novamente. Mas se voc\u00ea estiver usando uma fonte premium rec\u00e9m-lan\u00e7ada como Proxima Soft, muito provavelmente ter\u00e1 que fazer o download, o que pode possivelmente aumentar o tempo de carga.<\/p>\n<p>A chave aqui \u00e9 que se voc\u00ea vai usar uma fonte premium que n\u00e3o \u00e9 muito usada, voc\u00ea provavelmente deve contar com o navegador dessa pessoa precisando baix\u00e1-la quando ela acessar seu site pela primeira vez. Nota: Se voc\u00ea usar uma fonte popular do Google e hosped\u00e1-la localmente, como o Roboto, isso n\u00e3o se aplica, pois o navegador \u00e9 inteligente o suficiente para detect\u00e1-la no cache (seja ele carregando do Google ou localmente do seu site).<\/p>\n<h4>2. Mais Complexo<\/h4>\n<p>N\u00f3s percebemos que nem todos l\u00e1 fora s\u00e3o gurus WordPress. Hospedar fontes locais <strong>definitivamente requer um pouco mais de configura\u00e7\u00e3o<\/strong>. Por exemplo, um tema do WordPress pode chamar o Google Fonts automaticamente em seu tema e se voc\u00ea hospedar fontes localmente voc\u00ea precisar\u00e1 descobrir uma maneira de desativ\u00e1-las de serem chamadas em seu site. Isto pode implicar chegar ao seu desenvolvedor do tema para uma linha r\u00e1pida de c\u00f3digo. Isto pode parecer complicado, mas tentaremos explic\u00e1-lo da forma mais f\u00e1cil poss\u00edvel no tutorial abaixo.<\/p>\n<h4>3. Mais Cuidados com a Escolha da Fonte<\/h4>\n<p>Quando voc\u00ea hospeda fontes locais, voc\u00ea tem que escolher quais tipos de fontes voc\u00ea quer suportar. Se voc\u00ea escolher apenas os formatos mais novos, como apenas WOFF2, voc\u00ea pode estar deixando de fora os navegadores mais antigos, que por sua vez, por padr\u00e3o, seriam <a href=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-seguras-na-web\/\">fontes antigas seguras para a web<\/a>. Por exemplo, <a href=\"http:\/\/caniuse.com\/#feat=woff2\">de acordo com o CanIUse<\/a>, IE11, Safari e algumas vers\u00f5es do Android Browser podem ter problemas apenas com o uso de fontes web WOFF2. Portanto, voc\u00ea provavelmente vai querer usar WOFF + WOFF 2 para estar seguro em toda a linha. WOFF 2 oferece <a href=\"https:\/\/gist.github.com\/sergejmueller\/cf6b4f2133bcb3e2f64a\">m\u00e9todos de compress\u00e3o muito mais elevados<\/a>, \u00e9 por isso que voc\u00ea gostaria de usar ambos.<\/p>\n<figure style=\"width: 1508px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/woff2-suporte-navegador.jpg\" alt=\"WOFF2 suporte ao navegador\" width=\"1508\" height=\"781\"><figcaption class=\"wp-caption-text\">WOFF2 suporte ao navegador<\/figcaption><\/figure>\n<p>Ao usar um servi\u00e7o de terceiros, \u00e9 quase imposs\u00edvel estragar tudo, pois eles s\u00e3o respons\u00e1veis por uma ampla gama de suporte de browser fora da caixa. Portanto, ao hospedar localmente, <strong>voc\u00ea tem que ter mais cuidado com a sele\u00e7\u00e3o do tipo de fonte<\/strong>.<\/p>\n<h4>4. N\u00e3o o Fa\u00e7a sem o CDN<\/h4>\n<p>Muitos sites hoje est\u00e3o usando um CDN como o Cloudflare ou KeyCDN para acelerar a entrega de seus ativos. Isto \u00e9 importante, pois <a href=\"https:\/\/kinqsta.com\/pt\/blog\/reduzir-dns-pesquisas\/\">reduz a lat\u00eancia e os tempos de pesquisa DNS<\/a> em toda a linha. Se voc\u00ea usa fontes locais, e n\u00e3o usa um CDN, voc\u00ea pode, na verdade, diminuir a velocidade do seu site em vez de usar um servi\u00e7o como o Google Fonts ou o Adobe Fonts. A raz\u00e3o \u00e9 que todos esses servi\u00e7os utilizam um CDN para entregar as suas fontes. Por isso, recomendamos vivamente, a menos que s\u00f3 tenha tr\u00e1fego para uma pequena \u00e1rea geogr\u00e1fica, <strong>utilize sempre um CDN se estiver a alojar as suas pr\u00f3prias fontes<\/strong>. E, claro, certifique-se de estar usando um <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP\/2#Software_and_services_supporting_HTTP.2F2\">provedor CDN que suporte HTTP\/2<\/a>.<\/p>\n<p><a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn\">Kinsta CDN<\/a> suporta HTTP\/2 e a largura de banda gratuita est\u00e1 inclu\u00edda para todos os clientes. \ud83d\ude80<\/p>\n<h2 id=\"host-local-fonts-wordpress\">Como Hospedar Fontes Locais no WordPress<\/h2>\n<p>Agora \u00e9 a hora da parte divertida! Hospedando suas fontes locais no WordPress. N\u00f3s passamos por duas op\u00e7\u00f5es diferentes abaixo, uma \u00e9 com uma fonte premium que compramos, e a segunda \u00e9 realmente pegar uma fonte do Google e hosped\u00e1-la localmente. Neste tutorial, estamos usando uma nova instala\u00e7\u00e3o do WordPress com o tema Twenty Seventeen instalado.<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"#host-fonts-locally\"> Como Acolher Fontes Premium Localmente <\/a><\/li>\n<li><a href=\"#host-google-fonts-locally\"> Como hospedar Fontes do Google Localmente <\/a><\/li>\n<\/ul>\n<h3><a id=\"host-fonts-locally\"><\/a> 1. Como Acolher Fontes Premium Localmente<\/h3>\n<p>Para hospedar uma fonte premium localmente, escolhemos ir com Fontspring e a nova <a href=\"https:\/\/www.fontspring.com\/fonts\/mark-simonson-studio\/proxima-soft-standard\">fonte Proxima Soft,<\/a> lan\u00e7ada em janeiro de 2017. Proxima Nova Soft, criado por Mark Simonson, \u00e9 uma vers\u00e3o mais recente da fonte original Proxima Nova. Escolhemos a Fontspring porque n\u00e3o requerem scripts de rastreamento de terceiros, e a fonte \u00e9 uma compra \u00fanica que pode ser usada em um n\u00famero ilimitado de sites. Tenha muito cuidado ao comprar fontes, pois muitas delas requerem scripts de rastreamento de terceiros, o que em algum grau derrota o prop\u00f3sito de hosped\u00e1-las localmente.<\/p>\n<figure style=\"width: 1291px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/fontspring-logo.jpg\" alt=\"fontspring\" width=\"1291\" height=\"153\"><figcaption class=\"wp-caption-text\">Fontspring<\/figcaption><\/figure>\n<p>Compramos as fontes Proxima Soft Regular e Proxima Soft Bold. Geralmente um tipo de letra normal e negrito \u00e9 suficiente para a maioria dos sites. Dependendo do seu site, voc\u00ea tamb\u00e9m pode querer obter uma vers\u00e3o em it\u00e1lico e semibold. Nota: N\u00f3s n\u00e3o temos nenhum afiliado com Fontspring, n\u00f3s simplesmente pensamos que eles fazem direito de compra e licenciamento de fontes premium!<\/p>\n<h4>Passo 1<\/h4>\n<p>Depois de comprar suas fontes, voc\u00ea receber\u00e1 um e-mail com um link para os arquivos de fontes.<\/p>\n<figure style=\"width: 1602px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/download-fonte-proxima-soft.png\" alt=\"Download da fonte Proxima Soft\" width=\"1602\" height=\"261\"><figcaption class=\"wp-caption-text\">Download da fonte Proxima Soft<\/figcaption><\/figure>\n<h4>Passo 2<\/h4>\n<p>Cada vers\u00e3o de fonte, como bold e regular, ter\u00e1 seus pr\u00f3prios tipos de fonte, como WOFF2, WOFF, TTF, etc. Neste exemplo, vamos utilizar apenas as vers\u00f5es WOFF e WOFF2 do bold e bold regular, o que garante um suporte moderno e bem arredondado ao navegador.<\/p>\n<figure style=\"width: 1313px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/arquivos-fontes-locais.png\" alt=\"Arquivos de fontes locais\" width=\"1313\" height=\"423\"><figcaption class=\"wp-caption-text\">Arquivos de fontes locais<\/figcaption><\/figure>\n<h4>Passo 3<\/h4>\n<p>N\u00f3s pegamos os arquivos de fontes e os carregamos via FTP em nosso site WordPress para uma pasta que criamos chamada &#8220;fontes&#8221;. Neste exemplo, estamos a utilizar um CDN para todos os nossos ativos, juntamente com o <a href=\"https:\/\/wordpress.org\/plugins\/cdn-enabler\/\">plugin CDN Enabler<\/a> gratuito da equipa da KeyCDN. Este plugin copia automaticamente as fontes que acab\u00e1mos de carregar para o nosso CDN. Mesmo que digamos que os hospede localmente, um CDN ainda est\u00e1 referenciando seus bens locais. A parte importante \u00e9 que voc\u00ea est\u00e1 servindo todos os seus bens a partir do mesmo local, n\u00e3o referenciando m\u00faltiplos dom\u00ednios (hosts).<\/p>\n<figure style=\"width: 1181px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/carregar-fontes-webserver.jpg\" alt=\"Carregar fontes no webserver\" width=\"1181\" height=\"587\"><figcaption class=\"wp-caption-text\">Carregar fontes no webserver<\/figcaption><\/figure>\n<h4>Passo 4<\/h4>\n<p>Voc\u00ea ter\u00e1 a necessidade de referenciar suas novas fontes em CSS no seu site WordPress. Muitos temas t\u00eam um painel CSS personalizado hoje em dia, ou voc\u00ea pode usar um plugin gratuito como o <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS e JS<\/a>. Vamos inserir o seguinte c\u00f3digo, referenciando a nossa URL CDN.<\/p>\n<pre><code class=\"language-html\">@font-face {\n font-family: 'proxima_softregular';\n src: url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-regular-webfont.woff2') format('woff2'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-regular-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'proxima_softbold';\n src: url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-bold-webfont.woff2') format('woff2'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-bold-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m precisar\u00e1 atualizar seus estilos para apontar para a nova fam\u00edlia de fontes. Aqui est\u00e1 um exemplo do c\u00f3digo que usamos no tema dos Vinte e Dezassete.<\/p>\n<pre><code class=\"language-html\">body {font-family: 'proxima_softregular', Arial, sans-serif;}\nh1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}<\/code><\/pre>\n<p>Aqui est\u00e1 uma captura de tela do plugin Simple Custom CSS e JS.<\/p>\n<figure style=\"width: 1570px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/codigo-css-fontes-personalizadas.jpg\" alt=\"C\u00f3digo CSS de fontes personalizadas\" width=\"1570\" height=\"1242\"><figcaption class=\"wp-caption-text\">C\u00f3digo CSS de fontes personalizadas<\/figcaption><\/figure>\n<h4>Passo 5<\/h4>\n<p>Se o seu tema WordPress j\u00e1 tem o Google Fonts integrado nele, voc\u00ea vai querer garantir que voc\u00ea as desabilite. Caso contr\u00e1rio, poder\u00e1 estar a carregar tanto as suas fontes locais como as fontes do Google. Como estamos usando o tema Twenteen neste tutorial, utilizamos o plugin gratuito <a href=\"https:\/\/wordpress.org\/plugins\/disable-google-fonts\/\">Disable Google Fonts<\/a>. Isto s\u00f3 funciona para os temas padr\u00e3o no WordPress. Para a maioria dos temas, voc\u00ea provavelmente precisar\u00e1 chegar at\u00e9 o desenvolvedor e eles podem fornecer rapidamente uma fun\u00e7\u00e3o para desativar as fontes do Google. Ou verifique a documenta\u00e7\u00e3o deles, normalmente este \u00e9 um ajuste muito r\u00e1pido. Alguns temas podem at\u00e9 ter a op\u00e7\u00e3o de lig\u00e1-los ou deslig\u00e1-los no back-end.<\/p>\n<p>E \u00e9 isso! Aqui est\u00e1 um screenshot com o nosso novo carregamento de fonte Proxima Soft para a nossa fonte corporal e cabe\u00e7alhos sobre o tema Vinte e Dezassete.<\/p>\n<figure style=\"width: 1496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/novas-fontes-site-wordpress.jpg\" alt=\"novas fontes no site wordpress\" width=\"1496\" height=\"1061\"><figcaption class=\"wp-caption-text\">novas fontes no site wordpress<\/figcaption><\/figure>\n<p>E aqui est\u00e1 uma captura de tela dos nossos pedidos HTTP. Como pode ver, temos apenas 2 pedidos para as fontes WOFF2, em vez dos 4 pedidos do Google que mostr\u00e1mos anteriormente. Tamb\u00e9m temos as fontes WOFF no site, mas como o Chrome suporta WOFF2, estas s\u00e3o puxadas em seu lugar. Se tiv\u00e9ssemos ido ao site com o IE 11, por exemplo, as fontes WOFF teriam sido carregadas em seu lugar.<\/p>\n<figure style=\"width: 1687px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/pedidos-http-fontes-hospedadas-localmente.jpg\" alt=\"Pedidos HTTP para fontes hospedadas localmente\" width=\"1687\" height=\"1072\"><figcaption class=\"wp-caption-text\">Pedidos HTTP para fontes hospedadas localmente<\/figcaption><\/figure>\n<h3><a id=\"host-google-fonts-locally\"><\/a> 2. Como Hospedar Fontes do Google Localmente<\/h3>\n<p>A segunda maneira de hospedar fontes localmente \u00e9 realmente usar uma fonte que voc\u00ea j\u00e1 gosta no Google Fonts e simplesmente mov\u00ea-la para o seu servidor ou CDN. O Open Sans \u00e9 conhecido por ser muito leve e super r\u00e1pido. Por isso, vamos usar isso no nosso exemplo.<\/p>\n<h4>Passo 1<\/h4>\n<p>A melhor maneira de pegar o Google Fonts \u00e9 usar a ferramenta gratuita <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/\">google-webfonts-helper<\/a>, que estamos usando para este tutorial. Voc\u00ea tamb\u00e9m pode querer dar uma olhada no projeto <a href=\"https:\/\/fontfaceobserver.com\/\">Font Face Observer<\/a>. A primeira coisa que voc\u00ea precisa fazer \u00e9 pesquisar a fonte Google Font que voc\u00ea quer e selecionar os estilos. Escolhemos novamente os estilos de fonte regulares e ousados (700).<\/p>\n<figure id=\"attachment_34758\" aria-describedby=\"caption-attachment-34758\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-34758\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/download-fonte-open-sans-web.jpg\" alt=\"Download da fonte Open Sans web\" width=\"768\" height=\"710\" srcset=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/download-fonte-open-sans-web.jpg 768w, https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/download-fonte-open-sans-web-300x277.jpg 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption id=\"caption-attachment-34758\" class=\"wp-caption-text\">Download da fonte Open Sans web<\/figcaption><\/figure>\n<h4>Passo 2<\/h4>\n<p>Ent\u00e3o voc\u00ea precisar\u00e1 escolher que suporte de navegador voc\u00ea quer. Os browsers modernos dar\u00e3o as fontes WOFF e WOFF2, que \u00e9 o que n\u00f3s queremos. O melhor suporte d\u00e1 WOFF, WOFF2, EOT, TTF, e SVG. Como pode ver, d\u00e1-lhe o c\u00f3digo que pode copiar para a sua \u00e1rea de transfer\u00eancia, bem como o zip de download que cont\u00e9m as fontes.<\/p>\n<figure style=\"width: 1365px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/css-fontes-navegadores-modernos.jpg\" alt=\"CSS para fontes em navegadores modernos\" width=\"1365\" height=\"1179\"><figcaption class=\"wp-caption-text\">CSS para fontes em navegadores modernos<\/figcaption><\/figure>\n<p>O resto das instru\u00e7\u00f5es s\u00e3o ent\u00e3o muito semelhantes \u00e0s nossas fontes premium exemplo acima.<\/p>\n<h4>Passo 3<\/h4>\n<p>N\u00f3s pegamos os arquivos de fontes e os carregamos via FTP em nosso site WordPress para uma pasta que criamos chamada &#8220;fontes&#8221;. Neste exemplo, estamos a utilizar um CDN para todos os nossos ativos, juntamente com o <a href=\"https:\/\/wordpress.org\/plugins\/cdn-enabler\/\">plugin CDN Enabler<\/a> gratuito da equipa da KeyCDN. Este plugin copia automaticamente as fontes que acab\u00e1mos de carregar para o nosso CDN. Mesmo que digamos que os hospede localmente, um CDN ainda est\u00e1 referenciando seus bens locais. A parte importante \u00e9 que voc\u00ea est\u00e1 servindo todos os seus bens a partir do mesmo local, n\u00e3o referenciando m\u00faltiplos dom\u00ednios (hosts).<\/p>\n<figure style=\"width: 1136px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/upload-google-fonts-servidor-web.jpg\" alt=\"Upload Google Fonts para o servidor web\" width=\"1136\" height=\"693\"><figcaption class=\"wp-caption-text\">Upload Google Fonts para o servidor web<\/figcaption><\/figure>\n<h3><\/h3>\n<h4>Passo 4<\/h4>\n<p>Voc\u00ea ter\u00e1 a necessidade de referenciar suas novas fontes em CSS no seu site WordPress. Muitos temas t\u00eam um painel CSS personalizado hoje em dia, ou voc\u00ea pode usar um plugin gratuito como o <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS e JS<\/a>. Vamos inserir o seguinte c\u00f3digo, referenciando a nossa URL CDN.<\/p>\n<pre><code class=\"language-html\">\/* open-sans-regular - latin *\/\n@font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 400;\n src: local('Open Sans'), local('OpenSans'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-regular.woff2') format('woff2'), \/* Chrome 26+, Opera 23+, Firefox 39+ *\/\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-regular.woff') format('woff'); \/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *\/\n}\n\/* open-sans-700 - latin *\/\n@font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 700;\n src: local('Open Sans Bold'), local('OpenSans-Bold'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-700.woff2') format('woff2'), \/* Chrome 26+, Opera 23+, Firefox 39+ *\/\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-700.woff') format('woff'); \/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *\/\n}<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m precisar\u00e1 atualizar seus estilos para apontar para a nova fam\u00edlia de fontes. Aqui est\u00e1 um exemplo do c\u00f3digo que usamos no tema dos Vinte e Dezassete.<\/p>\n<pre><code class=\"language-html\">body {font-family: 'Open Sans', Arial, sans-serif;}\nh1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}<\/code><\/pre>\n<p>Aqui est\u00e1 uma captura de tela do plugin Simple Custom CSS e JS.<\/p>\n<figure style=\"width: 2066px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/css-fonte-open-sans-hospedada-localmente.jpg\" alt=\"CSS para fonte Open Sans hospedada localmente\" width=\"2066\" height=\"1245\"><figcaption class=\"wp-caption-text\">CSS para fonte Open Sans hospedada localmente<\/figcaption><\/figure>\n<h4>Passo 5<\/h4>\n<p>Se o seu tema WordPress j\u00e1 tem o Google Fonts integrado nele, voc\u00ea vai querer garantir que voc\u00ea as desabilite. Isto pode parecer um pouco ir\u00f3nico, uma vez que estamos a usar fontes do Google. Mas a raz\u00e3o pela qual voc\u00ea precisa fazer isso \u00e9 para desativar os pedidos externos. Como estamos usando o tema Twenteen neste tutorial, utilizamos o plugin gratuito <a href=\"https:\/\/wordpress.org\/plugins\/disable-google-fonts\/\">Disable Google Fonts<\/a>. Isto s\u00f3 funciona para os temas padr\u00e3o no WordPress. Para a maioria dos temas, voc\u00ea provavelmente precisar\u00e1 chegar at\u00e9 o desenvolvedor e eles podem fornecer rapidamente uma fun\u00e7\u00e3o para desativar as fontes do Google. Ou verifique a documenta\u00e7\u00e3o deles, normalmente este \u00e9 um ajuste muito r\u00e1pido. Alguns temas podem at\u00e9 ter a op\u00e7\u00e3o de lig\u00e1-los ou deslig\u00e1-los no back-end.<\/p>\n<p>E \u00e9 isso! Aqui est\u00e1 uma imagem da nossa nova fonte Google Open Sans para o carregamento da nossa fonte corporal e cabe\u00e7alhos sobre o tema Vinte e Dezassete.<\/p>\n<figure style=\"width: 1495px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/exemplo-fonte-open-sans-hospedada-localmente.jpg\" alt=\"Exemplo de fonte Open Sans hospedada localmente\" width=\"1495\" height=\"1234\"><figcaption class=\"wp-caption-text\">Exemplo de fonte Open Sans hospedada localmente<\/figcaption><\/figure>\n<p>E aqui est\u00e1 uma captura de ecr\u00e3 dos nossos pedidos. Como pode ver, temos apenas 2 pedidos para as fontes WOFF2, em vez dos 4 pedidos do Google que mostr\u00e1mos anteriormente. Tamb\u00e9m temos as fontes WOFF no site, mas como o Chrome suporta WOFF2, estas s\u00e3o puxadas em seu lugar. Se tiv\u00e9ssemos ido ao site com o IE 11, por exemplo, as fontes WOFF teriam sido carregadas em seu lugar.<\/p>\n<figure style=\"width: 1683px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/02\/abrir-pedidos-sans-http.jpg\" alt=\"Abrir pedidos Sans HTTP\" width=\"1683\" height=\"1066\"><figcaption class=\"wp-caption-text\">Abrir pedidos Sans HTTP<\/figcaption><\/figure>\n<h2>Resumo<\/h2>\n<p>E \u00e9 isso! Agora voc\u00ea sabe como hospedar fontes locais de uma loja de fontes premium ou mover fontes do Google para o seu pr\u00f3prio servidor e ou CDN. Ent\u00e3o agora voc\u00ea pode ir dar uma olhada em todas as lindas fontes l\u00e1 fora, sem se preocupar tanto sobre como elas afetam o desempenho. Eles podem simplesmente dar ao seu site WordPress o facelift que ele precisa (n\u00e3o deixe de ler o nosso guia detalhado sobre <a href=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-wordpress\/\">fontes WordPress<\/a>)! E se voc\u00ea est\u00e1 curioso porque n\u00e3o estamos usando fontes locais, isso \u00e9 porque estamos trabalhando em um novo design de website, ent\u00e3o podemos estar num futuro pr\u00f3ximo. Outra grande alternativa a ser estudada s\u00e3o as <a href=\"https:\/\/woorkup.com\/system-font\/\">fontes do sistema<\/a>.<\/p>\n<p>Adorar\u00edamos saber qual \u00e9 o seu esquema. Voc\u00ea est\u00e1 usando um servi\u00e7o de terceiros para carregar suas fontes da web e j\u00e1 tentou hospedar locais?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando se trata de hospedagem e uso de fontes no seu site WordPress, h\u00e1 muitas op\u00e7\u00f5es diferentes. Voc\u00ea pode hosped\u00e1-las localmente, voc\u00ea pode usar as fontes &#8230;<\/p>\n","protected":false},"author":38,"featured_media":34765,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[27,30],"topic":[1039,1028],"class_list":["post-34742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","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>Guia Detalhado de Hospedagem de Fontes Locais em WordPress<\/title>\n<meta name=\"description\" content=\"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guia Detalhado de Hospedagem de Fontes Locais em WordPress\" \/>\n<meta property=\"og:description\" content=\"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-04T15:18:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T08:53:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Guia Detalhado de Hospedagem de Fontes Locais em WordPress\",\"datePublished\":\"2020-02-04T15:18:09+00:00\",\"dateModified\":\"2023-08-22T08:53:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\"},\"wordCount\":3414,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Tutoriais de Desempenho do WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\",\"name\":\"Guia Detalhado de Hospedagem de Fontes Locais em WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png\",\"datePublished\":\"2020-02-04T15:18:09+00:00\",\"dateModified\":\"2023-08-22T08:53:08+00:00\",\"description\":\"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png\",\"width\":1460,\"height\":730,\"caption\":\"Guia em Profundidade sobre Hospedagem de Fontes Locais em WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fontes WordPress\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/fontes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guia Detalhado de Hospedagem de Fontes Locais em WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guia Detalhado de Hospedagem de Fontes Locais em WordPress","description":"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.","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:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/","og_locale":"pt_PT","og_type":"article","og_title":"Guia Detalhado de Hospedagem de Fontes Locais em WordPress","og_description":"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2020-02-04T15:18:09+00:00","article_modified_time":"2023-08-22T08:53:08+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png","type":"image\/png"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png","twitter_creator":"@brianleejackson","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Brian Jackson","Tempo estimado de leitura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Guia Detalhado de Hospedagem de Fontes Locais em WordPress","datePublished":"2020-02-04T15:18:09+00:00","dateModified":"2023-08-22T08:53:08+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/"},"wordCount":3414,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png","keywords":["webperf","WordPress"],"articleSection":["Tutoriais de Desempenho do WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/","url":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/","name":"Guia Detalhado de Hospedagem de Fontes Locais em WordPress","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png","datePublished":"2020-02-04T15:18:09+00:00","dateModified":"2023-08-22T08:53:08+00:00","description":"Confira este guia detalhado sobre como hospedar fontes locais no WordPress. Exemplos incluem o uso de uma fonte premium, bem como a mudan\u00e7a de uma fonte do Google para o seu pr\u00f3prio servidor.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/fontes-locais-wordpress.png","width":1460,"height":730,"caption":"Guia em Profundidade sobre Hospedagem de Fontes Locais em WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/fontes-locais\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Fontes WordPress","item":"https:\/\/kinqsta.com\/pt\/topicos\/fontes-wordpress\/"},{"@type":"ListItem","position":3,"name":"Guia Detalhado de Hospedagem de Fontes Locais em WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinqsta.com\/pt\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/34742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=34742"}],"version-history":[{"count":7,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/34742\/revisions"}],"predecessor-version":[{"id":47529,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/34742\/revisions\/47529"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/translations\/jp"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34742\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/34765"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=34742"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=34742"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=34742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}