Fonts on Email PDF not working

1

Using 16.12.36

Custom Theme shows fonts on Manager screen fine also ok when printing but when sending as email or clicking pdf button it changes any fields formatted with a different font (ie Times) to Arial and will show italic text as normal text.

Tried this with both Acrobat 9 Pro and Acrobat DC - same problem

Any ideas?

Cheers
Steve

2

Can you post the code involved? And then post the resulting PDF?

3

This is a portion of the theme page, its a mod of one of the standard themes and shows the font change for title and DATE, INV, ORD BLOCK parts.Sample only but shows the problem.

                {% if business.logo != null %}<td style="text-align: center"><img src="{{ business.logo }}" style="max-width: 620px"></td>{% endif %}
            
            </tr><td style="padding-top: 20px; text-align: center; font-weight: bold; font-family:'Times'; font-style: italic; font-size: 40px">{{ title }}</td></table>
            
            <table style="margin-bottom: 10px"><tr>
            
<!- ADDRESS BLOCK ->
                <td style="display: block; width:330px; padding-right: 50px">
                
    <!- CUSTOMER CONTACT NAME ->            
                    {% for field in custom_fields %}
                    <div style="text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">
                    {% if field.label != 'Customer Contact' %}{% continue %}{% endif %}
                    <div>{{ field.text }}</div>
                    {% endfor %}
                    
    <!- COMPANY & ADDRESS BLOCK ->            
                    <div style="text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">
                    {% if recipient.name == 'Direct Sales' %}
                    {{ recipient.name | replace: "Direct Sales", "" }}
                    {% else %}
                    <div style="text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">{{ recipient.name }}</div>
                    {% endif %}</div>
                    <div style="word-wrap: break-word; text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">{{ recipient.address | newline_to_br }}</div>
                </div></td>
                
<!- DATE, INV, ORD BLOCK ->    
                <td style="text-align: right">
                    {% for field in fields %}
                    <div style="margin-right: 10px; padding-bottom: 1px; font-family:'Times'; font-size: 16px; font-weight: normal; font-style: italic">{{ field.label }} :</div>
                    {% endfor %}
                </td>
                <td style="font-family:'Arial'; font-size: 16px; text-align: left">
                   {% for field in fields %}
                    <div style="margin-right: 1px, padding-right: 1px; padding-bottom: 1px; font-weight: normal">{{ field.text }}</div>
                    {% endfor %}
                </td>

Images below show the difference in font display, one is email & pdf output the other is screen and print view. It applies to all font types that I have tried.

1369×968 49.6 KB

2481×3543 285 KB

4

Well, all the code doesn’t show, but I presume it must be right if it produced the invoice with the colored logo. At the risk of asking the obvious, are you sure the second screen shot was with the same theme? (It is clearly a different transaction.)

Is the second screen shot taken directly from the image generated when the PDF button is clicked? Or has it been emailed somewhere and then opened with a different PDF reader? If so, I would suspect a problem with the reader. Others have reported difficulty opening emailed forms at the recipient’s end of the email chain.

5

I ran the test again using standard info the word Invoice is used as the example of the fonts not being displayed correctly :

Manager Theme code:

                {% if business.logo != null %}<td style="text-align: center"><img src="{{ business.logo }}
                
                " style="max-width: 620px"></td>{% endif %}
                
                
            
            </tr><td style="padding-top: 20px; text-align: center; font-weight: bold;
            
            font-family:'Arial'; font-style: normal; font-size: 40px">{{ title }}
            
            
            <tr><td style="padding-top: 20px; text-align: center; font-weight: bold;
            
            font-family:'Arial'; font-style: italic; font-size: 40px">{{ title }}
            

            <tr><td style="padding-top: 20px; text-align: center; font-weight: bold;
            
            font-family:'Times'; font-style: normal; font-size: 40px">{{ title }}
            
            

            <tr><td style="padding-top: 20px; text-align: center; font-weight: bold;
            font-family:'Times'; font-style: italic; font-size: 40px">{{ title }}
</td></tr></td></tr></td></tr></td></table>


           
            <table style="margin-bottom: 10px"><tr>
            
