{"id":203,"date":"2010-07-04T11:19:58","date_gmt":"2010-07-04T10:19:58","guid":{"rendered":"http:\/\/local.sandjam.co.uk\/?p=203"},"modified":"2018-08-03T14:00:49","modified_gmt":"2018-08-03T13:00:49","slug":"google-dips-its-toe-into-font-libraries","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2010\/07\/google-dips-its-toe-into-font-libraries\/","title":{"rendered":"Google dips its toe into font libraries"},"content":{"rendered":"

Finding a way to get non-standard fonts into web pages has always been a challenge. A designer will produce a beautiful layout using fonts that they have carefully chosen, then the developer sighs and either just converts it to Arial and hopes no one notices, or chooses a method of font substitution.<\/p>\n

Graphics<\/h2>\n

Cutting up graphics and embedding them as images is time consuming, a nightmare to update and doesn’t allow for dynamic text. It’s the best way to make sure your site looks exactly like the design you’re working from, but don’t let an SEO guy see it.<\/p>\n

Flash<\/h2>\n

I’ve used Flash based font replacement with Sifr<\/a> in the past. It always felt clunky though, I worry about the overheads of using lots of Flash font replacement on a page and you risk it failing for browsers which don’t support Flash like iPhones.<\/p>\n

Javascript<\/h2>\n

The new families of Javascript based font replacement are really clever. Cufon<\/a>, for example, lets you upload a font file which it converts into path information which it then uses to draw the fonts using the HTML 5 <canvas> element.<\/p>\n

Google love their Javascript apis so its not surprising that they’ve jumped on the bandwagon over at the Google font directory. Google are a bit more concerned about copyright<\/a> though and so they provide a\u00a0 small selected of open source fonts rather than allowing you to upload any font.<\/p>\n

Let’s have a go at an example:<\/p>\n

\r\n\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/fonts.googleapis.com\/css?family=Tangerine\">\r\n\r\n<style>\r\np.tangerine { font-family: 'Tangerine', serif; font-size: 48px; }\r\n<\/style>\r\n\r\n<p class=\"tangerine\">Sandjam goes Tangerine!<\/p>\r\n\r\n<\/pre>\n
Produces:<\/p>\n
 <\/p>\n
Sandjam goes tangerine<\/p>\n
It works! Thanks Google, now just build up your font collection and I’m in.<\/p>\n","protected":false},"excerpt":{"rendered":"
Google releases a beta version of its font directory and API<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[28,15,14],"class_list":["post-203","post","type-post","status-publish","format-standard","hentry","category-code","tag-fonts","tag-google-maps","tag-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":14,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":1050,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/203\/revisions\/1050"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}