<?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>Web Style Press, Best Practices from all the Web, Build Better Websites &#187; style</title>
	<atom:link href="http://www.webstylepress.com/tag/style/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webstylepress.com</link>
	<description>Web VS Style</description>
	<lastBuildDate>Mon, 26 Dec 2011 10:35:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Use Any Font in Webpages As Text</title>
		<link>http://www.webstylepress.com/use-any-font-in-webpages-as-text/</link>
		<comments>http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments</comments>
		<pubDate>Fri, 23 Jan 2009 10:06:43 +0000</pubDate>
		<dc:creator>Hiroshi</dc:creator>
				<category><![CDATA[Advanced]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tricks]]></category>
		<category><![CDATA[essential]]></category>
		<category><![CDATA[facelift]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[smoothness]]></category>
		<category><![CDATA[style]]></category>
		<category><![CDATA[text]]></category>
		<category><![CDATA[typeface]]></category>

		<guid isPermaLink="false">http://www.webstylepress.com/?p=481</guid>
		<description><![CDATA[Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts. Instead of creating images or using flash just to show your site&#8217;s graphic text in the [...]<p><a href="http://www.webstylepress.com/use-any-font-in-webpages-as-text/">Use Any Font in Webpages As Text</a> is a post from: <a href="http://www.webstylepress.com">Web Style Press, Best Practices from all the Web, Build Better Websites</a></p>
]]></description>
			<content:encoded><![CDATA[<p><a rel="nofollow" target="_blank" href="http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/"><img src="http://www.webstylepress.com/wp-content/uploads/2009/01/use-any-fonts.png" alt="use-any-fonts" title="use-any-fonts" width="490" height="440" class="alignnone size-full wp-image-493" /></a></p>
<p>Now using javascript we can use any font in web page by using techniques such as <strong>Typeface</strong> and <strong>Facelift Image Replacement</strong> (or FLIR) or <strong>sIFR</strong>. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.</p>
<p>Instead of creating images or using flash just to show your site&#8217;s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.</p>
<p><span id="more-481"></span></p>
<p>Using FLIR to display any font in web page is even easy. <a rel="nofollow" target="_blank" href="http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/" target="_blank">Here</a> they have got complete instructions for just that.</p>
<p>I have tried type face method and here is its example to download.</p>
<p><a href='http://www.webstylepress.com/use-any-font-in-webpages-as-text/type-face/' rel='attachment wp-att-490' class="download">Type Face Example Download</a></p>
<p><strong>Related Resources </strong></p>
<p><a rel="nofollow" target="_blank" href="http://facelift.mawhorter.net/">Facelift</a><br />
<a rel="nofollow" target="_blank" href="http://novemberborn.net/">Novemberborn</a><br />
<a rel="nofollow" target="_blank" href="http://nettuts.com/javascript-ajax/how-to-implement-sifr3-into-your-website/">Implementing sIFR for smoothness of fonts in webpages</a><br />
<a rel="nofollow" target="_blank" href="http://typeface.neocracy.org">http://typeface.neocracy.org</a><br />
<a rel="nofollow" target="_blank" href="http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/">http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/</a></p>
<p><a href="http://www.webstylepress.com/use-any-font-in-webpages-as-text/">Use Any Font in Webpages As Text</a> is a post from: <a href="http://www.webstylepress.com">Web Style Press, Best Practices from all the Web, Build Better Websites</a></p>
<h2  class="related_post_title">Related Posts</h2><ul class="related_post"><li><a href="http://www.webstylepress.com/lorem-ipsum-ready/" title="Lorem ipsum Ready to Use">Lorem ipsum Ready to Use</a></li><li><a href="http://www.webstylepress.com/change-image-opacity-easily-using-css-js/" title="Change Image Opacity Easily Using CSS or JS">Change Image Opacity Easily Using CSS or JS</a></li><li><a href="http://www.webstylepress.com/javascript-essentials-part-6/" title="Javascript Essentials Part 6">Javascript Essentials Part 6</a></li><li><a href="http://www.webstylepress.com/javascript-essentials-part-5/" title="Javascript Essentials Part 5">Javascript Essentials Part 5</a></li><li><a href="http://www.webstylepress.com/javascript-essentials-part-4/" title="Javascript Essentials Part 4">Javascript Essentials Part 4</a></li><li><a href="http://www.webstylepress.com/javascript-essentials-part-3/" title="Javascript Essentials Part 3">Javascript Essentials Part 3</a></li><li><a href="http://www.webstylepress.com/javascript-essentials-part-2/" title="Javascript Essentials Part 2">Javascript Essentials Part 2</a></li><li><a href="http://www.webstylepress.com/javascript-essentials-part-1/" title="Javascript Essentials Part 1">Javascript Essentials Part 1</a></li><li><a href="http://www.webstylepress.com/simple-rollover-swap-image/" title="Simple RollOver Swap Image">Simple RollOver Swap Image</a></li><li><a href="http://www.webstylepress.com/modern-font-styles-for-websites/" title="Modern Font Styles For Websites">Modern Font Styles For Websites</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to Gain Maximum from CSS</title>
		<link>http://www.webstylepress.com/css-maximum-benefits/</link>
		<comments>http://www.webstylepress.com/css-maximum-benefits/#comments</comments>
		<pubDate>Mon, 10 Nov 2008 09:13:35 +0000</pubDate>
		<dc:creator>Hiroshi</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[style]]></category>

		<guid isPermaLink="false">http://www.webstylepress.com/?p=364</guid>
		<description><![CDATA[CSS is a simple file which controls the visual appearance of a web page without compromising its structure. Why to use it and how to use it properly. If you don&#8217;t use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be [...]<p><a href="http://www.webstylepress.com/css-maximum-benefits/">How to Gain Maximum from CSS</a> is a post from: <a href="http://www.webstylepress.com">Web Style Press, Best Practices from all the Web, Build Better Websites</a></p>
]]></description>
			<content:encoded><![CDATA[<p>CSS is a simple file which controls the visual appearance of a web page without compromising its structure. Why to use it and how to use it properly. If you don&#8217;t use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite heavy. Fact is that we live in a busy world, and people will not wait more than 5 seconds for web page to load. Some web developers implement the CSS on wrong way. They write their CSS in HTML code of the page, like this:</p>
<p><span id="more-364"></span></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;html&gt;
&lt;head&gt; 
&lt;title&gt;My Page&lt;/title&gt;
&lt;style&gt;
A { font-family: Verdana; font-size:8pt; color:black; text-decoration:none } 
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;some content&lt;/body&gt;
&lt;/html&gt;</pre></div></div>

<p>Correct way is to link the external CSS file in the pages. i.e.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;link rel='stylesheet' href='css/styles.css' type='text/css' media='all' /&gt;</pre></div></div>

<p><a href="http://www.webstylepress.com/css-maximum-benefits/">How to Gain Maximum from CSS</a> is a post from: <a href="http://www.webstylepress.com">Web Style Press, Best Practices from all the Web, Build Better Websites</a></p>
<h2  class="related_post_title">Related Posts</h2><ul class="related_post"><li><a href="http://www.webstylepress.com/use-any-font-in-webpages-as-text/" title="Use Any Font in Webpages As Text">Use Any Font in Webpages As Text</a></li><li><a href="http://www.webstylepress.com/change-image-opacity-easily-using-css-js/" title="Change Image Opacity Easily Using CSS or JS">Change Image Opacity Easily Using CSS or JS</a></li><li><a href="http://www.webstylepress.com/rounded-div-without-images/" title="Create Rounded Flexible Div Without Images">Create Rounded Flexible Div Without Images</a></li><li><a href="http://www.webstylepress.com/modern-font-styles-for-websites/" title="Modern Font Styles For Websites">Modern Font Styles For Websites</a></li><li><a href="http://www.webstylepress.com/astyle-visual-css-editor/" title="Astyle Visual CSS Editor">Astyle Visual CSS Editor</a></li><li><a href="http://www.webstylepress.com/wrapping-text/" title="Wrapping Text &#8211; Breaking Text with No Spaces into New Line">Wrapping Text &#8211; Breaking Text with No Spaces into New Line</a></li><li><a href="http://www.webstylepress.com/w3c-validation-tips/" title="W3C Validation Tips and Best Practices">W3C Validation Tips and Best Practices</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.webstylepress.com/css-maximum-benefits/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

