I’m trying to work with “glyph” mixed with romanized fonts in the Template Builder. It appears correctly in HTML Preview but not in PDF Preview neither in the draft or final generated reports.
Does someone have any idea to solve this problem?
Many thanks in advance
@ross this sounds very similar to the issue you recently resolved for ICHK. I don’t remember seeing the solution come through on SourceTree. Are you able to point KMS in the right direction? Cheers : )
Hi KMS,
Font encoding for PDFs can be pretty tricky, especially for the TCPDF library which is what v19 uses.
After loading a font into assets, the next step is to edit your template files to indicate which font family is being used on a section of text by adding a style=“font-family:Content-Regular” attribute in your HTML. However, if the font is not loading with that name, it many be that the family of the font itself doesn’t match the filename. You may need to check in your system to see what the font name is.
TCPDF processes a font and generates a special set of internal files, these can be found in your vendor/tecnickcom/tcpdf/fonts folder. If your font was loaded correctly, you should see a PHP file that matches the name of your font, and the first few lines of the file will tell you the font family name:
This is vendor/tecnickcom/tcpdf/fonts/droidsansfallback.php
`<?php
// TCPDF FONT FILE DESCRIPTION
$type='TrueTypeUnicode';
$name='DroidSansFallback';`
```
Then in your HTML tempalte (eg: a span or div tag) you would add style="font-family:DroidSansFallback;"`
Hope this helps!
Hi Sandra,
I really appreciate your help. I’ve being trying to generate customized reports but with no success…I did exactly like you pointed out. Now the fonts appear, but in the wrong sequence that I type them. In html preview they appear correctly.
Question 2 picture: 
Hi Sandra,I really appreciate your help. I’ve being trying to generate customized reports but with no success…I did exactly like you pointed out. Now the fonts appear, but in the wrong sequence that I type them. In html preview they appear correctly.
- Is there a way to generate batches of html reports instead of pdf?
- Is the only option to add font-family to html in Rich Text template?
- How to add font-family in general to Report-Year Group, Headers, Student’s info, etc?
Question 2 picture:
To be clear: when I mention the “wrong sequence” I mean: I type this: សេចក្ដី and it appears: សចេក្ដី
Hi KMS,
Ah, I see the issue now. With almost any other language, these steps would have solved your issue. Khmer it seems it a bit trickier. I support a school in Phnom Penh, and discovered a couple years ago that the Khmer character set is just too complex for the TCPDF renderer. There’s something about the marks added above and below characters that the TCPDF library just can’t manage to print correctly. Luckily, v20 available on June 20th introduces a new renderer, the mPDF library. I haven’t tested it personally, but supposedly this library has much better UTF character support. Are you able to share your notosanskhmer file with support@gibbonedu.org? I’d be interested to test it out before the v20 release and see if it works.
Thanks!
HI Sandra, I shared the font by email last month. I’ve installed the stable v20 but still not working. Any ideas?
Hi KMS,
Thank you for sending the font! My apologies for the delay, last month was the final month of school of a very intense school year, I have still been catching up on some outstanding emails and projects. I’ll be sure to check out this issue in the next week or so and give a shout.
Thanks!
Hi KMS,
Good news, it looks like the version of mPDF we’re using has a built-in Khmer font. I’ve tested it and compared it to google translate and I think it’s working correctly. To use it in your templates, specify font-family:‘Khmeros’` (with single quotes) in your style attributes. This should render as follows, Khmeros on the left, NotoSans on the right:
To my untrained eye Noto doesn’t look quite right, but the font is loading correctly into the template. If you’d like to use a custom font rather than the built-in one, ensure your font is in your custom asset directory (defined in Report Settings), then edit it to give it a generic font family name:
Then, in your template, be sure to select notosanskhmer in the Fonts section:
And use the font family in your template code:
This should load the custom font. However, I think the built-in one is rendering better than NotoSans.
Hope this helps!
Uau, Sandra!
Thank you so much for your help. I’ve tested khmeros and it worked on section: Rich Text (the only place I can add font-family). Can I have any hint on how to access the template code (which file?) that you mentioned and have the whole report in Khmer? Do I have to change fonts section by section?
Again I really appreciate Gibbon community and your effort to make it!
Glad to hear it’s working. To change the font for the report there’s a couple options. The easiest might be to edit the stylesheet of the report. Each report can have a stylesheet defined:
The default stylesheet is located in /modules/Reports/templates/reports/stylesheets/style.twig.html. Try adding something like this to the top:
`body {
font-family: 'Khmeros', sans-serif;
}
`
```
Otherwise, you can edit the template sections by going into the Manage Assets tool under Template Builder and duplicating an exiting template, then editing it and adding the font-family style to the HTML as needed. Your custom templates will show up under the Additional tab in the template builder.