|
|
         |
Use Custom Fonts on Web PagesTypically, HTML pages allow the use of standard browser fonts (Arial, Verdana, Times New Roman, etc.) only, or you must use a graphic in place of the text as an alternative in order to keep the type of typography you want. The downside of using graphic-text is that you lose accessibility. Some audiences and all search engines cannot read graphics, and therefore, what text is showing within your images. Using images also uses more bandwidth and will slow down your web page load time. sIFR developed by Mike Davidson and others, is a powerful technique we came across that enables us to use just about any font we want on web pages without sacrificing search-engine friendliness and maintaining accessibility. Our Tutorial
Things you will need for this tutorial:
Click on each step to expand the instructions.
Step 1
 To use your choice of font with sIFR, you will need to first generate a Flash file which contains the font data. In Flash, open the file named "font.fla."
Step 2
 Double-click on the movie clip called "holder" from the library pallette.
Step 3
 Inside the "holder" movie clip, there's a text field called "txtF," set the font of text field "txtF" to another font you like and then go back to the root stage. Save (file>save) and publish (file>publish) the Shockwave ("font.swf") file.
Step 4
 Next, open "style.css" in your HTML/CSS or text editor. As you can see, we have set font-definitions for <h1> and <p> tags, they will apply to the sIFR fonts. You may change or add more definitions as needed.
Step 5
 Next, open "font.js." Here is where we specify which Shockwave (swf) file sIFR should use, the file that contains the font data. Also, this is where we set the text color, text-background color, padding, and alignment for the sIFR fonts. In this case, we are using the font file "font.swf" that we just generated, we've declared two sets for <h1> and <p> tags corresponding to definitions declared in "style.css."
Step 6
 Next, create a new HTML document. In the head tag, link to the 3 CSS files ("style.css", "sIFR-screen.css", and "sIFR-print.css") and 2 Java Script files ("sIFR.js" and "sIFR-addons.js"), these files are required for sIFR to work.
Step 7
 Now we will start inserting the contents based on the CSS definitions we've set up in "style.css". Here we put in a open/close <h1> tag containing some text.
Step 8
 Next, we will insert an open/close <p> tag containing some text/content.
Step 9
 Finally, right before the closing <body> tag we will link to the "font.js" Java Script file.
Step 10
 Let's preview this HTML document in your web brower. The result should look something like this. [Download the official sIFR 2.0.2 release (full)]
|
Want a FREE No Obligation Price Quote?
We know that ALL areas of Web Marketing are very challenging and that there will come a time when you need expert Internet marketing services to beat your competition in the traffic wars. Please consider having our search engine marketing firm help with your projects. We offer free quotes for SEO services to improve your organic search engine ranking, Pay Per Click (PPC) management, Web Analytics for SEO and PPC, Web Design, and SEO training programs, so you have nothing to lose! Please contact us for a comprehensive price quote for your search engine placement project.
|
Internet Marketing
