How to format currency in a visualforce page rendered as a PDF?

Question

I have a visualforce page which contains currency field. When rendered as a PDF, it loses the format of the currency. How can I keep the currency format?

I am using CSS to put the dollar sign in there but I am not sure how to go about inserting commas and ensuring there are two digits after the decimal. Please point me in the right direction.

<style> 
    .currency:before { content:'$';  }
    label.field {
        text-align: right;
        width: 40%;
        float: left;
        font-weight: bold;
        padding-right: 2%;
        padding-left: 5%;
    }
</style>    
<p><label class="field">Goal:</label>
<apex:outputText value="{!Goal__c.Quarterly_Goal__c}" styleclass="currency"/></p>   
// Currently formatted like: $4000000.0
// Should be formatted like: $4,000,000.00

Answer 1

The <apex:outputText> can be formatted along with <apex:param>.

<apex:outputText value="{0, number, $#,###.##}">
    <apex:param value="{!Goal__c.Quarterly_Goal__c}"/>
</apex:outputText>

Hope it helps.