{"id":715,"date":"2011-05-13T12:07:01","date_gmt":"2011-05-13T17:07:01","guid":{"rendered":"http:\/\/somadesign.ca\/?p=715"},"modified":"2011-05-13T12:07:01","modified_gmt":"2011-05-13T17:07:01","slug":"fontfriend-3-1-loves-google-webfonts","status":"publish","type":"post","link":"http:\/\/somadesign.ca\/2011\/fontfriend-3-1-loves-google-webfonts\/","title":{"rendered":"FontFriend 3.1 Loves Google&nbsp;Webfonts"},"content":{"rendered":"<p>I\u2019ve had a num\u00adber of requests to bet\u00adter inte\u00adgrate <a href=\"http:\/\/www.google.com\/webfonts\">Google Web\u00adfonts<\/a> into <a href=\"http:\/\/somadesign.ca\/projects\/fontfriend\/\">Font\u00adFriend<\/a>. They keep adding all these great fonts that any\u00adone can use for free, and should be part of a tool like Font\u00adFriend. The trou\u00adble was that they did\u00adn\u2019t have an <span class=\"caps\">API<\/span>, mak\u00ading it dif\u00adfi\u00adcult. More on that lat\u00ader, because I got it working:<\/p>\n<div id=\"attachment_716\" style=\"width: 450px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-716\" class=\"size-full wp-image-716\" title=\"fontfriend-goes-google\" src=\"http:\/\/somadesign.ca\/wp-content\/uploads\/2011\/05\/fontfriend-goes-google.png\" alt width=\"440\" height=\"266\" srcset=\"http:\/\/somadesign.ca\/wp-content\/uploads\/2011\/05\/fontfriend-goes-google.png 440w, http:\/\/somadesign.ca\/wp-content\/uploads\/2011\/05\/fontfriend-goes-google-360x217.png 360w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\"><p id=\"caption-attachment-716\" class=\"wp-caption-text\">Just pick a font from the drop\u00addown&nbsp;list<\/p><\/div>\n<p>Invoke the book\u00admarklet as usu\u00adal (it\u2019s always up to date), and you\u2019ll see a fan\u00adcy new Google Web\u00adfonts drop\u00addown. Pick a font and it\u2019ll appear in the cus\u00adtom Font Fam\u00adi\u00adlies list. All vari\u00adants (all weights, both roman <span class=\"amp\">&amp;<\/span> ital\u00adic) are auto\u00admat\u00adi\u00adcal\u00adly pulled in.<\/p>\n<p>How was I able to do this with\u00adout an <span class=\"caps\">API<\/span>? <a title=\"Yahoo Query Language\" href=\"http:\/\/developer.yahoo.com\/yql\/\"><span class=\"caps\">YQL<\/span><\/a> to the res\u00adcue, which it turns out is awe\u00adsome for tasks like this. But, after post\u00ading a <a href=\"http:\/\/dribbble.com\/shots\/167307-FontFriend-Goes-Google\">teas\u00ader on Dribb\u00adble<\/a>, <a href=\"http:\/\/www.impallari.com\/\">Pablo Impal\u00adlari<\/a> hooked me up with the Google Web\u00adfonts teams, who will have an <span class=\"caps\">API<\/span> for this in place soon. I debat\u00aded wait\u00ading to release until then, but I\u2019d already done the work, so why not let every\u00adone play already?<\/p>\n<p>One oth\u00ader lit\u00adtle nugget: Font\u00adFriend will detect already-embed\u00added Google Web\u00adfonts on your page and throw them into the cus\u00adtom fonts list auto\u00admat\u00adi\u00adcal\u00adly. See a <a href=\"http:\/\/somadesign.ca\/demos\/fontfriend\/google.html\">demo of Google Web\u00adfont detec\u00adtion<\/a>.<\/p>\n<p>Final\u00adly, after <a href=\"http:\/\/twitter.com\/mattwiebe\/statuses\/57994815815696384\">tweet\u00ading<\/a> about it, &nbsp;I\u2019ve had rep\u00adre\u00adsen\u00adta\u00adtives from a few web\u00adfont ser\u00advices reach out to me about bet\u00adter inte\u00adgra\u00adtion once they get their APIs in place. There should be more ways to play in the future!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve had a num\u00adber of requests to bet\u00adter inte\u00adgrate Google Web\u00adfonts into Font\u00adFriend. They keep adding all these great fonts that any\u00adone can use for free, and should be part of a tool like Font\u00adFriend. The trou\u00adble was that they did\u00adn\u2019t have an <span class=\"caps\">API<\/span>, mak\u00ading it dif\u00adfi\u00adcult. More on that lat\u00ader, because I got&nbsp;it&nbsp;[\u2026]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[9],"tags":[91,54,72,38,116],"class_list":["post-715","post","type-post","status-publish","format-standard","hentry","category-news","tag-font-face","tag-bookmarklet","tag-fontfriend","tag-release","tag-webfonts"],"_links":{"self":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":3,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":721,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts\/715\/revisions\/721"}],"wp:attachment":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}