{"id":1407,"date":"2010-05-20T13:58:45","date_gmt":"2010-05-20T17:58:45","guid":{"rendered":"https:\/\/www.highedwebtech.com\/?p=1407"},"modified":"2013-10-18T15:23:50","modified_gmt":"2013-10-18T19:23:50","slug":"google-enters-web-type-game-with-google-font-api","status":"publish","type":"post","link":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/","title":{"rendered":"Google enters web type game with Google Font API"},"content":{"rendered":"<p><img decoding=\"async\" style=\"float: right; padding: 10px;\" alt=\"Google Font Logo\" src=\"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif\" \/>Type on the web has been a subject of great interest to web developers and designers for many years. For the most part, we&#8217;ve been stuck with the default serif and sans-serif fonts that come with operating systems such as Arial, Georgia, Verdana and so on. These fonts have worked okay, but compared to print, it was difficult to easily create compelling typography on the web.<\/p>\n<p>There are ways to do interesting type on the web. I&#8217;ve tried many font solutions for the web, including <a href=\"http:\/\/www.mikeindustries.com\/blog\/sifr\" target=\"_blank\" rel=\"nofollow\">sIFR<\/a>, <a href=\"http:\/\/cufon.shoqolate.com\/generate\/\" rel=\"nofollow\" target=\"_blank\">Cufon<\/a>, and <a href=\"http:\/\/typekit.com\/\" target=\"_blank\" rel=\"nofollow\">TypeKit<\/a>. Now, Google has entered the web fonts game with their <a href=\"http:\/\/code.google.com\/webfonts\" target=\"_blank\" rel=\"nofollow\">Google Font Director<\/a> and Google\u00a0<a href=\"http:\/\/code.google.com\/apis\/webfonts\/\" target=\"_blank\" rel=\"nofollow\">Font API<\/a>.<\/p>\n<p>Of all the solutions out there, I&#8217;ve found Google&#8217;s to be the easiest and fastest to implement. All you need to do is call Google&#8217;s special CSS file with the font you want to use, and add it a call to the font in your CSS file. That&#8217;s it. Seriously. I changed the H1 tags on this site using Google&#8217;s method and it took less than a minute from start to finish.<\/p>\n<p>Google has launched their offering with 18 fonts &#8211; both serif and sans-serif in a variety of weights. If you&#8217;re going for a more serifed type like Georgia or Trajan, you may be interested by the <a href=\"http:\/\/code.google.com\/webfonts\/family?family=OFL+Sorts+Mill+Goudy+TT\" target=\"_blank\" rel=\"nofollow\">OFL Sorts Mill Goudy<\/a> or <a href=\"http:\/\/code.google.com\/webfonts\/family?family=Old+Standard+TT\" target=\"_blank\" rel=\"nofollow\">Old Standard TT<\/a>. If you need a sans-serif type, there is <a href=\"http:\/\/code.google.com\/webfonts\/family?family=Yanone+Kaffeesatz\" target=\"_blank\" rel=\"nofollow\">Yanone Kaffeesatz<\/a>, <a href=\"http:\/\/code.google.com\/webfonts\/family?family=Molengo\" target=\"_blank\" rel=\"nofollow\">Molengo<\/a> and <a href=\"http:\/\/code.google.com\/webfonts\/family?family=Cantarell\" target=\"_blank\" rel=\"nofollow\">Cantarell<\/a>.<\/p>\n<p>To get started, you select the fonts you want to use (one or several), the font weight(s) you want, and then call Google&#8217;s CSS. Here&#8217;s an example:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;link href=&quot;http:\/\/fonts.googleapis.com\/css?family=Josefin+Sans+Std+Light&quot; rel=&quot;stylesheet&quot; 2=&quot;type='text\/css'&gt;\r\n<\/pre>\n<p>That code will call only Josefin Sans Std Light. If you&#8217;d like additional fonts, you can tack them on. In your CSS file for your page, you call the font this way:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nh1 { font-family: 'Josefin Sans Std Light', arial, serif; }\r\n<\/pre>\n<p>And that&#8217;s it. You aren&#8217;t limited to just headers, you can apply a special font to any tag you like.<\/p>\n<p>Google has a nice <a href=\"http:\/\/code.google.com\/webfonts\/preview\" target=\"_blank\" rel=\"nofollow\">font previewer<\/a> that you can use to not only see what your text will look like, you can also apply some CSS effects, such as transforms, decorations and letter\/word spacing to see the effect on a particular typeface. What&#8217;s also nice is Google will give you the appropriate CSS for the exact look and feel you like. Here&#8217;s an example:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\nbody {\r\n  font-family: &quot;Lobster&quot;, serif;\r\n  font-size: 63pt;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  text-shadow: none;\r\n  text-decoration: none;\r\n  text-transform: none;\r\n  letter-spacing: 0em;\r\n  word-spacing: -0.058em;\r\n  line-height: 1;\r\n}\r\n<\/pre>\n<p>It will be interesting to see if Google adds more typeface choices over the coming months.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Type on the web has been a subject of great interest to web developers and designers for many years.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[22,37],"tags":[374,792],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Google enters web type game with Google Font API - HighEdWebTech<\/title>\n<meta name=\"description\" content=\"Google Font API is a boon for designers and developers alike.\" \/>\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.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google enters web type game with Google Font API - HighEdWebTech\" \/>\n<meta property=\"og:description\" content=\"Google Font API is a boon for designers and developers alike.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\" \/>\n<meta property=\"og:site_name\" content=\"HighEdWebTech\" \/>\n<meta property=\"article:published_time\" content=\"2010-05-20T17:58:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-10-18T19:23:50+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:site\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\"},\"author\":{\"name\":\"Mike\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"headline\":\"Google enters web type game with Google Font API\",\"datePublished\":\"2010-05-20T17:58:45+00:00\",\"dateModified\":\"2013-10-18T19:23:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\"},\"wordCount\":471,\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif\",\"keywords\":[\"Google Font API\",\"Web type\"],\"articleSection\":[\"Design\",\"Google\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\",\"url\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\",\"name\":\"Google enters web type game with Google Font API - HighEdWebTech\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif\",\"datePublished\":\"2010-05-20T17:58:45+00:00\",\"dateModified\":\"2013-10-18T19:23:50+00:00\",\"description\":\"Google Font API is a boon for designers and developers alike.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage\",\"url\":\"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif\",\"contentUrl\":\"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.highedwebtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google enters web type game with Google Font API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.highedwebtech.com\/#website\",\"url\":\"https:\/\/www.highedwebtech.com\/\",\"name\":\"HighEdWebTech\",\"description\":\"Web &amp; Marketing for Education &amp; Nonprofits\",\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.highedwebtech.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"width\":595,\"height\":128,\"caption\":\"Mike\"},\"logo\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/mikerichwalsky\/\",\"https:\/\/twitter.com\/mrichwalsky\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google enters web type game with Google Font API - HighEdWebTech","description":"Google Font API is a boon for designers and developers alike.","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.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/","og_locale":"en_US","og_type":"article","og_title":"Google enters web type game with Google Font API - HighEdWebTech","og_description":"Google Font API is a boon for designers and developers alike.","og_url":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/","og_site_name":"HighEdWebTech","article_published_time":"2010-05-20T17:58:45+00:00","article_modified_time":"2013-10-18T19:23:50+00:00","og_image":[{"url":"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif"}],"author":"Mike","twitter_card":"summary_large_image","twitter_creator":"@mrichwalsky","twitter_site":"@mrichwalsky","twitter_misc":{"Written by":"Mike","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#article","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/"},"author":{"name":"Mike","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"headline":"Google enters web type game with Google Font API","datePublished":"2010-05-20T17:58:45+00:00","dateModified":"2013-10-18T19:23:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/"},"wordCount":471,"publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage"},"thumbnailUrl":"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif","keywords":["Google Font API","Web type"],"articleSection":["Design","Google"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/","url":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/","name":"Google enters web type game with Google Font API - HighEdWebTech","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage"},"thumbnailUrl":"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif","datePublished":"2010-05-20T17:58:45+00:00","dateModified":"2013-10-18T19:23:50+00:00","description":"Google Font API is a boon for designers and developers alike.","breadcrumb":{"@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#primaryimage","url":"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif","contentUrl":"http:\/\/www.google.com\/images\/icons\/feature\/font_api-128.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.highedwebtech.com\/2010\/05\/20\/google-enters-web-type-game-with-google-font-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.highedwebtech.com\/"},{"@type":"ListItem","position":2,"name":"Google enters web type game with Google Font API"}]},{"@type":"WebSite","@id":"https:\/\/www.highedwebtech.com\/#website","url":"https:\/\/www.highedwebtech.com\/","name":"HighEdWebTech","description":"Web &amp; Marketing for Education &amp; Nonprofits","publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.highedwebtech.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","width":595,"height":128,"caption":"Mike"},"logo":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.instagram.com\/mikerichwalsky\/","https:\/\/twitter.com\/mrichwalsky"]}]}},"_links":{"self":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/1407"}],"collection":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":0,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}