<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>dimitrivanheucke.be &#187; web</title>
	<atom:link href="http://dimitrivanheucke.be/blog/category/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://dimitrivanheucke.be/blog</link>
	<description>you&#039;re gonna be remembered for the things you say and do</description>
	<lastBuildDate>Thu, 20 May 2010 12:36:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>Google font API</title>
		<link>http://dimitrivanheucke.be/blog/2010/05/google-font-api/</link>
		<comments>http://dimitrivanheucke.be/blog/2010/05/google-font-api/#comments</comments>
		<pubDate>Thu, 20 May 2010 12:22:41 +0000</pubDate>
		<dc:creator>Dimitri</dc:creator>
				<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://dimitrivanheucke.be/blog/?p=239</guid>
		<description><![CDATA[Yesterday, Google made some announcements. You've probably heard all about it, so no need to go over them all... But I would like to look into the new Google font API. ]]></description>
			<content:encoded><![CDATA[<p>Yesterday, <a href="http://googleblog.blogspot.com/2010/05/google-io-2010-day-1-more-powerful-web.html">Google made some announcements</a>. You&#8217;ve probably heard all about it, so no need to go over them all&#8230;</p>
<p>But I would like to look into the new <a href="http://code.google.com/apis/webfonts/">Google font API</a>. </p>
<p>The main problem with mechanisms like <a href="http://cufon.shoqolate.com/generate/">Cufon</a> and <a href="http://www.mikeindustries.com/blog/sifr">SiFR</a> is the legality of using the fonts. Most fonts dont come with a license to use them on the web. Therefore Google is building a library of new, open source fonts. You can use these fonts on your site, but also download them and use them in any work you like. Including print.</p>
<p>You can find all Google fonts in the <a href="http://code.google.com/webfonts">Google WebFont directory</a>.</p>
<p>Besides the WebFont directory, Google also serves you fonts through their new Google Font API:</p>
<blockquote><p>
The Google Font API helps you add web fonts to any web page.<br />
Benefits of the Google Font API include:</p>
<ul>
<li>A choice of high quality open source fonts.</li>
<li>Works in most browsers.</li>
<li>Extremely easy to use.</li>
</ul>
</blockquote>
<p>Well, the choice of fonts is still very limited, but this will probably expand rapidly. The other claims are usually incompatible. This time it looks true.</p>
<p>Lets do a quick test. To use one of the new Google fonts in your project, just link to the @font-face definition and you&#8217;re ready to go.</p>
<pre class="brush: bash; title: ;">
&lt;link href='http://fonts.googleapis.com/css?family=Reenie+Beanie'
	rel='stylesheet' type='text/css'&gt;
&lt;style&gt;
	.googlefontapi {
		font-family: 'Reenie Beanie', arial, serif;
		font-size: 32px;
	}
&lt;/style&gt;
&lt;div class=&quot;googlefontapi&quot;&gt;Type through Google font API!&lt;/div&gt;</pre>
<p>This css should result in this:</p>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>.googlefontapi { font-family: 'Reenie Beanie', arial, serif; font-size: 32px; margin-bottom:25px; }</style>
<div class="googlefontapi">Type through Google font API!</div>
<p>To use multiple types on your site, you can use mutiple link tags, but this would increase your http-request count. You can get more @font-face definitions in one request, just compose your link url like this:</p>
<pre class="brush: bash; title: ;">
&lt;link href='http://fonts.googleapis.com/css?family=Reenie+Beanie|Droid+Sans'
	rel='stylesheet' type='text/css'&gt;
</pre>
<p><strong>What does it do?</strong><br />
Because most browsers implement @font-face slightly different, so google serves the right format for the browser of your user.<br />
Cache headers for these files are set to the maximum so it will be very likely popular fonts can be loaded from the browsers cache.</p>
<p>If you want to use your Typekit fonts, you can use the <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">Google WebFont Loader</a>. This is a JavaScript library that gives you more control over the font loading and allows you to use other font-providers. </p>
<p><em><strong>Note</strong>: don&#8217;t use font-face for your large texts. Rendering in IE stays ugly. For bigger things like titles, it&#8217;s perfectly usable&#8230;</em></p>
]]></content:encoded>
			<wfw:commentRss>http://dimitrivanheucke.be/blog/2010/05/google-font-api/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

