{"id":872,"date":"2009-10-20T01:25:45","date_gmt":"2009-10-20T06:25:45","guid":{"rendered":"http:\/\/www.phpied.com\/?p=872"},"modified":"2009-10-20T01:27:06","modified_gmt":"2009-10-20T06:27:06","slug":"font-face-gzipping-take-ii","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/font-face-gzipping-take-ii\/","title":{"rendered":"@font-face gzipping &#8211; take II"},"content":{"rendered":"<p>Since my previous post on <a href=\"https:\/\/www.phpied.com\/gzip-your-font-face-files\/\">@font-face and gzipping<\/a>, <a href=\"https:\/\/www.phpied.com\/font-face-gzipping-take-ii\/\">Paul Irish<\/a> has <a href=\"http:\/\/twitter.com\/paul_irish\/status\/4861975668\">asked<\/a> (and <a href=\"http:\/\/twitter.com\/KLTF\/statuses\/4911105732\">so has @KLTF<\/a>) what about WOFF?<\/p>\n<p>WOFF is a <a href=\"http:\/\/people.mozilla.com\/~jkew\/woff\/woff-spec-latest.html\">newer format<\/a> with built in compression and ability to store meta data.<\/p>\n<p>So I took this <a href=\"http:\/\/people.mozilla.com\/~jkew\/woff\/\">stnf2woff<\/a> utility and converted all the TTF and OTF files from my previous tests to WOFF. Below are the results.<\/p>\n<p>Basically, <strong>the tests confirm that WOFF is already compressed, it doesn't need to be gzipped by the server<\/strong> and woff file sizes is comparable to the compressed TTF or OTF.<\/p>\n<p>The tables show the original font-file size and the percentage shaved off after gzipping, converting to WOFF and gzipping the WOFF.<\/p>\n<h3>TTF to WOFF<\/h3>\n<style>td {text-align: right;border-bottom: 1px solid #93BB3A;} .average td {font-weight: bold;} td.fontname {text-align: left;} th {padding: 5px;background:#C1E56D;}<\/style>\n<table>\n<tr>\n<th>font<\/th>\n<th>original, bytes<\/th>\n<th>gzip saves, %<\/th>\n<th>woff saves, %<\/th>\n<th>woff gzipped saves, %<\/th>\n<\/tr>\n<tr>\n<td class=\"fontname\">AllerDisplay.ttf<\/td>\n<td>95,616<\/td>\n<td>50.04%<\/td>\n<td>51.26%<\/td>\n<td>51.30%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Aller_Bd.ttf<\/td>\n<td>128,368<\/td>\n<td>53.35%<\/td>\n<td>54.34%<\/td>\n<td>54.62%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Aller_BdIt.ttf<\/td>\n<td>123,556<\/td>\n<td>52.30%<\/td>\n<td>53.46%<\/td>\n<td>53.49%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Aller_It.ttf<\/td>\n<td>120,876<\/td>\n<td>51.64%<\/td>\n<td>52.46%<\/td>\n<td>52.55%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Aller_Lt.ttf<\/td>\n<td>132,780<\/td>\n<td>54.24%<\/td>\n<td>55.45%<\/td>\n<td>55.75%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Aller_LtIt.ttf<\/td>\n<td>122,296<\/td>\n<td>53.11%<\/td>\n<td>54.17%<\/td>\n<td>54.26%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Aller_Rg.ttf<\/td>\n<td>134,436<\/td>\n<td>52.86%<\/td>\n<td>53.57%<\/td>\n<td>53.87%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">FFF_Tusj.ttf<\/td>\n<td>1,543,648<\/td>\n<td>34.69%<\/td>\n<td>34.69%<\/td>\n<td>34.68%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">MarketingScript.ttf<\/td>\n<td>55,160<\/td>\n<td>54.63%<\/td>\n<td>54.86%<\/td>\n<td>54.86%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Sansation_Bold.ttf<\/td>\n<td>19,644<\/td>\n<td>46.72%<\/td>\n<td>46.59%<\/td>\n<td>46.76%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Sansation_Light.ttf<\/td>\n<td>19,568<\/td>\n<td>46.72%<\/td>\n<td>46.52%<\/td>\n<td>46.68%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Sansation_Regular.ttf<\/td>\n<td>19,480<\/td>\n<td>47.78%<\/td>\n<td>47.70%<\/td>\n<td>47.86%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Ubuntu-Title.ttf<\/td>\n<td>15,108<\/td>\n<td>50.54%<\/td>\n<td>49.19%<\/td>\n<td>49.32%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">UglyQua-Italic.ttf<\/td>\n<td>184,300<\/td>\n<td>43.64%<\/td>\n<td>44.16%<\/td>\n<td>44.41%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">UglyQua.ttf<\/td>\n<td>120,424<\/td>\n<td>50.59%<\/td>\n<td>50.95%<\/td>\n<td>51.58%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Vera-Bold-Italic.ttf<\/td>\n<td>63,208<\/td>\n<td>39.25%<\/td>\n<td>41.39%<\/td>\n<td>42.30%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Vera-Bold.ttf<\/td>\n<td>58,716<\/td>\n<td>37.59%<\/td>\n<td>39.74%<\/td>\n<td>40.53%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Vera-Italic.ttf<\/td>\n<td>63,684<\/td>\n<td>39.34%<\/td>\n<td>41.03%<\/td>\n<td>41.45%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Vera.ttf<\/td>\n<td>65,932<\/td>\n<td>39.07%<\/td>\n<td>41.70%<\/td>\n<td>43.27%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">YanoneTagesschrift.ttf<\/td>\n<td>105,016<\/td>\n<td>43.12%<\/td>\n<td>44.54%<\/td>\n<td>45.27%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">daniel.ttf<\/td>\n<td>51,984<\/td>\n<td>32.19%<\/td>\n<td>32.03%<\/td>\n<td>32.01%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">danielbd.ttf<\/td>\n<td>63,688<\/td>\n<td>36.09%<\/td>\n<td>36.05%<\/td>\n<td>36.03%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">danielbk.ttf<\/td>\n<td>88,760<\/td>\n<td>36.12%<\/td>\n<td>36.14%<\/td>\n<td>36.12%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">journal.ttf<\/td>\n<td>130,956<\/td>\n<td>41.58%<\/td>\n<td>42.14%<\/td>\n<td>42.12%<\/td>\n<\/tr>\n<tr class=\"average\">\n<td colspan=\"2\">Average: <\/td>\n<td>41.48%<\/td>\n<td>41.97%<\/td>\n<td>42.13%<\/td>\n<\/tr>\n<\/table>\n<h3>OTF to WOFF<\/h3>\n<style>td {text-align: right;border-bottom: 1px solid #93BB3A;} .average td {font-weight: bold;} td.fontname {text-align: left;} th {padding: 5px;background:#C1E56D;}<\/style>\n<table>\n<tr>\n<th>font<\/th>\n<th>original, bytes<\/th>\n<th>gzip saves, %<\/th>\n<th>woff saves, %<\/th>\n<th>woff gzipped saves, %<\/th>\n<\/tr>\n<tr>\n<td class=\"fontname\">Diavlo_BLACK_II_37.otf<\/td>\n<td>33,964<\/td>\n<td>24.99%<\/td>\n<td>25.05%<\/td>\n<td>24.98%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Diavlo_LIGHT_II_37.otf<\/td>\n<td>33,404<\/td>\n<td>24.69%<\/td>\n<td>24.81%<\/td>\n<td>24.78%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fertigo_PRO.otf<\/td>\n<td>52,636<\/td>\n<td>32.56%<\/td>\n<td>32.97%<\/td>\n<td>32.90%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin-Bold.otf<\/td>\n<td>30,460<\/td>\n<td>46.54%<\/td>\n<td>46.26%<\/td>\n<td>46.45%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin-Italic.otf<\/td>\n<td>30,636<\/td>\n<td>46.31%<\/td>\n<td>45.89%<\/td>\n<td>46.05%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin-Regular.otf<\/td>\n<td>30,396<\/td>\n<td>47.79%<\/td>\n<td>47.41%<\/td>\n<td>47.61%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin-SmallCaps.otf<\/td>\n<td>29,308<\/td>\n<td>47.39%<\/td>\n<td>46.96%<\/td>\n<td>47.14%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin_Sans_B_45b.otf<\/td>\n<td>24,984<\/td>\n<td>29.65%<\/td>\n<td>30.72%<\/td>\n<td>32.11%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin_Sans_I_45b.otf<\/td>\n<td>24,772<\/td>\n<td>28.43%<\/td>\n<td>29.45%<\/td>\n<td>30.75%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin_Sans_R_45b.otf<\/td>\n<td>25,564<\/td>\n<td>29.52%<\/td>\n<td>30.43%<\/td>\n<td>31.87%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Fontin_Sans_SC_45b.otf<\/td>\n<td>27,384<\/td>\n<td>33.54%<\/td>\n<td>34.68%<\/td>\n<td>36.04%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">GraublauWeb.otf<\/td>\n<td>41,464<\/td>\n<td>23.96%<\/td>\n<td>24.12%<\/td>\n<td>24.09%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">GraublauWebBold.otf<\/td>\n<td>44,040<\/td>\n<td>27.34%<\/td>\n<td>27.40%<\/td>\n<td>27.34%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">Tallys_15.otf<\/td>\n<td>19,996<\/td>\n<td>17.96%<\/td>\n<td>17.32%<\/td>\n<td>17.23%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">YanoneKaffeesatz-Bold.otf<\/td>\n<td>55,568<\/td>\n<td>60.58%<\/td>\n<td>60.14%<\/td>\n<td>60.29%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">YanoneKaffeesatz-Light.otf<\/td>\n<td>58,328<\/td>\n<td>57.73%<\/td>\n<td>57.70%<\/td>\n<td>58.08%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">YanoneKaffeesatz-Regular.otf<\/td>\n<td>58,528<\/td>\n<td>57.83%<\/td>\n<td>57.79%<\/td>\n<td>58.18%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">YanoneKaffeesatz-Thin.otf<\/td>\n<td>58,292<\/td>\n<td>58.27%<\/td>\n<td>58.25%<\/td>\n<td>58.66%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">pykes_peak_zero.otf<\/td>\n<td>122,832<\/td>\n<td>73.74%<\/td>\n<td>73.21%<\/td>\n<td>73.32%<\/td>\n<\/tr>\n<tr>\n<td class=\"fontname\">vollkorn.otf<\/td>\n<td>30,065<\/td>\n<td>16.27%<\/td>\n<td>16.54%<\/td>\n<td>16.47%<\/td>\n<\/tr>\n<tr class=\"average\">\n<td colspan=\"2\">Average: <\/td>\n<td>45.40%<\/td>\n<td>45.40%<\/td>\n<td>45.68%<\/td>\n<\/tr>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Since my previous post on @font-face and gzipping, Paul Irish has asked (and so has @KLTF) what about WOFF? WOFF is a newer format with built in compression and ability to store meta data. So I took this stnf2woff utility and converted all the TTF and OTF files from my previous tests to WOFF. Below [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,262,43],"tags":[370,397,264,382],"_links":{"self":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/872"}],"collection":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/comments?post=872"}],"version-history":[{"count":0,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/872\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/media?parent=872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/categories?post=872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/tags?post=872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}