<?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>distortion &#187; font</title>
	<atom:link href="http://www.giordanopiazza.com/blog/tag/font/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.giordanopiazza.com/blog</link>
	<description>gyo goes blogging</description>
	<lastBuildDate>Sun, 20 Jun 2010 11:05:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2</generator>
		<item>
		<title>WhatTheFont for iPhone</title>
		<link>http://www.giordanopiazza.com/blog/design/whatthefont-for-iphone/</link>
		<comments>http://www.giordanopiazza.com/blog/design/whatthefont-for-iphone/#comments</comments>
		<pubDate>Sun, 31 Jan 2010 18:26:55 +0000</pubDate>
		<dc:creator>gyo</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[app]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[whatthefont]]></category>

		<guid isPermaLink="false">http://www.giordanopiazza.com/blog/?p=201</guid>
		<description><![CDATA[Yes, I've got a new shiny iPhone for christmas. But I'm not here to write about it. Instead I'd like to give some focus to the application WhatTheFont for iPhone. Everyone knows about WhatTheFont (click if you don't), but the iPhone application is just so cool. Shoot a picture, select the text, done. I even [...]]]></description>
			<content:encoded><![CDATA[<p>Yes, I've got a new shiny iPhone for christmas. But I'm not here to write about it.<br />
Instead I'd like to give some focus to the application <a href="http://new.myfonts.com/WhatTheFont/iPhone/" target="_blank">WhatTheFont for iPhone</a>.<br />
Everyone knows about <a href="http://new.myfonts.com/WhatTheFont/" target="_blank">WhatTheFont</a> (click if you don't), but the iPhone application is just so cool.</p>
<p>Shoot a picture, select the text, done.</p>
<p>I even use it on my monitor, and it works!</p>
<p>Well... enjoy!  <img src='http://www.giordanopiazza.com/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><a href="http://new.myfonts.com/WhatTheFont/iPhone/" target="_blank">Download WhatTheFont for iPhone</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.giordanopiazza.com/blog/design/whatthefont-for-iphone/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Custom fonts embedding: no hacks, no Javascript, no Flash.</title>
		<link>http://www.giordanopiazza.com/blog/web-design/custom-fonts-embedding-no-hacks-no-javascript-no-flash/</link>
		<comments>http://www.giordanopiazza.com/blog/web-design/custom-fonts-embedding-no-hacks-no-javascript-no-flash/#comments</comments>
		<pubDate>Thu, 03 Dec 2009 23:08:24 +0000</pubDate>
		<dc:creator>gyo</dc:creator>
				<category><![CDATA[Web-Design]]></category>
		<category><![CDATA[@font-face]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[fonts embed]]></category>
		<category><![CDATA[text-replacement]]></category>

		<guid isPermaLink="false">http://www.giordanopiazza.com/blog/?p=168</guid>
		<description><![CDATA[How to use custom fonts without sIFR, or any Javascript/Flash hacks? Here is a CSS-only solution: @font-face You can see a demo preview here, or download the files. Introduction We need to convert our preferred font into 3 different formats, to be sure it will be properly displayed on all the Browsers/OS flavours: TTF or [...]]]></description>
			<content:encoded><![CDATA[<p>How to use custom fonts without sIFR, or any Javascript/Flash hacks?<br />
Here is a CSS-only solution<strong>: @font-face</strong></p>
<p>You can see a <a href="http://www.giordanopiazza.com/candybox/web-fonts-embedding/" target="_blank">demo preview here</a>, or <a href="http://www.giordanopiazza.com/candybox/web-fonts-embedding/web_fonts_embedding.zip">download the files</a>.</p>
<p><span style="font-size: medium;"><strong>Introduction</strong><br />
</span>We need to convert our preferred font into 3 different formats, to be sure it will be properly displayed on all the Browsers/OS flavours<strong>:</strong></p>
<p><strong>TTF </strong>or <strong>OTF </strong>- FireFox 3.5, Safari, Opera<br />
<strong>EOT</strong> - Internet Explorer 4+ <span style="color: #999999;">(Yes, it works on IE too...)</span><strong><br />
SVG - </strong>Chrome, iPhone</p>
<p>To convert the fonts to TTF/EOT/SVG it's very easy, we'll just need one tool (or more depending on the source format).</p>
<p><strong><span style="font-size: medium;">The tools</span></strong><br />
<a id="i91l" title="Font Generator" href="http://www.fontsquirrel.com/fontface/generator" target="_blank"><strong>FontSquirrel - Font Generator</strong></a><strong><span style="font-size: medium;"><br />
</span></strong>This tool is amazing. It converts a TTF/OTF file to the different formats we need to embed a font in a website.<br />
It also compresses the font allowing us to choose the characters we need, stripping out all the others, resulting in a light version of the font. <a href="http://www.fontsquirrel.com/fontface/generator" target="_blank">go to the website</a></p>
<p><strong><a id="f7_j" title="Font converter" href="http://onlinefontconverter.com/" target="_blank">Font converter</a><br />
</strong>Another great online tool to convert fonts to/from different formats (.dfont, .ttf, .eot, .pfb, .otf). <a href="http://onlinefontconverter.com/" target="_blank">go to the website</a><br />
<strong><br />
<a id="bbbw" title="Font Forge" href="http://fontforge.sourceforge.net/">Font Forge</a><br />
</strong>The opensource font authoring tool. <a href="http://fontforge.sourceforge.net/" target="_blank">go to the website</a></p>
<p>And now, let's get our hands dirty...</p>
<p><span style="font-size: medium;"><strong>The Code</strong></span><br />
Now that we have the files we need (<strong>TTF</strong> or <strong>OTF</strong>, <strong>EOT</strong> and <strong>SVG</strong>), we're ready to embed the font in our website.<br />
Here is the CSS code:</p>
<pre lang="css">
@font-face {
   font-family: 'Museo500';
   src: url('Museo500-Regular.eot');
   src: local('Museo 500'), local('Museo-500'), url('Museo500-Regular.ttf') format('truetype'), url('Museo500-Regular.svg#Museo-500') format('svg');
}
</pre>
<p>With <strong>font-family</strong>, we define the name to use in our CSS rules:</p>
<pre  lang="css">
h2 { font: 38px '<strong>Museo500</strong>', Arial, sans-serif; }
</pre>
<p>As you can see, we treat "Museo500" like any other font we normally use in CSS; there are also the fallback fonts, that will be used just in case something goes wrong. Done.</p>
<p><strong><span style="font-size: medium;">Some notes</span></strong><br />
If you want to use custom fonts then this is a hard match to win for sIFR &amp; Friends.</p>
<p>A negative point is that the Browser will show the fallback font until the custom one is loaded; on my humble ADSL connection it's very quick, but still noticeable.<br />
Though, once the font files are cached it doesn't happen anymore.</p>
<p>It's true that many users can't upgrade Browsers because of restrictions on their systems... well, I bet they are running Windows, and @font-face works on Internet-Explorer; while if they are on a Mac it works on Safari.<br />
The only "black-sheep" could be (surprisingly) FireFox, which only supports TTF/OTF since version 3.5 (the new version 3.6 also adds support for WOFF font files).</p>
<p>Last but not least, make sure the font's license gives you permissions to embed it in a website.</p>
<p><span style="font-size: medium;"><strong>Conclusion</strong></span><br />
Web fonts embedding is becoming more and more supported, and I'm sure it will be soon a common practice. So, why not to start now?<br />
This is not the latest trick to use custom fonts in websites, this is the future of web typography.</p>
<p>Spread the voice.</p>
<p><span style="font-size: medium;"><strong>Related links</strong></span><br />
I made a light version of the subject, here you can find the most extensive and complete resources: <a id="r.4-" title="Paul Irish" href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Paul Irish</a> and <a id="k756" title="Jonathan Snook" href="http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master">Jonathan Snook</a>.<br />
For my example I've chosen the beautiful font "Museo" by <a id="jtz8" title="Jos Buivenga's exljbris Font Foundry" href="http://www.josbuivenga.demon.nl/">Jos Buivenga's exljbris Font Foundry</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.giordanopiazza.com/blog/web-design/custom-fonts-embedding-no-hacks-no-javascript-no-flash/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>6 Flash Essentials</title>
		<link>http://www.giordanopiazza.com/blog/flash/6-flash-essentials/</link>
		<comments>http://www.giordanopiazza.com/blog/flash/6-flash-essentials/#comments</comments>
		<pubDate>Sun, 08 Mar 2009 00:14:52 +0000</pubDate>
		<dc:creator>gyo</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Web-Design]]></category>
		<category><![CDATA[deeplink]]></category>
		<category><![CDATA[essentials]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[player]]></category>
		<category><![CDATA[upload]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://www.giordanopiazza.com/blog/?p=46</guid>
		<description><![CDATA[A selection of six Javascript/Flash libraries to solve common tasks in the tough world of web-design.
Here is a quick list of the essential tools to use with Flash]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-67" title="flash_essentials" src="http://www.giordanopiazza.com/blog/wp-content/uploads/2009/03/flash_essentials.gif" alt="flash_essentials" width="150" height="63" />A selection of six Javascript/Flash libraries to solve common tasks in the tough world of web-design.<br />
Here is a quick list of the essential tools to use with Flash:</p>
<h3><a href="http://flashden.net/videomaru/">VideoMaru</a></h3>
<p>Easy and powerful Flash video player, it let's you to create interfaces in minutes: just draw something, convert it to MovieClip and set an instance name (like play, stop, pause...).</p>
<p><a href="http://flashden.net/videomaru/"><img class="alignnone size-full wp-image-49" title="flash_essentials" src="http://www.giordanopiazza.com/blog/wp-content/uploads/2009/03/flash_essentials.jpg" alt="flash_essentials" width="391" height="199" /><br />
</a></p>
<hr />
<h3><a href="http://swfupload.org/"><br />
SWFUpload</a></h3>
<p>Cool if you need to show a progress bar during uploads.</p>
<p><a href="http://swfupload.org/"><img class="alignnone size-full wp-image-50" title="swfupload" src="http://www.giordanopiazza.com/blog/wp-content/uploads/2009/03/swfupload.jpg" alt="swfupload" width="391" height="125" /><br />
</a></p>
<hr />
<h3><a href="http://www.mikeindustries.com/blog/sifr/"><br />
sIFR</a></h3>
<p>Use any font in your website with this. It substitutes defined html tags with a Flash SWF file displaying the embedded font.</p>
<p><a href="http://www.mikeindustries.com/blog/sifr/"><img class="size-full wp-image-52 alignnone" title="logo_sifr2" src="http://www.giordanopiazza.com/blog/wp-content/uploads/2009/03/logo_sifr2.gif" alt="logo_sifr2" width="192" height="116" /><br />
</a></p>
<hr />
<h3><a href="http://www.asual.com/swfaddress/"><br />
SWFAddress</a></h3>
<p>Deeplink for Flash. With this library you'll be able to link internal pages of a Flash website.</p>
<p><a href="http://www.asual.com/swfaddress/"><img class="alignnone size-full wp-image-53" title="asual-swfaddress" src="http://www.giordanopiazza.com/blog/wp-content/uploads/2009/03/asual-swfaddress.jpg" alt="asual-swfaddress" width="382" height="33" /><br />
</a></p>
<hr />
<h3><a href="http://swffit.millermedeiros.com/"><br />
SWFFit</a></h3>
<p>Automatically resize your Flash movie keeping it accessible independent of screen resolution.</p>
<p><a href="http://swffit.millermedeiros.com/"><img class="alignnone size-full wp-image-54" title="swffit_logo" src="http://www.giordanopiazza.com/blog/wp-content/uploads/2009/03/swffit_logo.gif" alt="swffit_logo" width="123" height="92" /><br />
</a></p>
<hr />
<h3><a href="http://www.sephiroth.it/weblog/archives/2006/10/flash_switcher_for_firefox.php"><br />
Flash Switcher</a></h3>
<p>Smart Firefox extension to quickly switch between different Flash Player versions.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.giordanopiazza.com/blog/flash/6-flash-essentials/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

