I am generating the pdf file in django, here i am using @font-face for USPSIPStandard for just one <p> tag, but it is affecting the whole pdf

I am generating the pdf reports for the patient using wkhtmltopdf in Django, and i have to show the patient imb_code in USPSIPStandard font family ,I am using its file in Static folder, when use this @font-face in my html file, this is affecting the <pre> tag styling,(not the text showing in USPS format but only the style is changing) but i am not using this font face on this pre tag,

<style>
        @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url("{{ usps_font }}") format('truetype');
        }

        /* Apply only to specific class */
        .usps-barcode {
            font-family: 'USPS_IMB_Standard', sans-serif;
        }
    </style>

// Here is pre tag
<pre style="padding: 10px 5px; font-size: 12px">
  {{statement.statement_data}}</pre>

// Here using this font family: 
<div>
        <p class="usps-barcode" style="font-size: 14px; margin: 5px 5px 0px; padding: 0px; margin-left: 1px;">
            {{ patient.imb_encode }}
        </p>
    </div>

but when i remove this :

 @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url("{{ usps_font }}") format('truetype');
        }

it show the pre tag content in proper format,why font-face is affecting the pre tag, altough i am not applying it on pre tag , as i also define the default body and * font-family

  1. Force <pre> to Use a Specific Font Add this to your CSS to make sure <pre> keeps its intended style:

    pre {
 font-family: 'Courier New', Courier, monospace !important;
}

The !important ensures that no other styles override it.

  1. Define a Default Font for Everything Else

     body, * {
    font-family: Arial, sans-serif;
 }

This helps prevent unwanted font changes.

  1. Scope the USPS Font Only to .usps-barcode

       @font-face {
      font-family: 'USPS_IMB_Standard';
      src: url("{{ usps_font }}") format('truetype');
   }

  .usps-barcode {
       font-family: 'USPS_IMB_Standard', sans-serif;
   }

This ensures that the USPS font is only used where needed.

  1. Try Adding a Meta Tag for Better Handling

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

This can help wkhtmltopdf handle fonts more consistently.

To work as intended the font should be installed in the local system as seen in the example (which is in parts faulty). Thus here we can see it works in explorer "preview" top right but NOT in the active browser!

enter image description here

What made the difference, even with all the samples flaws? enter image description here

This was the styling I used.

<style type="text/css">
 @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url(USPSIMBStandard.ttf) format('truetype');
        }
    p.uspsBarCode {font-family: USPSIMBStandard, USPS_IMB_Standard; font-size:14pt}
</style>
</head>

<body>
<p>Test rendering of USPSIMBStandard.ttf font.</p>

<ol>
<li>
<p>
FFTTDAADTTADTFDDFDDTFAFATDTDDFDAFDADDADDAFAAAFTTFTFDTFAAADADDDFDF</p>
</li>
<li>
<p class="uspsBarCode">
FFTTDAADTTADTFDDFDDTFAFATDTDDFDAFDADDADDAFAAAFTTFTFDTFAAADADDDFDF</p>
</li>

With and without <pre>

enter image description here

<style type="text/css">
 @font-face {
            font-family: 'USPS_IMB_Standard';
            src: url(USPSIMBStandard.ttf) format('truetype');
        }
  p.uspsBarCode {font-family: USPSIMBStandard, USPS_IMB_Standard; font-size:14pt;}
  pre.me {padding: 10px 5px; font-size: 20px;}
</style>
<body>
Using PRE</br>
  <pre class="me">
  FFTTDAADTTADTFDDFDDT
  </pre>

Here using this font family without pre: 
  <div>
    <p class="uspsBarCode">
    FFTTDAADTTADTFDDFDDTF
    </p>
  </div>
</body>
Вернуться на верх