<!- ADDRESS BLOCK ->
                <td style="display: block; width:330px; padding-right: 50px">
                
    <!- CUSTOMER CONTACT NAME ->            
                    {% for field in custom_fields %}
                    <div style="text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">
                    {% if field.label != 'Customer Contact' %}{% continue %}{% endif %}
                    <div>{{ field.text }}</div>
                    {% endfor %}
     
    <!- COMPANY & ADDRESS BLOCK ->            
                    <div style="text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">
                    {% if recipient.name == 'Direct Sales' %}
                    {{ recipient.name | replace: "Direct Sales", "" }}
                    {% else %}
                    <div style="text-align: left; font-weight: normal; font-family:'Arial'; font-size: 16px">{{ recipient.name }}</div>
                    {% endif %}</div>
                    <div style="word-wrap: break-word; text-align: left; font-weight: normal; font-family:'Arial';
                    font-size: 16px">{{ recipient.address | newline_to_br }}</div>
                </div></td>
                
<!- DATE, INV ETC BLOCK ->    
                <td style="text-align: right">
                    {% for field in fields %}
                    <div style="margin-right: 10px; padding-bottom: 1px; font-family:'Arial'; font-size: 16px; 
                    font-weight: normal; font-style: italic">{{ field.label }} :</div>
                    {% endfor %}
                </td>
                <td style="font-family:'Arial'; font-size: 16px; text-align: left">
                   {% for field in fields %}
                    <div style="margin-right: 1px, padding-right: 1px; padding-bottom: 1px; font-weight: normal">{{ field.text }}</div>
                    {% endfor %}
                </td>
                
   <!- SALE INFO ->    
            </tr></table>

            <div style="font-family:'Arial'; font-size: 16px; font-weight: bold; margin-top: 25px; margin-bottom: 10px">
            {{ description }}</div> 
        
    
    <tr>
        {% for column in table.columns %}            
        <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; 
        border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}
        {% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</td></tr></thead>
<tbody>
    {% for row in table.rows %}
    <tr>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px
        {% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; 
        white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    {% for column in table.columns %}            
        <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; 
        border-right-width: 1px{% endif %}">&nbsp;</td>
    {% endfor %}
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right
        {% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-color: #000; border-left-width: 1px; white-space: nowrap; border-right-width: 1px; 
        border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}
    
<!- NOTES BLOCK ->   
    <td colspan="99">
            {% for field in custom_fields %}
            {% if field.label != 'Notes' %}{% continue %}{% endif %}
            <div style="font-family:'Arial'; font-size: 14px; font-weight: bold; font-style: italic; 
            padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
            {% endfor %}
            
<!- BANK ACCOUNT BLOCK -> 
            {% for field in custom_fields %}
            {% if field.label != 'Bank Details for Payment' %}{% continue %}{% endif %}
            <div style="font-family:'Arial'; font-size: 14px; font-weight: bold; font-style: italic; 
            padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
            {% endfor %}
            
<!- PAID STAMP -> 
            {% if emphasis.text != null and emphasis.positive %}
            <div style="text-align: center; margin-top: 40px; margin-bottom: 80px"><span style="color: #006400; 
            border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
            {% endif %}

            {% if emphasis.text != null and emphasis.negative %}
            <div style="text-align: center; margin-top: 40px; margin-bottom: 80px"><span style="color: #FF0000; 
            border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
            {% endif %}
        </td>
    
   </tbody>

<!- FOOTER ->
 <tfoot>
    <tr><td colspan="99">
        <div style="font-size: 8pt; colour: #000000; ">
            <p style="position: relative; top: 10px; text-align: center; font-family:Franklin Gothic Book">Swift Tag Limited is registered in England (company number 7670247).</p>
            <p style="text-align: center; font-family:'Franklin Gothic Book'">Registered Office: 58 Winton Drive, Croxley Green, Rickmansworth, Hertfordshire WD3 3RA</p>
            
        </div>
    </td></tr>
</tfoot>

       </table>

Output images as follows:

Screen shot from Manager - displays fonts correctly

1266×1790 42.7 KB

Sent using Print button (selecting paper printer or PDF printer) - displays fonts correctly

1241×1755 74.7 KB

Sent using Email button - does NOT fonts display correctly

2481×3543 137 KB

Using PDF button - does NOT display fonts correctly

2481×3543 137 KB

I don’t believe its a pdf reader problem as the print to pdfprinter version displays fine
but the emailed pdf version does not using the same reader on the same computer.
It seems to only be a problem when the built-in Manager pdf is used.
I use Adobe Reader DC and Pro 9 so it should work.

Don’t know why the code keeps getting lost on line width as it shows fine in the editing screen,
is there a better way to send it?

I appreciate your time in looking at this and hope we can get it resolved.
Thanks Steve
6

Manager currently doesn’t support custom fonts using font-family directive when generating PDF documents.

7

Ok, appears not to support font-style for now as well. Does make the email button for invoices less useful as we lose the required company “look” but we can work round it.
Thanks for the reply :slight_smile:

8

what custome font manager support,