<?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>Ladysign Dev Blog &#187; embedding</title>
	<atom:link href="http://www.ladysign-apps.com/blog/tag/embedding/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ladysign-apps.com/blog</link>
	<description>Girls can code.</description>
	<lastBuildDate>Mon, 12 Dec 2011 16:58:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Embedding exotic fonts to your page</title>
		<link>http://www.ladysign-apps.com/blog/code/css/embedding-exotic-fonts-to-your-page/</link>
		<comments>http://www.ladysign-apps.com/blog/code/css/embedding-exotic-fonts-to-your-page/#comments</comments>
		<pubDate>Fri, 26 Jun 2009 12:48:51 +0000</pubDate>
		<dc:creator>Lee</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[cufon]]></category>
		<category><![CDATA[embedding]]></category>
		<category><![CDATA[font-face]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[protection]]></category>

		<guid isPermaLink="false">http://ladysign-apps.com/blog/?p=773</guid>
		<description><![CDATA[<p><strong>Difficulty:</strong> 2 out of 5 stars</p>
<p>We can wait for full browser support of the CSS property: @font-face to finally embed your exotic/unique fonts in your we[......]</p><p class='read-more'><a href='http://www.ladysign-apps.com/blog/code/css/embedding-exotic-fonts-to-your-page/'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p><strong>Difficulty:</strong> 2 out of 5 stars</p>
<p>We can wait for full browser support of the CSS property: @font-face to finally embed your exotic/unique fonts in your webpage. Or you can use several technique&#8217;s.<br />
One technique is called: <a href="http://www.mikeindustries.com/blog/archive/2005/02/sifr-2.0-release-candidate-4">sIFR &#8211; Scalable Inman Flash Replacement</a>, which is replacing your text to Flash pieces, which can load the unique font. However, you need a Flash plugin installed on the clientside.</p>
<p>Today, I will show you a different technique, which is using a Javascript framework to replace your text with images of your font. This font-embed technique is supported by your modern browser aswell with IE6.<br />
1 more thing; you can&#8217;t select the replaced text with Firefox &#038; IE. (With Google Chrome you can!).</p>
<p>Make sure you have a TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) or PostScript version of your font. Also this font should support embed modification. Usually free fonts are having such a change protection. (since you just display this font as an image &#8211; *kuch* <a href="http://www.demonoid.com/files/details/1927610/775222/">embed.exe</a> can probably help you.).<br />
Need to convert your font to true type? &#8211; Here&#8217;s your solution; <a href="http://onlinefontconverter.com/"> an online font converter</a>.</p>
<p>Now go download the <a href="http://cufon.shoqolate.com/generate/">Cufón</a> javascript framework,<br />
save it in your webpage javascript folder. (I renamed this file to fonts.js). Then implement it into the <head> of your page:</p>
<pre class="brush: xml; title: ;">&lt;script src=&quot;_js/fonts.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<p>On the <a href="http://cufon.shoqolate.com/generate/">Cufón</a> site, use the generator to setup your custom javascript font. &#8211; Open the font in the Regular typeface box. (For Windows users, you should drag the fonts out of your fonts folder, and save it somewhere else on your disk.)<br />
The default settings on the Cufón site will be good enough if you just use plain English on your site.<br />
Don&#8217;t forget to check the EULA and the terms checkboxes and download.</p>
<p>I copied my custom font javascript code, into the same framework javascript (fonts.js):</p>
<pre class="brush: jscript; title: ;">Cufon.registerFont({&quot;w&quot;:177,&quot;face&quot;:{&quot;font-family&quot;:&quot;Name&quot;,&quot;font-weight&quot;:400,&quot;font-stretch&quot;:&quot;normal&quot;,&quot;units-per-em&quot;:&quot;360&quot;,&quot;panose-1&quot;:&quot;0 0 4 0 0 0 0 0 0 0&quot;,&quot;ascent&quot;:&quot;288&quot;,&quot;descent&quot;:&quot;-72&quot;,&quot;cap-height&quot;:&quot;19&quot;,&quot;bbox&quot;:&quot;-532.15 -402.008 684 323&quot;,&quot;underline-thickness&quot;:&quot;7.2&quot;,&quot;underline-position&quot;:&quot;-44.28&quot;,&quot;unicode-range&quot;:&quot;U+0020-U+007E&quot;},&quot;glyphs&quot;:{&quot; &quot;:{&quot;w&quot;:188,&quot;k&quot;:{&quot;q&quot;:-52}},&quot;!&quot;:{&quot;d&quot;:&quot;...}}}});</pre>
<p>And then I added the line to replace all the text with the class name: &#8220;handwritten&#8221; to my new unique font:</p>
<pre class="brush: jscript; title: ;">Cufon.replace('.handwritten', {});</pre>
<p>That did the trick. I was amazed!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ladysign-apps.com/blog/code/css/embedding-exotic-fonts-to-your-page/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

