Brew has 9 built in fonts using cufon. You can choose a font for the logo and a different one for the headings in the template manager.

 

All fonts included with this template have been generated with complete Latin Extended glyphs.

 

Below are the 9 fonts included with this template.

You can also add your own fonts  easily to this template. Follow the steps below to add your own font.

1. Find your font and convert it to a cufon js file here or use this website to find and generate fonts: http://www.cufonfonts.com
2. Upload your new file to the following folder: http://www.yourwebsite.com/templates/brew/js/fonts
3. Add your new font option to the "font", "font2" and "font3" parameters in the templateDetails.xml file located
here: http://www.yourwebsite.com/templates/brew/templateDetails.xml
4. Go to the template manager and select your new font!

 

If you are having trouble with characters or installation, see this forum post:
http://www.pixelpointcreative.com/support/forum/35-yum/497-qumlauteq-ue-ae-oe-dont-show-when-choosing-h1.html

 

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

BOXES

class="ppbox_red" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

class="ppbox_black" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

class="ppbox_purple" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

class="ppbox_brown" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

class="ppbox_yellow" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

class="ppbox_green" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

class="ppbox_blue" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.

DROP CAP

Suspendisse vulputate libero a ligula tristique ac pellentesque neque pellentesque. In laoreet pharetra est id dapibus. Nulla feugiat, turpis posuere vehicula semper, dolor elit tempus ipsum, vel suscipit velit lorem at risus. Donec sodales risus eget ipsum vestibulum posuere. Nullam venenatis sem pulvinar libero aliquet vel adipiscing ante porta. Nunc vulputate iaculis interdum. Morbi lobortis, ipsum a vestibulum consectetur, justo justo ultrices ante, non mattis magna lacus sit amet diam.

uspendisse vulputate libero a ligula tristique ac pellentesque neque pellentesque. In laoreet pharetra est id dapibus. Nulla feugiat, turpis posuere vehicula semper, dolor elit tempus ipsum, vel suscipit velit lorem at risus. Donec sodales risus eget ipsum vestibulum posuere. Nullam venenatis sem pulvinar libero aliquet vel adipiscing ante porta. Nunc vulputate iaculis interdum. Morbi lobortis, ipsum a vestibulum consectetur, justo justo ultrices ante, non mattis magna lacus sit amet diam.

LISTS

• Standard Bulleted List

• Bulleted List with ul class="pp_black"

• Bulleted List with ul class="pp_arrow"

• Bulleted List with ul class="pp_round"

• Bulleted List with ul class="pp_star"

• Bulleted List with ul class="pp_leaf"

ICONS

class="ppicon_advanced" Sample Text !	class="ppicon_alert" Sample Text !	class="ppicon_archive" Sample Text !	class="ppicon_baggreen" Sample Text !
class="ppicon_babwhite" Sample Text !	class="ppicon_cancel" Sample Text !	class="ppicon_chat" Sample Text !	class="ppicon_check" Sample Text !
class="ppicon_computer" Sample Text !	class="ppicon_credit" Sample Text !	class="ppicon_help" Sample Text !	class="ppicon_hot" Sample Text !
class="ppicon_info" Sample Text !	class="ppicon_offer" Sample Text !	class="ppicon_offer5" Sample Text !	class="ppicon_offer10" Sample Text !
class="ppicon_offer20" Sample Text !	class="ppicon_offer50" Sample Text !	class="ppicon_padlock" Sample Text !	class="ppicon_podcast" Sample Text !
class="ppicon_question" Sample Text !	class="ppicon_send"Sample Text !	class="ppicon_smiley" Sample Text !	class="ppicon_star" Sample Text !

INSTRUCTIONS FOR USE

You can apply these styles in two ways. The easiest way to use the typography style sheet provided with this template is to include it in the Joomla Content Editor. If you are unfamiliar with JCE, it is a replacement for the Tiny Editor which comes with Joomla by default. It is far superior in every way.

HERE is a tutorial on how to change your style sheet.

The style sheet for typography is called typo.css so your JCE settings will look like this:

This method makes adding typography a snap as all you will need to do is highlight the text you want formatted and then choose your style from the styles dropdown and voilà you are done. See a screen shot below.

This applies to all styles except for lists. Lists would need to be done manually with the method listed below.

The second method would be to manually add the class to your span, ul or p. Like this:

Get Help Fast!