{"id":3883,"date":"2014-12-05T09:28:04","date_gmt":"2014-12-05T11:28:04","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3883"},"modified":"2014-12-05T09:28:04","modified_gmt":"2014-12-05T11:28:04","slug":"melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes\/","title":{"rendered":"Melhore o tempo de carregamento com subconjuntos de fontes"},"content":{"rendered":"<p style=\"text-align: left;\">Este post tem como objetivo ajudar os desenvolvedores a otimizarem suas fontes, reduzindo consideravelmente o tamanho dos arquivos e otimizando o tr\u00e1fego do usu\u00e1rio. Al\u00e9m da dica de hoje, n\u00e3o deixe de conferir a postagem que falamos sobre <a title=\"D\u00ea um Tuning em suas Fontes com \u00cdcones\" href=\"https:\/\/www.turbosite.com.br\/blog\/de-um-tuning-em-suas-fontes-com-icones\/\">como reduzir o tamanho das fontes com \u00edcones<\/a>.<\/p>\n<p style=\"text-align: left;\">Postagem vista no site <a href=\"http:\/\/desenvolvimentoparaweb.com\/miscelanea\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes\/\">Desenvolvimento para Web<\/a>, por ser de grande valia, estamos compartilhando com nossos leitores, boa leitura.<\/p>\n<p style=\"text-align: left;\">Atualmente, a ampla disponibilidade de fontes web permite que um site seja um \u201cpa\u00eds das maravilhas\u201d tipogr\u00e1fico, mas o custo disso \u00e9 o aumento do tamanho das p\u00e1ginas e consequente tempo de carregamento mais longo. Desenvolvedores focados em desempenho j\u00e1 otimizam imagens (inclusive com t\u00e9cnicas responsivas) e CSS e, caso ainda n\u00e3o saiba, tamb\u00e9m \u00e9 poss\u00edvel <strong>melhorar o tempo de carregamento de um site ao usar subconjuntos de fontes<\/strong>.<\/p>\n<aside class=\"extrapolate extrapolate--translated-article extrapolate--inline-icon extrapolate--left extrapolate--right\">Este artigo \u00e9 baseado no <span lang=\"en\">post <a href=\"http:\/\/demosthenes.info\/blog\/878\/Slash-Page-Load-Times-With-CSS-Font-Subsetting\">Slash Page Load Times With CSS Font Subsetting<\/a><\/span> do <a href=\"http:\/\/demosthenes.info\/\"><span lang=\"en\">demosthenes.info<\/span><\/a>.<\/aside>\n<p style=\"text-align: left;\">A boa not\u00edcia \u00e9 que aprimorar o tempo de carregamento com subconjuntos de fontes \u00e9 f\u00e1cil: basta criar sua pr\u00f3pria fonte personalizada ou fornecer a fonte atrav\u00e9s de um servi\u00e7o web com um valor simples de vari\u00e1vel para que voc\u00ea possa carregar somente os glifos que precisa para o texto da p\u00e1gina, fazendo isso ao inv\u00e9s de usar toda a gama de caracteres, n\u00fameros e s\u00edmbolos presentes na fonte escolhida, reduzindo o tempo de carregamento e melhorando a performance.<\/p>\n<p style=\"text-align: left;\">Usar subconjuntos de fontes geralmente \u00e9 bastante eficaz, desde que tenha esses 2 pontos em mente:<\/p>\n<ul style=\"text-align: left;\">\n<li>Para usar as vers\u00f5es mais eficazes desta t\u00e9cnica \u2014 que carregam uma gama limitada de caracteres da fonte \u2014 voc\u00ea deve ter certeza de que o texto renderizado n\u00e3o vai mudar substancialmente no futuro, como glifos que n\u00e3o est\u00e3o explicitamente carregado corretamente<\/li>\n<li>Se voc\u00ea mesmo est\u00e1 hospedando fonte, deve garantir que as fontes n\u00e3o-WOFF s\u00e3o servidas com gzip \u2014 que vai economizar uma m\u00e9dia de 40~70% no tamanho do arquivo \u2014 antes de se preocupar em obter benef\u00edcios de subconjuntos de fontes<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: left;\">Subconjuntos de fontes com Google Fonts<\/h2>\n<p><strong>Google Fonts<\/strong>, o servi\u00e7o de web fonts mais popular, tem uma s\u00e9rie de op\u00e7\u00f5es para subconjuntos. O primeiro j\u00e1 est\u00e1 embutido:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3884\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-character-sets-dica-turbosite.png\" alt=\"melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-character-sets-dica-turbosite\" width=\"1021\" height=\"102\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-character-sets-dica-turbosite.png 1021w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-character-sets-dica-turbosite-300x30.png 300w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-character-sets-dica-turbosite-768x77.png 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/><\/p>\n<p style=\"text-align: left;\">\n<p style=\"text-align: left;\">Por padr\u00e3o, ser\u00e1 baixado apenas o subconjunto Latin: letras mai\u00fasculas e min\u00fasculas A-Z, n\u00fameros e sinais de pontua\u00e7\u00e3o. A op\u00e7\u00e3o \u201cestendida\u201d (Latin Extended) deve conter os caracteres adicionais usados em idiomas europeus (caracteres acentuados, tremas e similares), mas a qualidade e extens\u00e3o desses caracteres, como entregues pelo Google, \u00e9 muitas vezes limitado: voc\u00ea pode, em algumas situa\u00e7\u00f5es , querer hospedar a fonte para ter acesso ao conjunto completo de caracteres.<\/p>\n<p style=\"text-align: left;\">As op\u00e7\u00f5es de subconjunto tamb\u00e9m podem ser alteradas na URL de requisi\u00e7\u00e3o da fonte:<\/p>\n<pre class=\"lang:php decode:true\">&lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Open+Sans&amp;subset=latin-ext,latin\" rel=\"stylesheet\"&gt;<\/pre>\n<p>&nbsp;<\/p>\n<div class=\"wp_syntax\" style=\"text-align: left;\"><\/div>\n<h3 style=\"text-align: left;\">Limitando Google Fonts para caracteres espec\u00edficos<\/h3>\n<p style=\"text-align: left;\">Tamb\u00e9m \u00e9 poss\u00edvel limitar a requisi\u00e7\u00e3o para apenas os caracteres que se queira usando uma query string:<\/p>\n<pre class=\"lang:php decode:true \">&lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Open+Sans&amp;text=Hello\" rel=\"stylesheet\"&gt;<\/pre>\n<p>Isso servir\u00e1 apenas os caracteres \u201cH\u201d, \u201ce\u201d, \u201cl\u201d e \u201co\u201d da fonte Open Sans, reduzindo significativamente o tamanho da requisi\u00e7\u00e3o!<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><b>Requisi\u00e7\u00e3o completa:<\/b><\/p>\n<pre class=\"lang:php decode:true\">&lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Open+Sans\" rel=\"stylesheet\"&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3885\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-request-dica-turbosite.png\" alt=\"melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-request-dica-turbosite\" width=\"714\" height=\"161\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-request-dica-turbosite.png 714w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-request-dica-turbosite-300x68.png 300w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/p>\n<p style=\"text-align: left;\">\n<p style=\"text-align: left;\"><b>Requisi\u00e7\u00e3o especificando subconjunto de caracteres:<\/b><\/p>\n<pre class=\"lang:php decode:true\">&lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Open+Sans&amp;text=Hello\" rel=\"stylesheet\"&gt;<\/pre>\n<p>&nbsp;<\/p>\n<div class=\"wp_syntax\" style=\"text-align: left;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3886\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-subconjunto-caracteres-dica-turbosite.png\" alt=\"melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-subconjunto-caracteres-dica-turbosite\" width=\"715\" height=\"166\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-subconjunto-caracteres-dica-turbosite.png 715w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-google-font-subconjunto-caracteres-dica-turbosite-300x70.png 300w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><\/p>\n<p style=\"text-align: left;\">\n<p style=\"text-align: left;\">Esta t\u00e9cnica \u00e9 perfeita para webfonts usadas para renderizar logos ou definir manchetes, caso em que os caracteres usados s\u00e3o sempre conhecidos de antem\u00e3o; mas esteja atento para o fato de que \u00e9 poss\u00edvel come\u00e7ar a ter problemas se o texto tiver caracteres que est\u00e3o fora da faixa indicada:<\/p>\n<pre class=\"lang:php decode:true \">&lt;link href=\"http:\/\/fonts.googleapis.com\/css?family=Open+Sans&amp;text=Hello\" rel=\"stylesheet\"&gt;\n \n&lt;style&gt;\n    h1 { font-family: Open Sans; }\n&lt;\/style&gt;\n \n&lt;h1&gt;Hello, Frendo&lt;\/h1&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Perceba que os caracteres \u201cF\u201d, \u201cr\u201d, \u201cn\u201d e \u201cd\u201d n\u00e3o renderizam corretamente, j\u00e1 que n\u00e3o foram especificados no subconjunto de fontes da requisi\u00e7\u00e3o.<\/p>\n<div class=\"pure-u-shortcode pure-u-1-3\" style=\"text-align: left;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1832\" src=\"http:\/\/desenvolvimentoparaweb.com\/wp-content\/uploads\/2014\/11\/hello-frendo.png\" alt=\"Resultado do texto usando uma faixa de caracteres em requisi\u00e7\u00e3o de subconjunto de fontes\" width=\"223\" height=\"50\" \/><\/p>\n<\/div>\n<p style=\"text-align: left;\">Se voc\u00ea quiser ir na dire\u00e7\u00e3o completamente oposta e obter um arquivo muito maior como resultado, pode direcionar o Google a fornecer a fonte completa, incluindo kerning, ligaduras e dados OpenType usando \u201csubset=all\u201d: <code>http:\/\/fonts.googleapis.com\/css?family=Open+Sans&amp;subset=all<\/code><\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">Subconjuntos de fontes com hospedagem pr\u00f3pria<\/h2>\n<p style=\"text-align: left;\">Tamb\u00e9m \u00e9 poss\u00edvel usar subconjuntos de fontes atrav\u00e9s de seu pr\u00f3prio servidor criando uma fonte personalizada que contenha somente os glifos necess\u00e1rios.<\/p>\n<div class=\"pure-u-shortcode extrapolate extrapolate--warning\" style=\"text-align: left;\">\u00c9 muitas vezes assumido \u2014 e isso \u00e9 compreens\u00edvel \u2014 que a propriedade CSS <code>unicode-range<\/code> seja usada para especificar subconjuntos de fontes. Mas isso \u00e9 somente parcialmente verdade: em Unicode, a fonte inteira ainda \u00e9 carregada, mas somente os caracteres em um intervalo definido s\u00e3o realmente utilizados. Portanto, n\u00e3o se trata de uma t\u00e9cnica de otimiza\u00e7\u00e3o de web fonts do tipo que est\u00e1 sendo tratada neste artigo.<\/div>\n<p style=\"text-align: left;\">Atualmente, a maneira mais f\u00e1cil de se fazer isso \u00e9 usando a op\u00e7\u00e3o \u201cExpert\u201d do servi\u00e7o especialistas no <a href=\"http:\/\/fontsquirrel.com\/tools\/webfont-generator\">gerador de webfont Font Squirrel<\/a>:<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3887\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-font-squirrel-subsetting-dica-turbosite.png\" alt=\"melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-font-squirrel-subsetting-dica-turbosite\" width=\"720\" height=\"763\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-font-squirrel-subsetting-dica-turbosite.png 720w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/melhore-o-tempo-de-carregamento-com-subconjuntos-de-fontes-font-squirrel-subsetting-dica-turbosite-283x300.png 283w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p style=\"text-align: left;\">No exemplo, optou-se por usar somente letras mai\u00fasculas a partir da fonte Lobster. Extraindo estes em uma fonte web, produz um ficheiro que \u00e9 muito menor: o original (lobster.woff) tem 62KB; o personalizado (lobster-caps.woff), <b>7.7KB<\/b>!<\/p>\n<p style=\"text-align: left;\">E ainda \u00e9 poss\u00edvel garantir que as letras mai\u00fasculas s\u00f3 ser\u00e3o escritas em Lobster no meu site, usando:<\/p>\n<pre class=\"lang:php decode:true \">@font-face { font-family: Lobster; src: url(\"Lobster\/lobster-caps.woff\"); }\n \nh1 {\n    font-family: Lobster;\n    text-transform: uppercase;\n}<\/pre>\n<p>Se voc\u00ea estiver usando apenas alguns caracteres de uma fonte, pode valer a pena codificar em base-64, o que poupa uma requisi\u00e7\u00e3o HTTP. Transformar os glifos em SVG tamb\u00e9m seria uma op\u00e7\u00e3o.<\/p>\n<h2 style=\"text-align: left;\"><\/h2>\n<h2 style=\"text-align: left;\">Conclus\u00e3o<\/h2>\n<p style=\"text-align: left;\">Usar subconjuntos de fontes em seus sites pode ser uma via extremamente poderosa e \u00fatil, mas \u00e9 algo que precisa ser cuidadosamente analisado e planejado. As demandas de designers, provedores de conte\u00fado e tradutores devem ser considerados ao escolher o intervalo de texto usado num subconjunto de fonte.<\/p>\n<p style=\"text-align: left;\">Tendo passado por este planejamento e fazendo tudo certinho, tenha certeza de que ao usar <strong>subconjuntos de fontes\u00a0<\/strong>voc\u00ea poupar\u00e1 preciosos KB e requisi\u00e7\u00f5es HTTP, diminuindo o tamanho total das p\u00e1ginas e melhorando a performance geral!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este post tem como objetivo ajudar os desenvolvedores a otimizarem suas fontes, reduzindo consideravelmente o tamanho dos arquivos e otimizando o tr\u00e1fego do usu\u00e1rio. Al\u00e9m da dica de\u2026<\/p>\n","protected":false},"author":1,"featured_media":3888,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,11,28],"tags":[273,300,469,597,654],"class_list":["post-3883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-dicas","category-fontes","category-tutoriais","tag-fontes-2","tag-google-fonts","tag-otimizar-fontes","tag-sub-conjunto-de-fontes","tag-web-fontes"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3883"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3883\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3888"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}