Fonts in Custom Print (Version 13)

ERPNext Customize ERPNext
21

Alright I have been testing for the past few hours now and did check with your code and installed Roboto Condensed in the server.

Now here is where it gets weird (because I am using a different Google font, it works perfectly for me when installed on the server.)

  1. using just the css (.print format and .ql-editor p ) , the font is not rendered in the Print Preview or the PDF.

  2. the next step was to use @font-face… which when pointed to the locally installed .ttf ( truetype font), the font again is not rendered in the Print Preview or the PDF.

  3. Next I did try to use @font-face but with https://google-webfonts-helper.herokuapp.com/fonts/roboto-condensed?subsets=latin and installing the fonts to the server in a different folder ( created a folder called fonts in the home directory and called that in @font-face). The font doesn’t render in Print Preview but it works with PDF.

  4. The last option was to use the link tag in the html directly as given in Google Fonts

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>

It works perfectly on print preview as well as PDF.

The only cavet of this method is that its fetched each time from google fonts when you call the print format. so performance will be an issue if connections are slow.

As far as I can say, the reason why the installed Roboto Condensed didn’t work, is that its not a Variable font. This is a regular font . Some variable fonts are Raleway (i used this), Oswald.

22

Wow @centaur what a job! So there is something wrong with the actual Roboto Condensed font! The Oswald font is rather similar so that could suit us also. Could you show me how your HTML and CSS look for this font? Maybe I could figure out how to handle that… In the meantime, I’ll try your suggestion to use the link tag as you have shown.

23

BTW I think the quill editor struggles with preformatted text. As the content of the terms field was copy-pasted from another document it took the layout with it although it does not show it except for bold, italic, and headers. So no fonts and their size. On the other hand, when printing the font size is not changeable. When I clear the formatting in the Quill Editor (Tx) and redo the general layout outlines again in the Editor, I can change the font size in the particular paragraph or cell of the print layout by using % or em.