<?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; css</title>
	<atom:link href="http://www.giordanopiazza.com/blog/tag/css/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>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>
	</channel>
</rss>

