{"id":72377,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=72377"},"modified":"2025-05-26T12:21:48","modified_gmt":"2025-05-26T19:21:48","slug":"core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/","title":{"rendered":"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web"},"content":{"rendered":"\n<p>As fontes da web adicionam personalidade ao seu site, mas tamb\u00e9m adicionam peso.<\/p>\n\n\n<p>E se suas fontes demorarem muito para carregar, os usu\u00e1rios ficar\u00e3o olhando para uma tela em branco. Ainda pior, seu site pode parecer inst\u00e1vel \u00e0 medida que o texto se desloca de forma inesperada.<\/p>\n\n\n<p>Isso tamb\u00e9m prejudica os <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">Core Web Vitals<\/a> \u2014 as m\u00e9tricas que afetam diretamente seu ranking de busca e experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n<p>Aqui, cada milissegundo importa.<\/p>\n\n\n<p>Ent\u00e3o, como voc\u00ea pode manter sua escolha de fontes da web sem sacrificar o desempenho?<\/p>\n\n\n<p>Vamos dividir isso, um passo de cada vez.<\/p>\n\n\n<p>Mas antes, o que exatamente s\u00e3o fontes seguras para a web e fontes para a web?<\/p>\n\n\n<h2 id=\"h-what-are-web-safe-fonts\" class=\"wp-block-heading\">O Que S\u00e3o Fontes Seguras Para Web?<\/h2>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" rel=\"noopener\">Fontes seguras para a web<\/a> s\u00e3o as op\u00e7\u00f5es testadas e comprovadas que funcionam em todos os lugares. S\u00e3o fontes que a maioria dos dispositivos j\u00e1 possui, o que significa que voc\u00ea pode contar com elas para carregar rapidamente.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"877\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp\" alt=\"Diagrama explicando o que s\u00e3o fontes seguras para sites; mostrando um servidor conectando a um navegador e vice-versa, e navegador para o computador do usu\u00e1rio e fontes de volta para o navegador\" class=\"wp-image-58001 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-300x164.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1024x561.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-768x421.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1536x842.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-600x329.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1200x658.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-730x400.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1460x800.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-784x430.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1568x859.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-877x481.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/877;\" \/><\/figure>\n\n\n<p>Aqui est\u00e3o as fontes seguras para web que voc\u00ea pode usar:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Arial<\/li>\n\n\n\n<li>Times New Roman<\/li>\n\n\n\n<li>Verdana<\/li>\n\n\n\n<li>Trebuchet MS<\/li>\n\n\n\n<li>Courier<\/li>\n\n\n\n<li>Impact<\/li>\n\n\n\n<li>Georgia<\/li>\n\n\n\n<li>Comic Sans MS<\/li>\n\n\n<\/ul>\n\n\n<p>Mesmo com escolhas limitadas, um designer habilidoso pode usar essas fontes de maneira criativa.<\/p>\n\n\n<p>Mas, as fontes seguras para a web s\u00e3o frequentemente usadas em excesso e d\u00e3o ao seu site uma sensa\u00e7\u00e3o de &#8220;<em>similaridade<\/em>&#8221; \u2014 mesmo quando voc\u00ea investiu muito esfor\u00e7o e dinheiro no design do site.<\/p>\n\n\n<p>Ent\u00e3o, como voc\u00ea faz isso ficar mais bonito?<\/p>\n\n\n<p>Com fontes da web.<\/p>\n\n\n<h2 id=\"h2_what-are-web-fonts\" class=\"wp-block-heading\">O Que S\u00e3o Fontes Web?<\/h2>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"885\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp\" alt=\"exemplo de diferentes fontes do Google mostrando o exemplo usando a frase &quot;Todos t\u00eam o direito \u00e0 liberdade de pensamento&quot; em tr\u00eas diferentes tipos de fonte\" class=\"wp-image-58002 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-300x166.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1024x566.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-768x425.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1536x850.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-600x332.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1200x664.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-730x404.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1460x808.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-784x434.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1568x867.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-877x485.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/885;\" \/><\/figure>\n\n\n<p>As fontes da web permitem que voc\u00ea se afaste das fontes seguras para a web frequentemente usadas em excesso.<\/p>\n\n\n<p>Em vez de depender de fontes dispon\u00edveis no dispositivo de um usu\u00e1rio, as fontes web podem ser baixadas de uma fonte externa como <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/\" rel=\"noopener\">Google Fonts<\/a> ou diretamente do seu servidor para o dispositivo do seu usu\u00e1rio <em>(temporariamente).<\/em><\/p>\n\n\n<p>Isso permite que voc\u00ea use qualquer fonte personalizada que corresponda \u00e0 sua marca ou necessidades de design.<\/p>\n\n\n<p>N\u00f3s tamb\u00e9m selecionamos as <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/best-google-fonts\/\" rel=\"noopener\">melhores fontes do Google<\/a> para te ajudar a come\u00e7ar.<\/p>\n\n\n<p>Quando um usu\u00e1rio visita seu site, a fonte web \u00e9 temporariamente baixada e aplicada ao texto usando a regra <strong><code>@font-face<\/code><\/strong> em CSS.<\/p>\n\n\n<p>As fontes da web come\u00e7am ent\u00e3o a comportar-se como fontes locais \u2014 Elas se ajustam automaticamente aos tamanhos de tela, mantendo seu site com uma apar\u00eancia n\u00edtida.<\/p>\n\n\n<p>As fontes tamb\u00e9m evolu\u00edram ao longo do tempo para terem formatos de armazenamento mais eficientes. Assim como os <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" rel=\"noopener\">formatos de imagem<\/a>, as fontes possuem TTF, WOFF, WOFF2 e EOT.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedded OpenType (EOT):<\/strong> Compat\u00edvel com vers\u00f5es antigas do Internet Explorer (abaixo do IE9). N\u00e3o comprimido por padr\u00e3o, mas a compress\u00e3o GZIP pode ser aplicada.<\/li>\n\n\n\n<li><strong>TrueType (TTF):<\/strong> Suportado por navegadores antigos Android (abaixo da vers\u00e3o 4.4). \u00c9 descomprimido por padr\u00e3o, mas pode ser comprimido com GZIP.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF):<\/strong> Suportado pela maioria dos navegadores modernos e inclui compress\u00e3o incorporada.<\/li>\n\n\n\n<li><strong>Web Open Font Format 2 (WOFF2):<\/strong> Compat\u00edvel com navegadores que o suportam, apresentando algoritmos de compress\u00e3o personalizados que reduzem o tamanho do arquivo em cerca de 30% em compara\u00e7\u00e3o com outros formatos.<\/li>\n\n\n<\/ul>\n\n\n<p>Os formatos modernos oferecem compress\u00e3o para melhor desempenho e ajudam a manter o design do seu site funcional e visualmente distinto.<\/p>\n\n\n<h2 id=\"h2_what-are-core-web-vitals-cwv-metrics\" class=\"wp-block-heading\">O Que S\u00e3o M\u00e9tricas de Core Web Vitals (CWV)?<\/h2>\n\n\n<p>Aqui est\u00e1 o ponto: o Google deseja que todos os seus usu\u00e1rios tenham uma excelente experi\u00eancia.<\/p>\n\n\n<p>Qualquer site ou aplicativo que ofere\u00e7a a melhor experi\u00eancia aos usu\u00e1rios do Google receber\u00e1 mais &#8220;amor&#8221; dos algoritmos do Google.<\/p>\n\n\n<p>E como \u00e9 medida essa \u201c<strong><em>experi\u00eancia<\/em><\/strong>\u201d?<\/p>\n\n\n<p>Google lan\u00e7ou os Core Web Vitals <a target=\"_blank\" href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\" rel=\"noopener\">no in\u00edcio de 2020<\/a> justamente para esse prop\u00f3sito.<\/p>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">CWV<\/a> \u00e9 um conjunto de tr\u00eas m\u00e9tricas que informam ao Google como seu site ou aplicativo se comporta para os usu\u00e1rios que eles enviam para l\u00e1.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1468\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp\" alt=\"LCP vs INP vs CLS mostrando diferentes medi\u00e7\u00f5es em uma escala de Bom-Precisa Melhorar-Ruim\" class=\"wp-image-58003 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-300x275.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1024x940.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-768x705.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1536x1409.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-600x551.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1200x1101.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-730x670.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1460x1340.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-784x719.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1568x1439.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-877x805.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1468;\" \/><\/figure>\n\n\n<p>Pontua\u00e7\u00f5es mais altas nessas m\u00e9tricas podem ajudar-te a obter uma classifica\u00e7\u00e3o mais alta no Google. Vamos rapidamente revisar essas m\u00e9tricas.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Maior Pintura de Conte\u00fado (LCP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/largest-contentful-paint\/\" rel=\"noopener\"><strong>LCP<\/strong><\/a><strong> mede quanto tempo leva para que o maior elemento vis\u00edvel na sua p\u00e1gina seja carregado.<\/strong><\/p>\n\n\n<p>Isso geralmente \u00e9 uma imagem ou v\u00eddeo, mas pode ser um grande bloco de texto ou um v\u00eddeo incorporado.<\/p>\n\n\n<p>Quanto mais r\u00e1pido isso acontecer, melhor ser\u00e1 o desempenho do seu site aos olhos dos usu\u00e1rios e dos motores de busca.<\/p>\n\n\n<p>Uma boa pontua\u00e7\u00e3o de LCP significa que os usu\u00e1rios n\u00e3o ficam esperando o conte\u00fado principal aparecer.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp\">Intera\u00e7\u00e3o Para a Pr\u00f3xima Pintura (INP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/inp-interaction-to-next-paint\/\" rel=\"noopener\"><strong>INP<\/strong><\/a><strong> mede o tempo entre a intera\u00e7\u00e3o do usu\u00e1rio (como clicar ou tocar) e quando a p\u00e1gina responde visualmente.<\/strong><\/p>\n\n\n<p>Ele oferece uma vis\u00e3o mais precisa da interatividade do que o FID, pois considera toda a jornada do usu\u00e1rio em vez de apenas a primeira intera\u00e7\u00e3o.<\/p>\n\n\n<p>Uma pontua\u00e7\u00e3o baixa de INP significa que seu site parece responsivo, melhorando o engajamento e a satisfa\u00e7\u00e3o do usu\u00e1rio.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Deslocamento Cumulativo de Layout (CLS)<\/h3>\n\n\n<p><strong>O CLS mede a estabilidade da sua p\u00e1gina enquanto carrega.<\/strong><\/p>\n\n\n<p>Quando elementos se movem de forma inesperada, isso frustra os usu\u00e1rios e faz com que a p\u00e1gina pare\u00e7a pouco confi\u00e1vel.<\/p>\n\n\n<p>Uma pontua\u00e7\u00e3o CLS baixa significa que sua p\u00e1gina carrega de forma suave, sem altera\u00e7\u00f5es de layout que interrompam a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\" class=\"wp-block-heading\">Como Otimizar Fontes da Web para Melhores Web Vitals Essenciais<\/h2>\n\n\n<p>Ent\u00e3o, qual \u00e9 toda a confus\u00e3o sobre o desempenho das fontes web?<\/p>\n\n\n<p>Por que n\u00e3o podemos simplesmente adicionar fontes da web e pronto? Bem, voc\u00ea pode.<\/p>\n\n\n<p>Mas como j\u00e1 falamos antes, as fontes da web n\u00e3o s\u00e3o locais. Elas s\u00e3o buscadas de um servidor, baixadas e aplicadas ao seu site, e \u00e9 a\u00ed que o problema est\u00e1.<\/p>\n\n\n<p><strong>Leva tempo.<\/strong><\/p>\n\n\n<p>E se demorar muito, isso afeta seus Principais Indicadores da Web e <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/increase-website-conversion-rate\/\" rel=\"noopener\">taxa de convers\u00e3o do website.<\/a><\/p>\n\n\n<p>Vamos olhar algumas maneiras de otimizar fontes web para melhores vitais essenciais da web.<\/p>\n\n\n<h3 class=\"wp-block-heading\">1. Pr\u00e9-carregamento de Fontes<\/h3>\n\n\n<p>Queres que as tuas fontes estejam prontas no momento em que a p\u00e1gina come\u00e7a a carregar.<\/p>\n\n\n<p>Ent\u00e3o, quando a p\u00e1gina estiver pronta para o usu\u00e1rio, a fonte tamb\u00e9m estar\u00e1.<\/p>\n\n\n<p>Isso \u00e9 chamado de <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"noopener\"><strong>preloading<\/strong><\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp\" alt=\"Tempos de pr\u00e9-carregamento em um gr\u00e1fico de barras horizontal: index.html varia de 0ms-280ms, main.css de 50ms a 380 ms e assim por diante\" class=\"wp-image-58004 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-300x184.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-768x470.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1536x940.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-600x367.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1200x734.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-730x447.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1460x893.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-784x480.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1568x959.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-877x537.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/627;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.bramstein.com\/writing\/preload-hints-for-web-fonts.html\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a><\/figcaption><\/figure>\n\n\n<p>O pr\u00e9-carregamento indica ao navegador, &#8220;<em>Ei, esta fonte \u00e9 importante. Por favor, carregue-a imediatamente.<\/em>&#8220;<\/p>\n\n\n<p>Vamos supor que voc\u00ea est\u00e1 usando a popular <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" rel=\"noopener\">fonte do Google, Roboto<\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"814\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp\" alt=\"screenshot do exemplo do Google Fonts usando a fonte Roboto com texto na fonte Roboto &quot;Enquanto o desrespeito e o desprezo pelos direitos humanos resultaram&quot; \" class=\"wp-image-58005 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-300x153.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1024x521.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-768x391.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1536x781.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-600x305.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1200x611.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-730x371.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1460x743.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-784x399.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1568x798.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-877x446.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/814;\" \/><\/figure>\n\n\n<p>Voc\u00ea precisa adicionar um \u00fanico atributo ao seu c\u00f3digo HTML para pr\u00e9-carregar a fonte: <strong><code>rel = \u201cpreload\u201d<\/code><\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\" as=\"font\" type=\"font\/woff2\" crossorigin<\/code><\/pre>\n\n\n<p>Ap\u00f3s isso, o navegador sabe priorizar o download de Roboto, ent\u00e3o seu texto aparece estilizado com a fonte certa mais rapidamente.<\/p>\n\n\n<p>Isso reduz o tempo necess\u00e1rio para renderizar o maior bloco de texto (LCP), permitindo que os usu\u00e1rios vejam a vers\u00e3o final do seu site mais rapidamente.<\/p>\n\n\n<h3 class=\"wp-block-heading\">2. Controle o Comportamento de Carregamento da Fonte com a Propriedade Font-Display<\/h3>\n\n\n<p>Entretanto, o pr\u00e9-carregamento pode aumentar um pouco o tempo de carga inicial, pois as fontes s\u00e3o priorizadas.<\/p>\n\n\n<p>A <strong><code>propriedade font-display<\/code><\/strong> permite que voc\u00ea controle como seu texto se comporta enquanto as fontes personalizadas ainda est\u00e3o carregando.<\/p>\n\n\n<p>Isso pode ajudar a evitar o temido <strong>Flash of Invisible Text (FOIT),<\/strong> onde os usu\u00e1rios veem espa\u00e7os em branco, e o <strong>Flash of Unstyled Text (FOUT),<\/strong> onde a p\u00e1gina aparece com fontes de reserva por um segundo e imediatamente muda para fontes personalizadas.<\/p>\n\n\n<p>A propriedade <code>font-display<\/code> possui quatro maneiras de gerenciar o comportamento do texto: block, swap, fallback e optional.<\/p>\n\n\n<p>Vamos olhar para os dois de que precisarias.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1243\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp\" alt=\"gr\u00e1ficos de linhas plotados mostrando o impacto dos valores de exibi\u00e7\u00e3o de fontes no carregamento da p\u00e1gina entre block, swap, fallback e optional\" class=\"wp-image-58006 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-300x233.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1024x796.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-768x597.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1536x1193.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-600x466.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1200x932.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-730x567.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1460x1134.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-784x609.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1568x1218.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-877x681.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1243;\" \/><\/figure>\n\n\n<p><strong><code>font-display: swap<\/code><\/strong> \u2014 Esta op\u00e7\u00e3o \u00e9 a aposta mais segura para a maioria dos sites. Garante que o texto apare\u00e7a imediatamente com uma fonte de reserva e troque para a fonte personalizada assim que estiver pronta.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: swap;\n}<\/code><\/pre>\n\n\n<p>Aqui, a fonte alternativa (como Arial ou outra fonte do sistema) ser\u00e1 carregada instantaneamente, mantendo a p\u00e1gina leg\u00edvel.<\/p>\n\n\n<p>Quando Roboto \u00e9 baixado, substitui a fonte de reserva sem deixar um espa\u00e7o em branco na tela.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp\" alt=\"screenshot &quot;font-display:swap&quot; com texto: este \u00e9 um par\u00e1grafo. Este \u00e9 um texto mais pesado (em negrito). Este \u00e9 um texto enfatizado (em it\u00e1lico). Este \u00e9 um texto mais pesado e enfatizado (em it\u00e1lico e negrito). \" class=\"wp-image-58007 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-300x117.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1024x399.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-768x300.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1536x599.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-600x234.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1200x468.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-730x285.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1460x569.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-784x306.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1568x612.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-877x342.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/624;\" \/><\/figure>\n\n\n<p>Aqui est\u00e1 uma <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\" rel=\"noopener\">demonstra\u00e7\u00e3o de como o font-display swap<\/a> se comporta no mundo real.<\/p>\n\n\n<p><strong><code>font-display: optional<\/code><\/strong> \u2014 Se voc\u00ea est\u00e1 preocupado com a velocidade, isso indica ao navegador para pular a fonte personalizada se ela n\u00e3o carregar rapidamente o suficiente. Isso funciona quando voc\u00ea n\u00e3o se importa que a fonte de substitui\u00e7\u00e3o permane\u00e7a no lugar.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: optional;\n}<\/code><\/pre>\n\n\n<p>Esta op\u00e7\u00e3o faz sentido quando o desempenho \u00e9 mais cr\u00edtico do que o design, tornando-a perfeita para um site que \u00e9 totalmente focado em velocidade.<\/p>\n\n\n<p>Aqui est\u00e1 <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display-optional.html\" rel=\"noopener\">um exemplo<\/a> de como isso parece no mundo real. Voc\u00ea n\u00e3o perceber\u00e1 a troca aqui, pois a maioria das fontes carrega rapidamente o suficiente.<\/p>\n\n\n<p>No entanto, o argumento opcional \u00e9 excelente caso seu servidor de fontes fique inativo ou lento.<\/p>\n\n\n<h3 class=\"wp-block-heading\">3. Subconjunto de Fontes<\/h3>\n\n\n<p>A maioria das fontes vem com centenas, at\u00e9 milhares, de caracteres.<\/p>\n\n\n<p>\u00c9 prov\u00e1vel que voc\u00ea s\u00f3 precise de uma pequena parte delas. Remover essas partes \u00e9 chamado de subconjunto de fontes.<\/p>\n\n\n<p>Isso mesmo, voc\u00ea pode remover caracteres desnecess\u00e1rios para reduzir o tamanho do arquivo de fonte.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp\" alt=\"uma ilustra\u00e7\u00e3o abstrata mostrando a subdefini\u00e7\u00e3o de fonte, onde a letra &quot;a&quot; est\u00e1 sendo extra\u00edda e separada de um arquivo de fonte maior\" class=\"wp-image-58008 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-300x150.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1024x512.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-768x384.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1536x768.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-600x300.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1200x600.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-730x365.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1460x730.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-784x392.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1568x784.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-877x439.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n<p>Suppose que o seu site precisa apenas de caracteres em ingl\u00eas.<\/p>\n\n\n<p>Uma ferramenta como <a target=\"_blank\" href=\"https:\/\/github.com\/fonttools\/fonttools\" rel=\"noopener\">FontTools<\/a> pode ajudar-te a reduzir o teu conjunto de fontes para incluir apenas os caracteres que realmente usar\u00e1s.<\/p>\n\n\n<p>Isso significa que todos os caracteres Unicode que n\u00e3o s\u00e3o necess\u00e1rios no idioma ingl\u00eas podem ser removidos para economizar o tamanho do arquivo.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Unicode<\/h3>\n    <p>O Padr\u00e3o Unicode \u00e9 um sistema de codifica\u00e7\u00e3o internacional. Ele atribui um n\u00famero \u00fanico a cada caractere em cada l\u00edngua para que o caractere possa ser exibido em dispositivos, plataformas e l\u00ednguas diferentes.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/unicode\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n<p>Isso reduz o tamanho do arquivo de, digamos, 80 KB para 30 KB.<\/p>\n\n\n<p>Arquivos menores significam downloads mais r\u00e1pidos, melhorando tanto o LCP quanto o CLS, j\u00e1 que a fonte carrega rapidamente e n\u00e3o altera o layout.<\/p>\n\n\n<p>Aqui est\u00e1 um exemplo de como voc\u00ea removeria tudo, exceto caracteres em ingl\u00eas, usando FontTools:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F<\/code><\/pre>\n\n\n<p>Agora, sua fonte Roboto cont\u00e9m apenas os caracteres latinos b\u00e1sicos necess\u00e1rios para o texto em ingl\u00eas, tornando-a muito mais r\u00e1pida para carregar.<\/p>\n\n\n<p>Se preferires uma abordagem baseada em GUI, tamb\u00e9m podes <a target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"noopener\">experimentar o font-squirrel<\/a>. Depois de carregares um arquivo de fonte, tens v\u00e1rias op\u00e7\u00f5es de personaliza\u00e7\u00e3o para adicionar ou remover<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1112\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp\" alt=\"Uma interface web para o Gerador de Webfont do Font Squirrel mostrando op\u00e7\u00f5es de convers\u00e3o de fonte e configura\u00e7\u00f5es de formato.\" class=\"wp-image-58009 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-300x209.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1024x712.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-768x534.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1536x1068.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-600x417.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1200x834.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-730x507.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1460x1015.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-784x545.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1568x1090.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-877x610.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1112;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">4. Comprimindo Fontes<\/h3>\n\n\n<p>Formatos de fonte modernos como WOFF2 oferecem compress\u00e3o que pode reduzir o tamanho da fonte em at\u00e9 30% em compara\u00e7\u00e3o com formatos mais antigos como TTF.<\/p>\n\n\n<p>Usar a vers\u00e3o mais comprimida da sua fonte pode reduzir significativamente o impacto dela no tempo de carregamento da p\u00e1gina.<\/p>\n\n\n<p>Por exemplo, aqui est\u00e1 como voc\u00ea pode garantir que est\u00e1 usando WOFF2:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2'),\n       url('roboto.woff') format('woff');\n  font-weight: 400;\n}<\/code><\/pre>\n\n\n<p>Dessa forma, os navegadores que suportam WOFF2 o usar\u00e3o por padr\u00e3o, reduzindo os tempos de carregamento enquanto ainda exibem uma fonte n\u00edtida e de alta qualidade.<\/p>\n\n\n<p>Contudo, se um navegador n\u00e3o puder usar WOFF2, ele retorna ao WOFF.<\/p>\n\n\n<h3 class=\"wp-block-heading\">5. Codifica\u00e7\u00e3o Base64<\/h3>\n\n\n<p>Esta \u00e9 outra pr\u00e1tica comumente utilizada para otimizar suas fontes web.<\/p>\n\n\n<p>Entretanto, voc\u00ea precisa ser cauteloso sobre quando usar fontes codificadas em Base64.<\/p>\n\n\n<p><strong>A codifica\u00e7\u00e3o Base64 \u00e9 mais \u00fatil para fontes pequenas ou \u00edcones.<\/strong><\/p>\n\n\n<p>Se for usado em excesso, voc\u00ea pode sobrecarregar o CSS, aumentando o tempo de carregamento da p\u00e1gina mais do que apenas usando a fonte em si.<\/p>\n\n\n<p>Se quiseres usar a codifica\u00e7\u00e3o Base64 para uma fonte de \u00edcones, primeiro converterias o arquivo da fonte para o formato Base64. Aqui est\u00e1 como poderia parecer:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'CustomIcons';\n  src: url('data:font\/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n<p>Este m\u00e9todo funciona bem para pequenas fontes de \u00edcones que voc\u00ea usa frequentemente em todo o site.<\/p>\n\n\n<p>O arquivo CSS \u00e9 carregado com a fonte embutida, eliminando uma requisi\u00e7\u00e3o HTTP extra.<\/p>\n\n\n<p>Entretanto, evite isso para fontes de corpo grande, pois pode retardar a renderiza\u00e7\u00e3o inicial da p\u00e1gina.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-lt-link-vs-css-import-for-fonts\">6. <code>&lt;link&gt;<\/code> vs. CSS <code>@import<\/code> para Fontes<\/h3>\n\n\n<p><code>&lt;link&gt;<\/code> e <code>@import<\/code> possuem uma diferen\u00e7a significativa no desempenho de carregamento.<\/p>\n\n\n<p>A tag <code>&lt;link&gt;<\/code> carrega fontes de forma ass\u00edncrona, o que significa que n\u00e3o impede o restante da sua p\u00e1gina de ser renderizada, enquanto <code>@import<\/code> \u00e9 um pouco mais lento.<\/p>\n\n\n<p><strong>Use <code>&lt;link&gt;<\/code> sempre que poss\u00edvel.<\/strong><\/p>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cPara 90%+ dos casos, provavelmente desejas a tag <code>&lt;link><\/code>. Como regra geral, deves evitar regras de <code>@import<\/code> porque elas adiam o carregamento do recurso inclu\u00eddo at\u00e9 que o arquivo seja buscado.\u201d <\/em><a href=\"https:\/\/stackoverflow.com\/questions\/12316501\/including-google-fonts-link-or-import\" target=\"_blank\" rel=\"noopener\"><em>Ilya Grigorik<\/em><\/a><em>, Engenheiro e Assessor T\u00e9cnico do CEO na Shopify<\/em><\/p>\n\n\n<\/blockquote>\n\n\n<p>Carrega fontes de forma independente, permitindo que o resto da p\u00e1gina seja carregado sem esperar pelo arquivo de fonte.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href= \"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\"><\/code><\/pre>\n\n\n<p>Este \u00e9 o m\u00e9todo preferido para carregar Google Fonts ou servi\u00e7os de fontes externas similares.<\/p>\n\n\n<p>Colocado na se\u00e7\u00e3o <code>&lt;head><\/code> do seu HTML, ele garante que a fonte comece a carregar cedo sem bloquear outros recursos.<\/p>\n\n\n<p><strong>Evite <code>@import<\/code> para fontes cr\u00edticas.<\/strong><\/p>\n\n\n<p><code>@import<\/code> espera at\u00e9 que o arquivo CSS esteja totalmente carregado, o que pode aumentar o tempo de carregamento e prejudicar o LCP.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap');<\/code><\/pre>\n\n\n<p>Utilizar <code>@import<\/code> para fontes s\u00f3 funciona para fontes secund\u00e1rias ou menos cr\u00edticas. Como pr\u00e1tica, evite isso para qualquer coisa na primeira tela de conte\u00fado.<\/p>\n\n\n<h3 class=\"wp-block-heading\">7. Reduza Deslocamentos Visuais\/CLS Com Correspond\u00eancia de Fontes e Ajuste de Tamanho<\/h3>\n\n\n<p>Deslocamentos visuais \u2014 ou mudan\u00e7as de layout cumulativas (CLS), como o Google os denomina \u2014 ocorrem quando o layout muda inesperadamente, muitas vezes devido a trocas de fontes.<\/p>\n\n\n<p>Para minimizar esse efeito, escolha fontes de reserva que se assemelhem de perto ao estilo e \u00e0s dimens\u00f5es da sua fonte personalizada.<\/p>\n\n\n<p>A propriedade <strong><code>CSS size-adjust<\/code><\/strong> tamb\u00e9m permite controlar o tamanho da fonte de substitui\u00e7\u00e3o, reduzindo deslocamentos visuais quando a fonte personalizada \u00e9 carregada.<\/p>\n\n\n<p>Se sua fonte personalizada for Roboto e uma fonte de conting\u00eancia, ajuste o tamanho dela para corresponder ao Roboto, tornando a transi\u00e7\u00e3o quase impercept\u00edvel.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2');\n  font-display: swap;\n  size-adjust: 100%;\n}<\/code><\/pre>\n\n\n<p>Aqui, o fallback do Roboto (por exemplo, Arial) mant\u00e9m um tamanho consistente, reduzindo qualquer movimento percept\u00edvel quando o Roboto \u00e9 completamente carregado.<\/p>\n\n\n<p>Uma vez que voc\u00ea alinhe o tamanho e o espa\u00e7amento da fonte reserva com sua fonte personalizada, voc\u00ea garante que quando Roboto substituir Arial, a mudan\u00e7a seja m\u00ednima, mantendo o CLS baixo e melhorando a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n<h3 class=\"wp-block-heading\">8. Encontre o Lugar Certo Para Hospedar Fontes da Web<\/h3>\n\n\n<p>Autohospedar suas fontes n\u00e3o significa sempre um desempenho mais r\u00e1pido.<\/p>\n\n\n<p>Muitas op\u00e7\u00f5es de terceiros tamb\u00e9m funcionam bem\u2014e \u00e0s vezes, elas podem at\u00e9 carregar mais r\u00e1pido.<\/p>\n\n\n<p>O <a target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2020\/fonts#fig-7\" rel=\"noopener\">Web Almanac<\/a> descobriu que certos sites que utilizam fontes de terceiros renderizam mais r\u00e1pido do que aqueles com fontes hospedadas pelo pr\u00f3prio site.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1500\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp\" alt=\"Gr\u00e1fico de barras comparando os tempos de carregamento de FCP e LCP para m\u00e9todos de hospedagem de fontes pr\u00f3prias, externas e combinadas, mostrando que a hospedagem combinada \u00e9 a mais lenta.\" class=\"wp-image-58010 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-300x281.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1024x960.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-768x720.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1536x1440.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-600x563.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1200x1125.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-730x684.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1460x1369.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-784x735.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1568x1470.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-877x822.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1500;\" \/><\/figure>\n\n\n<p>Em \u00faltima an\u00e1lise, o desempenho da fonte depende menos da escolha de hospedagem e mais de tr\u00eas fatores-chave:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rede de Entrega de Conte\u00fado (CDN):<\/strong> Garante uma entrega mais r\u00e1pida ao servir fontes de m\u00faltiplas localiza\u00e7\u00f5es no mundo todo.<\/li>\n\n\n\n<li><strong>HTTP\/2:<\/strong> Aumenta a velocidade de carregamento ao lidar com m\u00faltiplas solicita\u00e7\u00f5es em paralelo, reduzindo a lat\u00eancia.<\/li>\n\n\n\n<li><strong>Pol\u00edtica de Cache Web:<\/strong> Armazena fontes de maneira eficiente, para que n\u00e3o seja necess\u00e1rio baix\u00e1-las novamente a cada visita.<\/li>\n\n\n<\/ul>\n\n\n<p>Em vez de ficar preso no debate sobre hospedagem, concentre-se em configurar esses essenciais para manter suas fontes carregando suavemente, n\u00e3o importa onde elas estejam hospedadas.<\/p>\n\n\n<h2 id=\"h2_how-to-simplify-web-performance-optimization\" class=\"wp-block-heading\">Como Simplificar a Otimiza\u00e7\u00e3o de Desempenho Web<\/h2>\n\n\n<p>Se as t\u00e9cnicas acima parecem muito manuais, um <a target=\"_blank\" href=\"https:\/\/automattic.pxf.io\/OrN6xZ\" rel=\"noopener\">plugin como o Jetpack<\/a> pode facilitar.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp\" alt=\"P\u00e1gina de aterrissagem de marketing mostrando as funcionalidades de otimiza\u00e7\u00e3o do WordPress do Jetpack com gr\u00e1ficos de m\u00e9tricas de desempenho e dispositivos m\u00f3veis.\" class=\"wp-image-58011 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-300x176.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-768x452.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1536x903.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-600x353.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1200x706.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-730x429.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1460x859.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-784x461.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1568x922.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-877x516.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/figure>\n\n\n<p>Jetpack, <a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/jetpack\" rel=\"noopener\">desenvolvido pela Automattic<\/a> (os criadores do WordPress), \u00e9 uma solu\u00e7\u00e3o tudo-em-um criada especificamente para sites WordPress.<\/p>\n\n\n<p>Combina funcionalidades essenciais para seguran\u00e7a, desempenho e marketing, todas gerenciadas a partir de uma \u00fanica plataforma.<\/p>\n\n\n<p>Mesmo que voc\u00ea n\u00e3o seja t\u00e9cnico, o Jetpack pode ajudar a melhorar a velocidade do site, fortalecer a seguran\u00e7a e aprimorar a experi\u00eancia do usu\u00e1rio. (Sem configura\u00e7\u00f5es complexas necess\u00e1rias!)<\/p>\n\n\n<h2 id=\"h2_create-the-perfect-balance-between-beauty-and-performance\" class=\"wp-block-heading\">Crie o Equil\u00edbrio Perfeito Entre Beleza e Desempenho<\/h2>\n\n\n<p>As fontes da web d\u00e3o ao seu site uma apar\u00eancia \u00fanica e bonita.<\/p>\n\n\n<p>No entanto, sem os ajustes certos, eles tamb\u00e9m podem deix\u00e1-lo lento e frustrar os usu\u00e1rios.<\/p>\n\n\n<p>Embora tenhamos abordado t\u00e9cnicas essenciais de otimiza\u00e7\u00e3o de fontes, o ajuste fino do desempenho envolve in\u00fameros detalhes t\u00e9cnicos.<\/p>\n\n\n<p>E obter os melhores resultados pode parecer esmagador.<\/p>\n\n\n<p>\u00c9 a\u00ed que entram os <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pro-services\/\" rel=\"noopener\">servi\u00e7os profissionais de desenvolvimento web da DreamHost<\/a>.<\/p>\n\n\n<p>N\u00f3s garantiremos que seu site seja bonito e otimizado para velocidade e experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n<p>Deixe-nos lidar com as quest\u00f5es t\u00e9cnicas enquanto voc\u00ea se concentra em construir um site que realmente se destaque.<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/pro-services\/development\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Pro Services &#8211; Development<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tYou Dream It, We Code It\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tTap into 20+ years of development expertise. Just let us know what you want for your site \u2013 we\u2019ll take it from there.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><em>Esta p\u00e1gina cont\u00e9m links de afiliados. Isso significa que podemos ganhar uma comiss\u00e3o se voc\u00ea adquirir servi\u00e7os atrav\u00e9s do nosso link, sem nenhum custo extra para voc\u00ea.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.<\/p>\n","protected":false},"author":1058,"featured_media":58013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.","toc_headlines":"[[\"h-what-are-web-safe-fonts\",\"O Que S\u00e3o Fontes Seguras Para Web?\"],[\"h2_what-are-web-fonts\",\"O Que S\u00e3o Fontes Web?\"],[\"h2_what-are-core-web-vitals-cwv-metrics\",\"O Que S\u00e3o M\u00e9tricas de Core Web Vitals (CWV)?\"],[\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\",\"Como Otimizar Fontes da Web para Melhores Web Vitals Essenciais\"],[\"h2_how-to-simplify-web-performance-optimization\",\"Como Simplificar a Otimiza\u00e7\u00e3o de Desempenho Web\"],[\"h2_create-the-perfect-balance-between-beauty-and-performance\",\"Crie o Equil\u00edbrio Perfeito Entre Beleza e Desempenho\"]]","hide_toc":false,"footnotes":""},"categories":[14407],"tags":[],"class_list":["post-72377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web\" \/>\n<meta property=\"og:description\" content=\"As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:21:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web - DreamHost Blog","description":"As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.","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:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web","og_description":"As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2025-05-26T19:21:48+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-05-26T19:21:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/"},"wordCount":2754,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","articleSection":["Design de Sites"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/","name":"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-05-26T19:21:48+00:00","description":"As fontes da web podem impactar os Core Web Vitals do seu site. Aprenda dicas simples para otimizar as fontes da web e manter seu site r\u00e1pido e f\u00e1cil de usar.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","width":1460,"height":1095,"caption":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/core-web-vitals-como-evitar-as-armadilhas-de-desempenho-das-fontes-web-pt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: Como Evitar as Armadilhas de Desempenho das Fontes Web"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"pt","translations":{"pt":72377,"es":58033,"en":58000,"it":68795,"fr":71167,"nl":71194,"uk":72392,"pl":72423,"de":73073,"ru":73076},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=72377"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72377\/revisions"}],"predecessor-version":[{"id":72379,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72377\/revisions\/72379"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/58013"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=72377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=72377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=72377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}