FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


FLIR - Use Any Font on your web Page





rjraaz
Tired of Arial and Times New Roman? I know I am. Up until now you had a choice of using sIFR, or painstakingly designing image headers and adding them to your web page manually. Of course, this gets a little old, especially after deciding to change color schemes two or three times.
rjraaz
Enter facelift. It is the best of both worlds! Create your website as you would normally, and then install the two lines of code that facelift requires. The elements that you want to style will be replaced with an image representation of that text styled with your custom font. And since the text is retrieved directly from the page, you don't have to worry about updating any images when text changes — it is all done automatically!
rjraaz
The first step is probably the most difficult. Download facelift image replacement and extract it to your web folder — preferably into its own directory.

Requirements: PHP and GD (with FreeType enabled, and PNG support). PHP5 is recommended but PHP4 should work. A newer version of ImageMagick is required for the FancyFonts and QuickEffects plugins -- something around 6.3+



Download FACELIFT
rjraaz
When you have installed FLIR on your website and your visitor loads a webpage, your browser detects the JavaScript file. The text that is identified as “FLIR” text get send to your PHP server which will generate images with the fonts you specified. The original text will remain in the source and that makes FLIR search engine friendly.

This whole process is faster than sIFR and your visitors will not notice anything.


i have already posted about sifr in topic sifr3 those who interested search tht
rjraaz
If Javascript isn’t supported the browser will simply return normal browser text and therefore FLIR is a very accessible technique that works anywhere.
rjraaz
When I was researching this technique I found out it is very easy to install FLIR to your website. We will install FLIR via 4 easy-to-follow steps:

    Download the files
    Configuring
    Add to the website
    Styling
rjraaz
We need to configure the config-flir.php file to define the fonts we would like to use. Open the file and find the following lines:

Quote:
}<?php
// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] = 'ArtOfIlluminating.ttf';
$fonts['okolaks'] = 'okolaksBold.ttf';
$fonts['wanta'] = 'wanta_091.ttf'; ?>


If you would like to add ‘arial’ for example, you need to copy the arial.tff file to the fonts folder. Next you need to add the following lines of codes:

Quote:
<?php $fonts['arial'] = 'arial.ttf'; ?>


Add as many fonts as you need on your site. There are more options that you can change but remember everything you do could have consequences for the output.
rjraaz
Once you have saved the config-flir.php file you are ready to implant FLIR in your website.

Add this line of codes between your <head> tags and after your stylesheet(s).

Quote:
<script src="/path-to-flir/js/flir.js" type="text/javascript"></script>


Next, you need to find the </body> tag and you should add these codes before this tag.

Quote:
<script type="text/javascript"><!--
FLIR.init( { path: '/path-to-flir/' } );
FLIR.replace();
// --></script>


These steps are important and if you don’t do it exactly like this, FLIR will not work correctly.
rjraaz
By default FLIR styles h1 to h5, but you could add more elements to this list. For example, you may want to style strong or em elements, or others. You can do that in this way:

Find the FLIR.replace(); attribute you’ve just added before the </body> tag. You can edit that attribute like this:

Quote:
FLIR.replace( 'h2', new FLIRStyle({ cFont:'some font' }) )
FLIR.replace( 'div#entries h3', new FLIRStyle({ cFont:'some font' }) )

As you can see, you can add multiple elements to this list and give them a specific font.

If you would like to specify a default font, you can do it with the other FLIR function you’ve added before called FLIR.init();

Quote:
<script type="text/javascript"><!--
FLIR.init( { path: '/path-to-flir/' }, new FLIRStyle({ cFont:'your font'
}) );
// --></script>







[size=24]CSS


Styling the elements you have included in the FLIR.auto(); is very easy and can be done with normal CSS.

Quote:
h1#permalink{
font-family: 'your custom font', Arial, Helvetica, sans-serif;
}


You should replace your custom font with a font you have added in step 2, in the flir-config.php. FLIR should be working fine now.


Other CSS styles



There is more. You can style your FLIR images exactly how you can style your browser text. For example:


Quote:
h1#permalink{
font-family: 'your custom font', Arial, Helvetica, sans-serif;
font-size:30px; /* All font-sizes are supported */
color:#ccc;
text-align:center;
}
Related topics
Beautiful personal web page!
Which is the best content management software
How Do You Center Your Entire Web Page?
LOST
web page maker
web page maker
Web Page Maker
Department web page
how long does web page posts take ???
Anyone know how to make an email form?
Help on making a web page
secure your pictures on a web page !
how to insert data into mysql base from a web page
Looking for a place to start a business Web page
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.