Apex Code Development You need to sign in to do that
Don't have an account?
DBManager 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.
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.
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?
did you try setting the standardstylesheets attribute of <apex:page> to false?
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>Hello. Did you ever figure this out? I am also wondering how to do this.
Thanks
David
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>
Thanks,
Danny
CSS
font-family: "PAPYRUS";
src: url('{!URLFOR($Resource.font_PAPYRUS, 'font_PAPYRUS.woff')}');
format('woff');
}
title1 {
font-family: PAPYRUS;
}
VF Page reference
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;
}
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.