This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Font

keshavcoder wrote on 2017-05-26:
Hello guys,

I just want to know that can i use my own fonts in html to pdf conversion. As currently i can not see my fonts in it.

If yes for above point can any one guide me how can i do that. I am doing this with php platform.

Thanks in advance.
support wrote on 2017-05-29:
Hello,

You need to use the @font-face rule if you want your custom fonts in the resulting PDF. An example:

@font-face
{
font-family: 'Helvetica';
src: url(https://someserver.com/fonts/Helvetica.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
Shyamlal wrote on 2017-06-14:
Hello Guys,

Actually where i can place the font code because i have tried to pass the font-face code in HTML but it's not reflect on my generated pdf. Please suggest.

I have passed this code

<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Design Planner</title>
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/fonts.css">
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/animate.min.css">
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/font-awesome.min.css">
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/owl.carousel.css">
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/bootstrap.min.css">
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/menu.css">
<link rel="stylesheet" href="http://designmyplanner.com/dev/css/style.css">
<script src="http://designmyplanner.com/dev/js/jquery.min.js"></script>
<style>
@font-face {
font-family: "Lobster Two";
font-style: normal;
font-weight: 400;
src: local("Lobster Two"), local("LobsterTwo"), url(https://fonts.gstatic.com/s/lobstertwo/v9/Law3VVulBOoxyKPkrNsAaI4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
h5{
font-family: Lobster Two;
}
.element-box{
color:#4E090C;
}
</style>
</head>
<body>
<section class="contant-page">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div style="width:100%; height:8.5in;padding: 4px;margin:auto;">
<div class="papper preview previewpdf" style="width:100%; height:100%;margin: auto; border-width:6px; border-style:solid; border-image:url(http://designmyplanner.com/dev/images/1493707472_476601.png) 10 round; -o-border-image:url(http://designmyplanner.com/dev/images/1493707472_476601.png) 10 round;-webkit-border-image:url(http://designmyplanner.com/dev/images/1493707472_476601.png) 10 round;border-color:#125315;font-family: Lobster Two;">
<div id="boximage" class="box-image pdfbox">
<img class="midbg" src="http://designmyplanner.com/dev/img/plain-thumb.jpg" alt="DesignPlanner">
<img src="http://designmyplanner.com/dev/img/letter/plain-thumb.jpg" class="backgroundimg" alt="DesignPlanner" style="opacity:">
<table class="element-box-main">
<tbody><tr>
<td class="element-box 1_1" id="1_1" style="text-align: left; width: 33.33%; height: 200px;" rowspan="4" colspan="1"><div class="elementdiv" style="text-align: left; width:100%; height:100%;"><a href="javascript:void(0)" class="newbtnele" onclick=""><h5>Inspriational </h5></a><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></td>
<td class="element-box 1_2" id="1_2" style="text-align: left; width: 33.33%; height: 200px;" rowspan="4" colspan="1"><div class="elementdiv" style="text-align: left; width:100%; height:100%;"><a href="javascript:void(0)" class="newbtnele" onclick=""><h5>Shedule </h5></a><ul class="ul-check"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></td>
<td class="element-box 1_3" id="1_3" style="text-align: left; width: 33.33%; height: 200px;" rowspan="4" colspan="1"><div class="elementdiv" style="text-align: left; width:100%; height:100%;"><a href="javascript:void(0)" class="newbtnele" onclick=""><h5>Grateful For </h5></a><ul class="ul-radio"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody></table>
</div>
</div>
</div>
</div></div></div>
</section>
</body></html>

please check and suggest accordingly.
support wrote on 2017-06-15:
Hello,

woff2 fonts are not supported by Pdfcrowd now.

Here is the sample with ttf fonts:

<html>
<head>
<style>
@font-face
{
font-family: 'Lobster Two';
src: url(https://my-domain.com/LobsterTwo-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Lobster Two';
font-style: normal;
font-weight: 700;
src: url(https://my-domain.com/LobsterTwo-Bold.ttf) format('truetype');
}

@font-face {
font-family: 'Lobster Two';
font-style: italic;
font-weight: normal;
src: url(https://my-domain.com/LobsterTwo-Italic.ttf) format('truetype');
}

@font-face {
font-family: 'Lobster Two';
font-style: italic;
font-weight: 700;
src: url(https://my-domain.com/LobsterTwo-BoldItalic.ttf) format('truetype');
}

.custom-font { font-family: 'Lobster Two', cursive }
</style>
</head>

<body>
<p class="custom-font">
Regular
</p>
<p class="custom-font">
<b>Bold</b>
</p>
<p class="custom-font">
<i>Italic</i>
</p>
<p class="custom-font">
<b><i>Bold Italic</b></i>
</p>
</body>
</html>