How to use a custom font family in a custom Print format

Frappe Framework Print Formats
,
1

I want to change the font family used in my custom Print format. The font family I want to use is on my Windows machine, it is exactly XXIINeueNorm-CndBlack and it is in TrueType format.

My question is: how can I load that font into ERPNext and use it in my custom Print format?

I have been trying to do this several times, following these links, but I have not been able:

I think something was missed to me, there is no way to change it and I need to be able to do this.

1 Like
2

I need to know how to implement that font in the Print Format.

3

This is a preview of the font:

image
image1441×789 43.3 KB

4

Have you tried including the relevant Google Font in the Print Format CSS ?

1 Like
5

I used the import method in this way:

<style>
    @import url('https://fonts.googleapis.com/css?family=My+Font');

    .print-format {
        font-family: "My Font" !important;
    }
    ...
</style>

But the font I want to use is not part of Google Fonts.

I do not know if there is a way to convert a Desktop Font to a Web Font.

2 Likes
6

How can I do it?

7

I just figured out.

  1. Put font file in app_name/public/font folder.
    Your font should be accessible from http://localhost:8000/assets/app_name/font/Laksaman.ttf or http://yourwebsite.com/assets/app_name/font/Laksaman.ttf or something like that.

  2. Use these css. (Mine use Laksaman font, you should change it to XXIINeueNorm-CndBlack)

<style>

{% set site_url = frappe.utils.get_url() %}

@font-face {
	font-family: 'Laksaman';
	font-style: normal;
	font-weight: 400;
	src: local('Laksaman Regular'), local('Laksaman-Regular'), url('{{ site_url }}/assets/app_name/font/Laksaman.ttf') format('truetype');
}

.print-format {
	font-family: 'Laksaman';
}

</style>

Odd thing is frappe.utils.get_url() will return http instead of https and will ending with :8000 (atleast for me, I might config something wrong) Which won’t work in production setup.

But this won’t work with wkhtmltopdf.
If printing pdf is more important you could install font on your server and simply use

<style>

.print-format {
	font-family: 'Laksaman';
}

</style>

:laughing:

6 Likes
8

Thanks for your response @pipech.
My font is accesible from http://ipv4_address:8080/assets/app_name/font/XXIINeueNorm-CndBlack.ttf, but, I received the error net::ERR_CONNECTION_REFUSED when I load the custom Doctype and see Print format.

9

Does error net::ERR_CONNECTION_REFUSED occur when you tried to get PDF print format?

What about html print format does it render with XXIINeueNorm-CndBlack font?

10

This error occurs only when the HTML print format is going to be displayed.

11

Finally, I could solve it @pipech.
The problem is that the frappe.utils.get_url() function only returns the host name or IPv4 address, not the port used, so it received the error net :: ERR_CONNECTION_REFUSED.

Changing

url('{{site_url}}/assets/app_name/font/custom_font.ttf')

to

url('{{site_url}}:PORT/assets/app_name/font/custom_font.ttf')

will make it work perfectly.

Many thanks for your help. :blush:

1 Like
12

That seems like a bad idea, it will cause error in production environment.
Because it’ll tried to access http://your_site_name.com:8080 which did not exist and will cause the same error.

13

Exactly, unless you use an IP address to access your site, http://your_site_name.com:8080 will not work correctly, but, by now, I am using an IP address.

14

That works. Thank you!