Fonts in Custom Print (Version 13)

pedro_vde · August 6, 2022, 8:59am

I’ve managed to write my own Print Formats to handle our own layout for Invoices, Quotations, and Purchase Orders, and so far so good.

I’m struggling with some practical issues in regard to fonts (probably because of the lack of frappe and CSS skills)

First I’m able to change font sizes in general on the Custom Print Formats, but I’m stuck with the size of one particular field, the {{ doc.terms or “” }}-field.

On the print-preview and actual pdf, the font is too large, so I’ve tried to use:

<p style="font-size:70%">{{ doc.terms or "" }}</p>

but this does not reflect in the actual print layout. Can somebody point me out how to change the overall height of the font for this field? I know that in the actual doctype like Quotation the Term Details has its HTML(?) layout, so I presume it overrules everything I write in the Print Format.

I’ve tried to reduce the size of the used font in the actual DocType, but that brings in other issues:

When changing the font size in the Terms from 11px (this is the smallest size that prints without any layout issues) to 10px, the doc.terms are printed on a new page, like there is a manual page break added leaving a blank page before it with just the header.

When changing the font from 11px to 9px or 8px there is a scrolling bar (yes indeed!) printed at the bottom of the content of the doc.terms-field as the content margins are not fit the page. This happens not in the preview which is ok but only in the actual .pdf print.

I hope there is a way to handle this as it currently renders our printouts just ugly…

The Second part of my ‘font issue’ is using Google fonts. I want to use a particular font (Roboto Condensed)

After many searches on this forum and the internet, I can’t wrap my head around how to implement this to a particular Print Format. This has much to do with the fact that Google changes its API and all examples I’ve found don’t look like what Google says about the way to use these fonts, so if somebody could explain to me like a 5-year-old the current steps I’ve got to take to implement this particular font to my Print Format that would be great!

Any help or insight would be really appreciated!

centaur · August 7, 2022, 4:47am

The best way is to install the required font in your server.

in your terminal first download the font

wget -O Roboto_Condensed.zip https://fonts.google.com/download?family=Roboto%20Condensed

Now follow the below steps as we are going to install the font globally

cd /usr/share/fonts
sudo mkdir googlefonts
cd googlefonts
sudo unzip -d . ~/Roboto_Condensed.zip
sudo chmod -R --reference=/usr/share/fonts/truetype /usr/share/fonts/googlefonts

Register the font using

sudo fc-cache -fv

check if the font is installed properly

fc-match RobotoCondensed

Now put the below under custom css of your print format

.print-format {
font-family: ‘Roboto Condensed’, sans-serif;
}

centaur · August 7, 2022, 4:55am

For Font sizes … use rem (root em) instead of px (pixels)… since frappe uses bootstrap the default i think is 16 px or 1 rem

pedro_vde · August 7, 2022, 7:41am

Thank you @centaur for your insight and clear explanation. I’ve followed your steps one by one.

I’ve encountered a hiccup with the sudo chmod -R --reference=/usr/share/fonts/opentype /usr/share/fonts/googlefonts as it trew an error stating:

chmod: invalid mode: ‘–reference=/usr/share/fonts/opentype’

I’ve tried to do a ‘hard’ sudo chmod -R 777 /usr/share/fonts/googlefonts and continued until I’ve received the RobotoCondensed-Regular.ttf: “Roboto Condensed” “Regular” statement when checking if the font was installed properly.

I’ve added the CSS statement to the custom Print Format, and refreshed the pages but unfortunately no changes in the used fonts when trying to print.

As I got the error stating that chmod was not able to take the permissions from the given reference in /usr/share/fonts/opentype I presume our Ubuntu server is not configured in the right way to share fonts… could that be the culprit?

centaur · August 7, 2022, 7:50am

what folders do you have in /usr/share/fonts ?

sorry for the typo

it should be font-family: ‘Roboto Condensed’, sans-serif;

pedro_vde · August 7, 2022, 8:05am

in /usr/share/fonts I have:

