function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jim BoudreauxJim Boudreaux 

Visualforce PDF Fonts

Visualforce allows us to render the page as a pdf thanks to the renderas attribute of the page tag. However, I have noticed some inconsistancies between the pdf render and the vf page render. The inconsistancy I am most concerned about at the moment is font types. I styled an outputtext tag with "font-family:arial;". This works for the vf page, but not the pdf. I have tried a number of methods to change the font in the pdf version but to no avail.
Any ideas?
Ron HessRon Hess
Advanced formatting for PDF can be facilitated through CSS in your visualforce page.

Specifically our PDF generation technology is aware of the CSS page module. Refer to the W3C paged Module for details:

http://www.w3.org/TR/css3-page/

I think there are some font options in there.
Ron HessRon Hess
If you can post a small sample, we can take a look at the fonts that are generated in each case.

thanks
Jim BoudreauxJim Boudreaux
Thanks for that link Ron, I'm looking into that now. The paged module will actually be a big help on another project I'll be working on further down the road, so thanks in advance.
I used a rather simple CSS for the pdf and I declare fonts there, but it didn't work in the pdf version. It may be the paged thing. For fun here's the code:

Code:
.text{
 font-family:gill sans mt, arial; 
 font-size:18px;
}

.header {
 font-weight:bold; 
 font-family:gill sans mt, arial; 
 font-size:36px;
}
.subheader {
 font-weight:bold; 
 font-family:gill sans mt, arial; 
 font-size:24px;
}
.label {
 font-weight:bold; 
 font-family:gill sans mt, arial; 
 font-size:18px;
}

.value { 
 font-family:gill sans mt, arial; 
 font-size:18px;
}

.date { 
 font-family:gill sans mt, arial; 
 font-size:18px; 
}

body {
 
 font-family:gill sans mt, arial; 
 font-size:14px;
}

 
dchasmandchasman
We have very limited font-family support in our PDF generation functionality today. The conversion from HTML-to-PDF is performed on our servers and this process includes interpretation/conversion of HTML/CSS and can only currently use the font sets deployed to our application servers.
Jim BoudreauxJim Boudreaux
In that case, could I get a list of these fonts? Or barring that could you install Arial to your servers? :smileyhappy: Anything but Times New Roman...
sgoremasgorema
Does anyone have an example of how I can take the data stored in our custom Quote object and display that in a vf page such that it has the formatting we use today in our Quote word document (my hope is that I can then render this as pdf and it can be used for sign off)? I am assuming this will require html formatting and use of css but I have not found any examples of this in the documentation. Also I would like an understanding before I start to build this as to what the limitations might be with font styles and sizes and formatting. thanks!
Jim BoudreauxJim Boudreaux

I don't know if this would help you, but here's some helpful things I've learned today and yesterday:

Any Custom object you create has a StandardController you can use. Just declare it in the <apex:page standardController="Custom_Object__c" /> tag. When you do that you can then reference all your custom fields through the dot notation like this, <apex:outputtext value="{!Custom_Object__c.Custom_field__c}" />. You can also reference related fields like this, <apex:outputtext value="!Custom_Object__c.Related_Custom_Object__r.Custom_Field__c}" /> (Note the __r at the end of the related object as opposed to the typical __r) 

By making use of these features, you can build the page to look however you want as long as you understand HTML.

To make the whole thing a pdf, set the RenderAs="pdf" in your <apex:page /> tag.

One thing to keep in mind is, as the subject of this thread indicates, it's difficult to set the font face and size in pdf. I have noticed though, that if you include <apex:pageBlock /> anywhere on your page, all the fonts will be styled as salesforce style which is arial and smaller than if you don't have <apex:pageBlock /> on the page.

Wierd.
sgoremasgorema

thanks for the reply! Am a bit confused about your first point regarding the standard controller since I am following the example in the blog http://blog.sforce.com/sforce/2008/06/dynamically-cho.html. So I had already set up my page to use the custom controller example in the the blog that handles the rendering of the page as pdf.  So I am confused how I can change that to use my custom quote object? Sorry..am new to this (as everyone I guess, but slower then others?? :))

thanks again for your help,

Stephanie

 
sgoremasgorema
ignore my last point of confusion. I can see that I do not need to call this custom controller b/c all it was doing was emailing the pdf, not actually rendering it. seems the 'renderedas' takes care of that.
gireeshzgireeshz

Hi Jim,

Thanks for this post - I too am having dificulties with the font sytlings when rendering to PDF.  And I, too, abhor Times New Roman.  (SF, please consider this a plea for more fonts!)  

I'll give that 'apex:pageBlock' a try, to see if I can at least grab me some Arial.

On a somwhat related note - have you tackled the concept of page headers/footers when rendering to PDF?  I can't quite grasp how do have a header that will repeat on each 'page' of the rendered PDF...

 
Jim BoudreauxJim Boudreaux
I have succefully tackled the header/footer problem, if you don't mind not having dynamic content or html support.
try this:
@page {
    @bottom-center {  content:"foo";      }
        }
