CSS styling of text, hr and blocks

Hello,

I need help with the following three topics, maybe you have an idea on what I am doing wrong.

Topic 1
-------------
I have the following html in an html field and the css in global properties. I have also uploaded our webfont in settings.

<p class="text-lg">Rechnung</p>

.text-lg {
font-family: "Basis Grotesque Mono Pro Bold", "Courier New", Courier, monospace;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
}

In settings: Basis Grotesque Mono Pro Bold (basis-grotesque-mono-bold-pro.ttf)

In the editor i get my text in the right size and also in uppercase letters, but not bold.
in the final pdf the text is in normal case letters and also not bold.
The text size is correct.

Topic 2
-------------
I am trying to style some hr elements:

<hr class="custom-hr">

.custom-hr {
border: none;
height: 0;
margin: 0;
padding: 0;
border-top: 2px solid #000000;
margin: 0;
}

No matter what border-width i choose the border is always 1px in the final pdf. Editor view is correct.
I am also working with borders in a table, this is working fine.
I first thought of creating a div instead of a hr but this does not show at all. The hr is in a html field.

Topic 3
-------------
I want to add margin/padding above a text in a html field:

<p class="payment-terms">
Zahlungskonditionen: 10 Tage netto<br>
Herzlichen Dank für Ihren Kauf und freundliche Grüsse
</p>

.payment-terms {
display: block;
padding-top: 8px;
}

This also works in the editor but the spacing is missing in the final pdf.

Do you have any idea what I could try to make this work?
Thank you very much for your help.

Hello,

1. Please define only a single font as:

font-family: "Basis Grotesque Mono Pro Bold";

The text-transform CSS is unfortunately supported only in the RC version. You can follow the update steps here: https://e2pdf.com/docs/install#rc-version

2. Please use the height CSS property instead of border:

.custom-hr {
height: 2px;
}

3. Replace padding-top with margin-top instead:

.payment-terms {
display: block;
margin-top: 8px;
}

---

We would really appreciate your feedback at WordPress.org!

Hello,

Thank you very much for your quick answer to my problems.
I was able to fix all of them thanks to your help.

I wish you a very nice day.