+ Start a Discussion
DBManagerDBManager 

Custom Font from Static Resource in Visualforce PDF

I am trying to use a custom font (for info, Garamond) in a Visualforce page. Following some research, I have found that it might be possible to upload the font file as a static resource, and refer to it in the page.

 

However, I don't seem to be able to find much about the detail of how this works. So:

 

  • Firstly, is this possible?
  • If so, in what format do I need to upload the font file? TTF? Zipped TTF? Other Font file?
  • Lastly, how do I reference the font in the Visualforce page? In other words, what would I put in the blank:
body {
font-family: _________;
}

 

Thanks for any help.

 

bvramkumarbvramkumar

It is possible. you can zip it as .zip or .rar. not sure about other formats...

 

read this link http://www.salesforce.com/us/developer/docs/pages/Content/pages_resources.htm and do a sample first. 

DBManagerDBManager

Thanks bvramkumar,

 

I have read that page, but it doesn't describe how to use a static resource as a font file.

 

I'm not actually sure how I would use a font file in HTML/CSS outside of Salesforce, so I'm a little stuck with that part of the problem.

 

For example, I tried variations of this:

<style type="text/css">
@font-face {
    font-family: "Garamond";
    src: url('{!URLFOR($Resource.Garamond, 'Garamond.ttf')}');
    src: local(custom_font), url('{!URLFOR($Resource.Garamond)}') format('truetype');
}

body {
font-family: Garamond, serif;
}
</style>

 

And this:

body{
font-family: {!URLFOR($Resource.A4Page, 'A4Page.css')};
}

But neither seem to work.

 

Any ideas?

bvramkumarbvramkumar

did you try setting the standardstylesheets attribute of <apex:page> to false?

DBManagerDBManager

I have, yes.

 

This is what is at the top of the page at the moment:

<apex:page renderas="pdf" standardController="Opportunity" cache="true" showHeader="false" standardStylesheets="false">

<head>
<!--<apex:stylesheet value="{!URLFOR($Resource.A4Page, 'A4Page.css')}"/>-->
<style type="text/css">
@font-face {
    font-family: "Garamond";
    src: url('{!URLFOR($Resource.Garamond, 'Garamond.ttf')}');
    src: local(custom_font), url('{!URLFOR($Resource.Garamond)}') format('truetype');
}

body {
font-family: Garamond, serif;
}
</style>
</head>

 

dmchengdmcheng

Hello.  Did you ever figure this out?  I am also wondering how to do this.

 

Thanks

David

V'NathV'Nath

Hi bvramkumar,

 

 

I tried this in many ways no sucess , Please help me ram .

Egarly waiting your replay.. Advance Thanks.................

 

and my code is 

<apex:page standardStylesheets="false" renderAs="PDF">
<html>
<head>
<!--<apex:stylesheet value="{!URLFOR($Resource.A4Page, 'A4Page.css')}"/>-->
<style>
@font-face
{
font-family: CenturyGothic;
src: url('{!URLFOR($Resource.CenturyGothic, 'GOTHIC.ttf')}');
src: url('{!URLFOR($Resource.CenturyGothic, 'GOTHICB.ttf')}');
src: url('{!URLFOR($Resource.CenturyGothic, 'GOTHICBI.ttf')}');
src: url('{!URLFOR($Resource.CenturyGothic, 'GOTHICI.ttf')}');
}

div,center,p
{
font-family:CenturyGothic;
}
</style>
</head>
<body>
<br/><br/><br/><br/>
<center>
<h1> Congrates this is your first PDF </h1>
<div> Congrates this is your first PDF </div>
<p> Congrates this is your first PDF </p>
</center>
</body>
</html>
</apex:page>

DannyK88DannyK88
Did anyone ever find out if this was possbile. I know that the PDF generation feature only has like 4 fonts that are default. I am trying to generate a PDF with some cursive writting on it. I can't seem to get it to work no matter what I do. I found so many articles and such that say to use similar solutions but nothing as worked. I was wondering if there was any movement as to if this was possible or not.

Thanks,
Danny
Amanda Byrne- Carolina Tiger RescueAmanda Byrne- Carolina Tiger Rescue
Have you tried .woff format? like this

CSS
@font-face {
    font-family: "PAPYRUS";
    src: url('{!URLFOR($Resource.font_PAPYRUS, 'font_PAPYRUS.woff')}');          
    format('woff');
}

title1 {
  font-family: PAPYRUS;
}

VF Page reference
VISITOR RELEASE
 
don't know if it would work with pdf or not, but my VF displays it just fine.
 
Chris Lee 58Chris Lee 58

Why not just do all the formats....like the following

        @font-face{
            font-family: myfont;
            src: url("{!URLFOR($Resource.FONTPACK, 'myfont.eot')}");
            src: url("{!URLFOR($Resource.FONTPACK, 'myfont.eot?#iefix')}") format('embedded-opentype'),
                 url("{!URLFOR($Resource.FONTPACK, 'myfont.woff2')}") format('woff2'),
                 url("{!URLFOR($Resource.FONTPACK, 'myfont.woff')}") format('woff'),
                 url("{!URLFOR($Resource.FONTPACK, 'myfont.ttf')}") format('truetype'),
                 url("{!URLFOR($Resource.FONTPACK, 'myfont-webfont.svg#_scriptregular')}") format('svg');
        }

        body {
            font-family: myfont,Arial,sans-serif !important;
        }
        
Monisha ASHOK-KUMARMonisha ASHOK-KUMAR
Hi,

The below code work for me, hope it will be useful for you:
<style>
@font-face{
font-family: 'samplefont';
src: url("{!URLFOR($Resource.staticResourceName, '/Path/filename.eot')}");  /* IE9*/
src: url("{!URLFOR($Resource.staticResourceName, '/Path/filename.eot?#iefix')}") format('embedded-opentype'), /* IE6-IE8 */
url("{!URLFOR($Resource.staticResourceName, '/Path/filename.woff')}") format('woff');  /* Modern browsers*/
font-weight: 400;
font-style: normal;
}
#content { font-family: samplefont; !important }
</style>

you can modify the code as your need.
 
Monisha ASHOK-KUMARMonisha ASHOK-KUMAR
you can refer this url : https://github.com/salesforce-ux/design-system/issues/273