this will put "foo" in the footer of all pages, but I have yet to figure out how to style a div so that the contents of that div are in the footer. Furthermore, the content attribute does not support html tags.
 
If you figure this out, please let me know.
gireeshzgireeshz
I found this which describes what can be 'content':

http://www.w3.org/TR/CSS21/generate.html#content


but haven't tried it yet.  hope to test it out later today.    doesn't seem to indicate that straight HTML is an option, but does give an option for 'URI' to link in something like an image i presume.

VF doesn't support external images for a PDF render, so any images would have to be 'StaticResources' or somewhere within SF.  i wonder what would happen if I store an HTML page in SF then link to it as the URI within 'content'.....


this is stretching my CSS knowledge.  let me know if it makes sense to you.
Jim BoudreauxJim Boudreaux
Meh.
What I would really like is to somehow class a div so that it's body would appear in the footer of the page.
 
While we're at it, would someone tell me why the arial font in pdf mode doesn't support bold or italics?
SeriousCallersSeriousCallers
Hi Doug,

As another poster asked would it be possible to get a list of the fonts your application server has installed? Currently if I need Arial I can use Arial Unicode MS as mentioned in the Visualforce Developer's Guide, but if I need bold Arial it seems I'm out of luck and am reduced to using the generic sans-serif bold.

I don't expect hundreds of fonts to be supported but it would make life a lot easier if I knew which ones were.

Thanks,
Dave
TehNrdTehNrd

Here is a list of supported fonts but not all of them work, see out Arial Bold is actually Times New Roman.

 

http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=8601&query.id=84847#M8601

 

This is incredibly frustrating as css font-weight: bold doesn't seem to work either. SeriousCallers, how did you get generica san-serif bold to work? I would be happy with that.

NielsSchepersNielsSchepers

I managed to get Arial and bold font weight using this code:
 

        <style type="text/css">
            body {font-family: "Arial" "Sans-Serif"; font-size:12px; }
        </style>

Hope it will work for you as well...

 
xxxxxxxxxxxxxxxx

I was able to get this working too. It seems the bug in the Open Source PDF rendering engine which renders "Arial" as "Times New Roman" also renders "Sans-Serif" as "Arial".

I used a span tag with the style attribute.

 

<b> <span style='font-size:10.0pt;font-family:"Sans-Serif"'>TEXT in ARIAL BOLD </span></b>

 Hope this helps...

 
APathakAPathak

Hi xxxxxxx, 

Thanks for highlighting the hack. I was trying to go by Arial directly but it didnt work . But when used Sans-serif it rendered as Arial !  

 
DagAndersonDagAnderson
Font Families that work:  'Arial Unicode MS', 'Courier', 'Serif', 'Sans-Serif'
Font Families that don't work: 'Times New Roman', 'Times', 'Times-Roman', 'Times-New-Roman', 'Helvetica'

I've been hnitting these boards all jnight - one posting says Times-Roman and Helvetica are supposed to work, but they don't.

If you want Arial, you have to use Arial Unicode MS

When you use Serif and Sans-Serif you sort of get Times and Arial

If you want to test if a font is going to work, you can do 
    font-family:'Times-Roman',sans-serif;

When you do this, you get a Sans Serif font so you know Times-Roman didn't work.
Michel LopesMichel Lopes
Hello guys, I'm trying to generate a PDF with the Calibri font, but does not work. I did upload to ressource with the font file.

I tried this way: 
@ font-face {
    font-family: "Calibri";
    src: url('{!URLFOR($Resource.Fonts, 'Calibri.TTF')}');
    src: url('{!URLFOR($Resource.Fonts, 'CALIBRIB.TTF')}');
    src: url('{!URLFOR($Resource.Fonts, 'CALIBRII.TTF')}');
    src: url('{!URLFOR($Resource.Fonts, 'CALIBRIZ.TTF')}');
}

body {font-family: "Calibri";}
And I tried this:
  
@ font-face {
	font-family: "Calibri";
	src: url('{!URLFOR($Resource.Fonts, 'Calibri.TTF')}');
	src: url('{!URLFOR($Resource.Fonts, 'CALIBRIB.TTF')}');
	src: url('{!URLFOR($Resource.Fonts, 'CALIBRII.TTF')}');
	src: url('{!URLFOR($Resource.Fonts, 'CALIBRIZ.TTF')}');
}

@page { font-family: "Calibri";}

Anyone have any ideas?

Thanks.
Priyankar Pakhira 23Priyankar Pakhira 23
Hi
I don't think you can use Calibri as font style as becasue, there is a font limitations when using Visualforce PDF Rendering. Please go below link for available font for PDF rendering
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_supported_fonts.htm
Lim Media FontsLim Media Fonts
Hey Everyone,
 You can also use Hacked text (https://textandfonts.com/hacked-text-generator) for this purpose and also tool for generating this text is free & easy to use for everyone.  So, go ahead and use it right now and share your experience with us.
Thanks
Latif BashirLatif Bashir
Thirdly, fonts have the power of setting the overall mood or vibe of your profile. https://insta-fonts.com/underline-text-generator Fourthly, having the right font can attract viewers other than the followers one may currently have.