Introducing Our FontStylr Stacks!

Never be stuck having to use boring "web-safe" fonts on your pages again.

Blueball FontStylr Stack Vol. 1 - 9 Cool Sans-Serif Fonts!

Blueball FontStylr Bundle - $9.00
Includes 4 FontStylr stacks!
76 custom font options!

Click button to buy our Blueball Dynamic Content Stacks bundle now!   Click button to view your e-junkie shopping cart

FontStylr Vol. 1 - Sans-Serif Fonts

28 sans-serif font faces

FontStylr Vol. 2 - Serif Fonts

24 serif font faces

FontStylr Vol. 3 - Script Fonts

16 script font faces

FontStylr Vol. 4 - Grunge Fonts

8 grunge font faces
Made For Stacks 2!

Give your Stacks 2 page headlines instant style with our Blueball FontStylr Stacks! Simple to use. No HTML code needed. Drag and drop. Very fast upload and display! Works great with all major browsers.

If you've ever wished you could add in a custom font style that's different than the normal boring "web safe" fonts to your Rapidweaver site pages, then you'll love our FontStylr stacks!

Each FontStylr stack allows any Rapidweaver user to easily add in new custom font styles that are embedded within each stack to create unique headline stacks on any Stacks 2 page (See the HUD details below).

The custom font styles are created and displayed using Cufón. Cufón is very fast, offers reliable display in all major browsers, and allows your headline text to remain in the source code of your published Rapidweaver site pages for search engines to see.

You can use multiple FontStylr headline stacks on a Stacks page. Even mix and match headlines using stacks from multiple FontStylr stacks together on the same page if you want.

FontStylr stack hud controls take advantage of Stacks 2 features, and make it drag and drop simple to add and setup FontStylr stacks on your Stacks 2 page.

Download the FontStylr readme PDF file before you buy to see what the FontStylr stacks have to offer you!

Click here for PDF file. Includes a complete list and preview of custom font styles available by FontStylr stack volume.

Great browser support

Tested and works perfectly on: Safari, Firefox, Chrome, IE7, IE8, and IE9.

Each FontStylr stack's hud area features Stacks 2 hud controls offering
fast simple setup of each FontStylr stack, allowing you complete
control over every styling aspect of your FontStylr stack.

Stacks Image 161

Setting up your FontStylr stack’s custom styling using the built-in HUD interface features.

Each of the 4 FontStylr stacks hud controls are identical to the one shown to the right except for the stack name and the “Font Style Name” menu options which are different on each of the 4 FontStylr stacks.

1 - Include jQuery Javascript: This box is unchecked to not call jQuery by default. If your theme is already using jQuery then you will not need to check this box. If you are not sure if the theme is using jQuery, preview your page in Rapidweaver, and if your FontStylr stacks display the font style you have selected correctly in the Preview window, then your theme is using jQuery.

IMPORTANT! You will only have to check the “Include jQuery Javascript” box on the first FontStylr stack on your page if you have to use it. Leave it unchecked on all the other FontStylr stacks on the page. If your theme has jQuery built into it, leave this box unchecked on all FontStylr stacks.

2 - Include Cufon Javascript: This box is checked to call the Cufon javascript from the Resources folder in the FontStylr stack by default.

IMPORTANT! You only have to check the “Include Cufon Javascript” box on the first FontStylr stack on your page. Leave it unchecked on all the other FontStylr stacks on your Stacks page.

3 - Div Name: This is the name that will be created for the div in your FontStylr stack where your actual headline text will be placed into. This must be a unique div name, one that is not used by your theme or another other stack in any of your site’s pages. This div name cannot have spaces or special characters used in it!

For example you could use something as simple as pagehead01 or homepgtitle01, headerp1_01, etc. for the div name. We leave the unique naming up to you.

4 - Font Style Name: Use the popup menu control to select the custom font style name you want to use for your FontStylr text. Note the font style name you choose to use to reference later. The number of font styles and names to choose from will vary with each FontStylr stack.

5 - HTag Size: Use the popup menu control to select the H tag size you want to use for your FontStylr text. You can choose from h1 (default), h2, h3, h4, h5, and h6.

6 - Font Color: Set your FontStylr text color by clicking on the color picker to select a new color to use. Default color is set to black #000000.

7 - Font Size: This slider control option controls the size of your text. Move the slider to the right to increase the size of your font up to a maximum size of 120px and left to reduce it down to a minimum size of 14px.

8 - Letter Spacing:Use the slider control to increase or decrease the letter spacing between the individual text characters in your text. Default is set to 0px. You can go from -5px up to +10px.

9 - Line Height: Use the slider control to increase or decrease the line height of your text. Default is set to 24px. You can go from 10px up to 150px.

10 - Text Align: Use the popup menu control to select the text alignment option you want to use for your FontStylr text. You can choose left (default), center, or right.

11 - Text Link URL: If you want to link your FontStylr stack text to a url, add in the full absolute url into the input field. An example of a full absolute url would be:
http://www.blueballdesign.com

If you don’t want to add a link to your FontStylr stack text you must LEAVE THE FIELD BLANK! This will prevent the cursor from changing to a hand. If you add in a url, the cursor will change to a hand when the cursor hovers over the linked text like normal.

12 - Drag your custom font style's javascript file into Rapidweaver's Resources area: Included with your FontStylr stacks bundle download are 4 folders named:

  • FontStylr_Vol1_Font_JS_Files
  • FontStylr_Vol2_Font_JS_Files
  • FontStylr_Vol3_Font_JS_Files
  • FontStylr_Vol4_Font_JS_Files

Inside each of these folders are individual font style javascript files that correspond with the "Font Style Name" menu options for their respective FontStylr stacks. For example, the FontStylr Vol. 1 stack's fonts js files will be in the FontStylr_Vol1_Font_JS_Files folder, and so on.

If you chose Andika Basic in the menu for your Font Style Name, you would drag the Andika_Basic_400.font.js file located in the FontStylr_Vol1_Font_JS_Files folder into Rapidweaver's Resources area 1 time. That single instance of the Andika_Basic_400.font.js file in the Resources area can now be used by any FontStylr stack on any of your site pages when you select the Andika Basic font style name in the popup menu hud control.

You must add in a font's js file for each Font Style Name you select to use in a FontStylr stack's hud. But only once for each font style name chosen, no matter how many FontStylr stacks use that font style name in a site. They will all reference that single font's js file in Rapidweaver's Resources area.

Stacks Image 11

You will find the font style name and the corresponding .js font file name to use in the fonts listings in the FontStylr readme file!