googlefonts (the subdirectory just made
truetype
X11`

I’ve corrected the Typo but still no change.

BTW, I was messing around with your suggestion to use rem/em in stead of px but there is no change in the pre-layouted text.

centaur · August 7, 2022, 8:46am

try this

sudo chmod -R --reference=/usr/share/fonts/truetype /usr/share/fonts/googlefonts

pedro_vde · August 7, 2022, 9:02am

this does not throw an error, but unfortunately, there is no change in the actual layout.

centaur · August 7, 2022, 9:03am

ok

could you post the custom code here along with the custom css you have used ?

pedro_vde · August 7, 2022, 9:04am

this is the custom css (complete)

#clear  {clear:both}
#title  {text-align:center; font-size:10px}
#address{float:left; width:50%}
#date   {float:left; width:50%}
#date p {text-align:right}

.print-format {
font-family: ‘Roboto Condensed’, sans-serif;
}

table {
  table-layout: fixed;
  width: 100%;
  border: 0;
}

.print-format table, .print-format tr, .print-format td {
    padding: 0px; 
    margin-top: 5mm;
    margin-left: 5mm;
    margin-right: 5mm;
}

pedro_vde · August 7, 2022, 9:07am

And this is the current style part…

<style>
   .lf  {   text-align: left;}
   .cn  {   text-align: center;}
   .rt  {   text-align: right;}
   .vt  {   vertical-align: top;}
   .vc  {   vertical-align: middle;}
   .vb  {   vertical-align: bottom;}
   .xs  {   font-size: x-small;}
   .sm  {   font-size: small;}
   .md  {   font-size: medium;}
   .lg  {   font-size: large;}
   .xl  {   font-size: x-large;}
   .xxl {   font-size: xx-large;}
   .half {   font-size: 0.5rem;}
   .b   {   font-weight: bold;}
   .bb  {   font-weight: bolder;}
   .i   {   font-style: italic;}
   .u   {   text-decoration: underline;}
   .bd0 {   border: 1px dashed;}
   .bd1 {   border: 1px dotted;}
   .bd2 {   border: 2px solid;}
   .blk {   color: black;}
   .lgr {   color: lightgrey;}
   .lblu{   color: lightblue;}
   .blu {   color: blue;}
   .grn {   color: green;}
   .red {   color: red;}
   .ylw {   color: yellow;}
   .org {   color: orange;}
   .ord {   color: orangered;}
   .prp {   color: purple;}
   .lim {   color: lime;}
   .spacer {   color: white;   font-weight: bold;}

   .print-format table, .print-format tr, 
   .print-format td, .print-format div, .print-format p {
      vertical-align: middle;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      padding: 0px;
      z-index: 10;
   }
   @media screen {
      .print-format {
         padding: 10mm;
      }
   }
   @media print {
		div.print-footer {
			position: fixed;
			bottom: 0;
		}
	}
	
 div-half { 
  font-size: 0.5rem;
}
</style>

pedro_vde · August 7, 2022, 9:10am

and the field that I’m struggling with had

<p style="font-size:70%">{{ doc.terms or "" }}</p>

but is now

<div-half>
    {{ doc.terms or "" }}
    </div-half>

centaur · August 7, 2022, 9:15am

ok lets first remove the <style> tag from the html/jinja template. and will later add them in the custom css later.

the below has to be the first one in custom css

.print-format {
font-family: ‘Roboto Condensed’, sans-serif;
}

The terms are under the quill editor so you would also need to add the below code after the .print-format css

.ql-editor p{
font-family: ‘Roboto Condensed’, sans-serif;
}

and the terms like so

<div>
   {{ doc.terms }}
</div>

pedro_vde · August 7, 2022, 9:19am

now my custom css looks like this:

.print-format {
font-family: ‘Roboto Condensed’, sans-serif;
}

.ql-editor p{
font-family: ‘Roboto Condensed’, sans-serif;
}

#clear  {clear:both}
#title  {text-align:center; font-size:10px}
#address{float:left; width:50%}
#date   {float:left; width:50%}
#date p {text-align:right}

table {
  table-layout: fixed;
  width: 100%;
  border: 0;
}

.print-format table, .print-format tr, .print-format td {
    padding: 0px; 
    margin-top: 5mm;
    margin-left: 5mm;
    margin-right: 5mm;
}

pedro_vde · August 7, 2022, 9:22am

I’ve removed the -part in the html/jinja template - this changed my layout a bit as seems normal.

I have:

<div>
   {{ doc.terms }}
</div>

where I need them, but there is no change in the font…

centaur · August 7, 2022, 9:23am

Thats becuase you also need to clear the browser cache as well and as a added measure reboot your server as well

pedro_vde · August 7, 2022, 9:29am

Ah OK! - Unfortunately, I have to leave now, but I’ll do this tonight and keep you posted! I thank you in advance for your time & effort!

pedro_vde · August 7, 2022, 7:56pm

I’ve rebooted the server and cleared the browser cache but unfortunately, I don’t see any changes in the used font. the layout stays exactly what it was before.

centaur · August 8, 2022, 2:18am

When you say layout you mean the roboto condensed font is not showing??

Could you post the complete html code ??

Post some screenshots ?

pedro_vde · August 8, 2022, 6:45am

indeed the font is not showing… this is the HTML code:

<!DOCTYPE html>

{# Get the tax/VAT rate for THIS.document #}
{% set this_docs_vat_rate = frappe.db.get_value("Sales Taxes and Charges", {"parent": doc.name}, "rate") %}
{# This matches doc.name [parent= THIS.SalesInvoice] to ONE db row, and then extracts ONE/relevant column [RATE] #}

{% macro letterhead() %}
<table>
    <tr><td> </td></tr>
    <tr><td><div id="header">
    <center><img src="/files/ISF-Letterhead_01.png" style="width=96%;"></center>
</div>
</td></tr></table>
{% endmacro %}

<!-- HEADING DEFENITION-->
{% macro heading() %}
<div id="title">
    <h3>QUOTATION</h3>
</div>
<div id="General_Info">
  <table style="width:100%; font-size:90%">
    <tbody>
      <tr>
        <td class="rt" style="width:80px"><p> </p>Quotation #<p>Quotation Date</p><p>Valid Till</p><p>Project Account</p></td>
        <td class='alncenter' style="width:230px"><p> </p><b>{{doc.name}}</b><p><b>{{ frappe.format_date(doc.transaction_date) }}</b></p><p><b>{{ frappe.format_date(doc.valid_till) }}</b></p><b><p>{{ frappe.get_fullname() }}</b></p><p><b>+32 52 20 14 07</b></p><p><b>{{ frappe.db.get_value("User",{"name":frappe.session.user}, "email") }}</b></p></td>
        <td></td>
        <td>Quotation To:<p><b>{{doc.party_name}}</b></p><p>att. <b>{{doc.contact_person}}</b></p><p><b>{{doc.address_display or 'no address available'}}</b></p></td>
      </tr>
      <tr>
        <td class='alncenter' colspan="4" style="font-size:130%">Quotation Reference: <b>{{doc.quotation_reference}}</b></td>
      </tr>
    </tbody>
  </table>
  </div>
  {% endmacro %}
  
  <!--Above Items - First row of table to have on each page.-->
  {% macro above_items() %}
    <table class="table table-condensed cart no-border" style="width:100%; font-size:90%">
        <thead>
            <tr>
                <th width=20px>#</th>
			    <th width=100px>Item Code</th>
			    <th width=240px>Item Description</th>
			    <th width=80px class="cn">Qty</th>
		    	<th class="cn">Unit Price</th>
	            <th width=40px class="cn">%</th>
               <th class="cn" width=80px>Subtotal<br>ex. VAT</th>
            <th class="cn">Subtotal<br>incl. VAT</th>
		    </tr>
	    </thead>
{% endmacro %}

<!-- Footer definition-->
{% macro below_items() %}
<div id="footer-html" class="visible-pdf">
<table style="width:98%; font-size:80%; height:20px">
   <tr style="font-size: 6pt !important; text-align: right">
        <td colspan="4">{{ doc.company }} - {{ _("Quotation") }} {{ doc.name }} {{ _("of") }} {{ frappe.format_date(doc.transaction_date) }} - {{ _("Page") }} <span class="page"></span> {{ _("of") }} <span class="topage"></span></td>
   </tr>
</table>
</div>
{% endmacro %}

<!-- actual layout-->
{{ letterhead () }}
{{ heading () }}
{{ above_items() }}

{% set pr = [1] %}
{% set lines = [0] %}
    {%- for row in doc.items -%}
        {% if lines[-1] %} {% endif %} 
        {% if lines.append( lines[-1] + 2 +((row.item_code|length / 16)|int)) %}{% endif %}
        {% if (row.item_code|length % 16) > 0 %}
            {% if lines[-1] %} {% endif %} 
            {% if lines.append( lines[-1] + 1 ) %}{% endif %}
        {% endif %}
        {% if (lines[-1]/80) <= pr[-1] %}
            <tr>
            <td width=20px>{{ row.idx }}</td>
            <td width=100px>{{ row.item_code }}</td>
			<td width=240px>{% if row.item_code != row.item_name -%} {{ row.item_name}} {%- endif %}</td>
			<td width=80px class="rt">{{ row.uom }}: {{ row.get_formatted("qty") }}</td>
			<td class="rt">{{ row.get_formatted("rate") }}</td>
			<td width=40px class="cn">{% if row.discount_percentage != 0 -%} {{ row.get_formatted("discount_percentage") }} {%- endif %}</td>
			<td class="rt">{{ row.get_formatted("amount") }}</td>
			<td class="rt">{{ row.get_formatted("amount * (1+ (this_docs_vat_rate/100))") }} € {{ "%.2f"|format(row.amount * (1+ (this_docs_vat_rate/100)) ) }}</td>
		</tr>
            </thead>
        {% else %}
            <!--<div class="page-break"></div>-->
            {% if pr[-1] %} {% endif %} 
            {% if pr.append( pr[-1] + 1 ) %}{% endif %}
            {{ above_items() }}
            <tr class="table-info">
            <td width=20px>{{ row.idx }}</td>
            <td width=100px>{{ row.item_code }}</td>
			<td width=240px>{% if row.item_code != row.item_name -%} {{ row.item_name}} {%- endif %}</td>
			<td width=80px class="rt">{{ row.uom }}: {{ row.get_formatted("qty") }}</td>
			<td class="rt">{{ row.get_formatted("rate") }}</td>
			<td width=40px class="cn">{% if row.discount_percentage != 0 -%} {{ row.get_formatted("discount_percentage") }} {%- endif %}</td>
			<td class="rt">{{ row.get_formatted("amount") }}</td>
			<td class="rt">{{ row.get_formatted("amount * (1+ (this_docs_vat_rate/100))") }} € {{ "%.2f"|format(row.amount * (1+ (this_docs_vat_rate/100)) ) }}</td>
		</tr>
        {% endif %}
    {%- endfor -%}
    	<tr>
			{% if doc.flags.show_inclusive_tax_in_print %}
                <td colspan="6" class="rt b">{{ _("Total Excl. VAT") }}</td>
             {# <td class="rt">{{ doc.get_formatted("net_total", doc) }}</td> #}
                     <td class="rt b">{{ "€ {:,.2f}".format(doc.net_total) }}</td>
                  {% else %}
                     <td colspan="6" class="rt b">{{ _("SubTotal") }}</td>
                     <td class="rt b">{{ "€ {:,.2f}".format(doc.total) }}</td>
                  {% endif %}
            <td class="lf">Excl.VAT</td>
		</tr>
		{%- for row in doc.taxes -%}
            {%- if not row.included_in_print_rate or doc.flags.show_inclusive_tax_in_print -%}
		<tr>
			<td colspan="6" class="rt b">{{ row.get_formatted("description") }}</td>
			<td class="rt">{{ row.get_formatted("tax_amount") }}</td>
			<td class="rt"></td> 
		</tr>
		    {%- endif -%}
        {%- endfor -%}
        {%- if doc.discount_amount -%}
        <tr>
            <td colspan="6" class="rt b">{{ _("Discount") }}</td>
                     {# <td class="rt">{{ doc.get_formatted("discount_amount") }}</td> #}
            <td class="rt">{{ doc.get_formatted("discount_amount") }}</td>
        </tr>
        {%- endif -%}
        <tr>
            <td colspan="6" class="rt b">{{ _("Grand Total") }}</td>
            <td class="rt b">{{ doc.get_formatted("grand_total") }}</td>
            <td class="lf">Incl.VAT</td>
        </tr>
    </tbody>
    </table>
{{ below_items() }}
<div class="page-break"></div>
{{ letterhead () }}
{{ heading () }}
<!--<p style="font-size: 0.4em !important;">{{ doc.terms or "" }}</p>-->
{{ doc.terms or "" }}
<p> </p>
<div class="print-footer">
{{ below_items() }}
</div>
</body>