How can I work with custom fonts?
Closed this issue · 4 comments
Hi, thanks for the plugin. I'm having a really hard time trying to make custom fonts work.
I add a path, the PDF is generated, but the font doesn't work.
If I replace
{{ craft.superpdf.html(html, settings) }}
For
{{ html }}
The font is working, so I don't understand why it's not loading in the PDF.
Here is the @font-face:
@font-face {
src: url("/static/fonts/AbitareSans/AbitareSans-150/font.ttf") format("truetype");
font-family: abitare;
font-weight: normal;
font-style: normal;
}
Thanks!
I am using this:
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8" />
<style type="text/css">
@font-face {
font-family: 'Syne Tactile';
font-style: normal;
font-weight: normal;
src: url({{ siteUrl }}fonts/SyneTactile-Regular.ttf) format('truetype');
}
p {
font-family: 'Syne Tactile', cursive;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is test</h1>
<p>Your code here ....</p>
</body>
</html>
{% endset %}
{% set settings = {
filename: "My_PDF",
fontDir: '/tmp',
} %}
{{ craft.superpdf.html(html, settings) }}
{# {{ html }} #}
That gives me this output:
I tried your example and it changed the error:
I changed the /vendor permissions and tried to create a /tmp folder here and there, but it's not clear to me where the /tmp should be.
Where is your /tmp folder?
NVM, just figured it out. I changed your example a little bit:
{% set settings = {
filename: "My_PDF",
fontDir: "/tmp",
tempDir: "/tmp"
} %}
Now it's working. Thanks a lot @amici-infotech!
I wonder if there's an issue with some type faces. I'm running into the exact same issue above. Rendering the HTML and the font is good but in the pdf it's missing.
{% set settings = {
filename: color.slug,
fontDir: "/tmp",
tempDir: "/tmp"
} %}
{{ craft.superpdf.html(html, settings) }}