0 Replies Latest reply on Sep 23, 2012 12:08 PM by Jon-Paul Kelly

    @font-face web fonts with cfdocument not working

    Jon-Paul Kelly

      I am trying to create a pdf using cfdocument and embed a web font from fonts.com.

       

      I have a page with the font working here:

      http://bootcampsf.com/webfont/demo.cfm

       

      Here is a page with the same code wrapped in cfdocument tags:

      http://bootcampsf.com/webfont/demo.pdf.cfm

       

      Here is the code wrapped with the cfdocument tag (it is exactly the same as the code without the cfdocument tag minus the tag):

       

       

       

       

      <cfdocument fontembed="yes" format="pdf">

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

          <title>Web Fonts Test</title>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

         

          <style type="text/css">

       

       

      @import url("http://fast.fonts.com/t/1.css?apiType=css&projectid=709e38c2-0b20-49e7-812b-57499a88598d");

       

       

      @font-face{

      font-family:"TradeGothicW01-BoldCn20 675334";

      src:url("Fonts/257c802f-349c-4b4d-aefa-546d5de15ec6.eot?iefix") format("eot");}

      @font-face{

      font-family:"TradeGothicW01-BoldCn20 675334";

      src:url("Fonts/257c802f-349c-4b4d-aefa-546d5de15ec6.eot?iefix");

      src:url("Fonts/5fdc935e-9e30-442a-bbe9-8d887b858471.woff") format("woff"),url("Fonts/616c4c87-a077-43f4-a9f4-f01267c13818.ttf") format("truetype"),url("Fonts/c901ad5f-a842-4549-a1f4-583a97f7e169.svg#c901ad5f-a842-4549 -a1f4-583a97f7e169") format("svg");

      }

      @font-face{

      font-family:"TradeGothicW01-BoldCn20 675337";

      src:url("Fonts/0061ab1d-ac0a-492f-a33d-d95980a095a8.eot?iefix") format("eot");}

      @font-face{

      font-family:"TradeGothicW01-BoldCn20 675337";

      src:url("Fonts/0061ab1d-ac0a-492f-a33d-d95980a095a8.eot?iefix");

      src:url("Fonts/1feee13e-ded1-4d73-9d76-c5ed16a43117.woff") format("woff"),url("Fonts/b3f82d90-14bc-4c20-8a10-a6b7bd0f304f.ttf") format("truetype"),url("Fonts/5e602f8a-1e6a-461e-bfd8-ff46a5460527.svg#5e602f8a-1e6a-461e -bfd8-ff46a5460527") format("svg");

      }

       

       

          </style>

      </head>

      <body>

          <div class="content">

              <h1>Web Fonts Test</h1>

              <p style="margin-top:-10px; font-size:1.5em;color:#666"><b>@font-face implementation</b></p>

              <hr />

              <p class="uc">Webfonts below:</p>

              <div class="fontdisplay">

      <div style="font-family:'TradeGothicW01-BoldCn20 675334';"> Trade Gothic&copy; Condensed Bold #20 </div>

      <div style="font-family:'TradeGothicW01-BoldCn20 675337';"> Trade Gothic&copy; Condensed Bold #20 Oblique </div>

       

       

            </div>

          </div>

      </body>

      </html>

      </cfdocument>