Welcome Guest Search | Active Topics | Sign In | Register

Problems with font-face in HTML to PDF Options
DinRevisor
Posted: Friday, February 23, 2024 2:33:07 AM
Rank: Newbie
Groups: Member

Joined: 2/15/2024
Posts: 5
Hello all,

Im using EO.pdf to create PDFs in my C# API, and serve them pack to my users in my blazor app.
Here i want to use the google font Kanit Light in all documents. This works fine when i do it locally, as i have the font installed, but on the server, it does not work.

My problem is the application is hosted at azure, and i cannot in any easy way install the font on the Web service there.

This led me to use font-face, which im having trouble getting to work.

im registering the following in my css file.

@font-face {
font-family: 'Kanit Light';
src: url('../Fonts/kanit/kanit-Light.ttf') format('truetype');
}

html, body {
font-family: Kanit Light !important;
}

the css file is then read and served to the HtmlToPdfOptions.UseStyleSheet.

All other style changes in this css file works, but im not getting the font to show.

I hope someone out there is able to help out :-)
eo_support
Posted: Friday, February 23, 2024 9:51:04 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
Hi,

Do you use ConvertHtml or ConvertUrl? If you use ConvertHtml, please check if you have set HtmlToPdf.Options.BaseUrl correctly.

Thanks!
DinRevisor
Posted: Monday, February 26, 2024 2:07:08 AM
Rank: Newbie
Groups: Member

Joined: 2/15/2024
Posts: 5
Im not sure how this will change anything?
The stylesheet and the fonts are both included in the project, and the stylesheet is being read correctly, as i can see all other style changes are taking effect.
eo_support
Posted: Monday, February 26, 2024 9:53:07 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
It should not matter if you use ConvertUrl. It does matter if you use ConvertHtml. If you use ConvertHtml, then HtmlToPdf.Options.BaseUrl will be used to expand partial path like url('../Fonts/kanit/kanit-Light.ttf') into a full absolute path. Without BaseUrl this step won't work and the font file won't be loaded.
DinRevisor
Posted: Tuesday, February 27, 2024 7:44:25 AM
Rank: Newbie
Groups: Member

Joined: 2/15/2024
Posts: 5
I will test this.
Just so im sure i do it correctly, should the base path be set to the URL of the api?
So in a live environment it would be like https://api.domain.com/ ?
eo_support
Posted: Tuesday, February 27, 2024 9:42:00 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
Hi,

It depends on which function you use. If your code is something like this:

Code: C#
HtmlToPdf.ConvertUrl("https://api.domain.com/somePage", pdfDoc);


Then baseUrl will automatically derived from the Url.

However if your code is something like this:

Code: C#
HtmlToPdf.ConvertHtml("Hello", pdfDoc);


Then you must explicitly set baseUrl since the HTML code "<p>Hello</p>" does not contain base Url information.

Additionally, even if you use ConvertUrl and baseUrl has been correctly inferred from the Url you passed to ConvertUrl, it may not be accessible on your server if the code is running on your server, in that case you may still need to explicitly set baseUrl. See here for more info:

https://www.essentialobjects.com/doc/web/aspxtopdf/troubleshoot.html

Please feel free to let us know if you have any additional questions.

Thanks!
DinRevisor
Posted: Wednesday, February 28, 2024 5:23:19 AM
Rank: Newbie
Groups: Member

Joined: 2/15/2024
Posts: 5
Im using HtmlToPdf.

I tried to set the BaseUrl to the base path of my application (in local i used https://localhost:7125 as this is the base path to my api application)

In the stylesheet im referencing the font face as follows.

@font-face {
font-family: 'Kanit Light';
src: url('Files/Fonts/kanit/kanit-Light.ttf') format('truetype');
}

The files folder is located in the root of the application.

Im still not getting the font to load, what am i missing?
eo_support
Posted: Wednesday, February 28, 2024 9:41:50 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
You previously said that it works correctly locally but not on the server. Now you are saying it's not working if you set to https://localhost:7125 on your local machine. So exactly which one is not working? Local machine or on the server?

If you call ConvertUrl on your server, you almost certainly need to set BaseUrl correctly because the external Url you use to access your page is not usable from within the server as explained in the troubleshoot link in our previous reply.
DinRevisor
Posted: Thursday, February 29, 2024 10:22:33 AM
Rank: Newbie
Groups: Member

Joined: 2/15/2024
Posts: 5
It works locally if i use a font i have installed, if i use a font i dont have installed, and try to use font-face to load it, it does not work on local or the server.

as stated earlier, im using ConvertHtmlToPdf, CovertUrl.

I get that i need to set BaseUrl correctly, but im still lacking an explanation as to what the "correct" path is?
eo_support
Posted: Thursday, February 29, 2024 3:55:57 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
Hi,

If the problem also occurs on your local computer, then please try to isolate the problem into a test project and send the test project to us. See here for more details:

https://www.essentialobjects.com/forum/test_project.aspx

Once we have the test project, we will run it here and see if we can reproduce the problem. If we can reproduce the problem here, we should be able to tell you why it's not working.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.