Having trouble getting the custom font to display correctly in xhtml2pdf for a Django project

I'm having trouble incorporating a custom font into my PDF generated from HTML.

Although I successfully displayed the font in an HTML file, indicating that the font path is correct and it's being used properly, the .ttf font type doesn't render when converted to PDF according to the documentation on .

This is my current CSS styling:

@font-face {
  font-family: "Swiss";
  src: url("/static/font/swiss.ttf");
}
body {
  font-family: "Swiss";
  font-size: 12px;
}

And here's the HTML snippet:

<body>
  asdf
</body>

Despite trying various solutions such as removing quotation marks from the font URL and family, ensuring proper HTML format with tags wrapping the body content, the conversion to PDF still does not display the custom font correctly. Can anyone assist me in identifying the issue?

htmlcssdjangofont-facexhtml2pdf

Answer №1

To effectively fetch fonts using a filesystem path, utilizing a callback function is the optimal approach. This method ensures accuracy and prevents unnecessary hits to the web server for each resource be it fonts, images, or any other content.

pisa.CreatePDF(html.encode("UTF-8"), file_object , encoding='UTF-8',
               link_callback=fetch_resources)

def fetch_resources(uri, rel):
    find_file_in_path_using_uri
    return path

It seems like the issue lies in not running collect static, resulting in fonts not being located at /static/font/swiss.ttf as expected. This discrepancy occurs because xhtml2pdf operates independently from Django. Please verify this information for accuracy.

Answer №2

I encountered a similar issue but found the solution thanks to gdrimes. By changing the URL from relative:

@font-face {
            font-family: FreeSans;
            src: url("./FreeSans.ttf");
        }

to absolute

@font-face {
            font-family: FreeSans;
            src: url("/home/rok/Documents/Muzey/muzey/website/templates/pdf/FreeSans.ttf");
        }

I was able to successfully update the font in my PDF document.

Answer №3

While I may be arriving late to this discussion, I recently encountered a similar issue. Although using a callback for providing the font definition did help, it had its limitations for me due to the need for certain logic based on external conditions when selecting different fonts. Upon investigation, I discovered that the root cause of the problem was related to the URL ("/static/font/swiss.ttf") needing to be an absolute file location rather than relative to the application's location, as demonstrated. To clarify, in my scenario where my application resided at '/home/user/app', the correct URL format would be: url("/home/user/app/static/font/swiss.ttf").

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

javascriptjqueryhtmlcssjstree

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

htmlcsstwitter-bootstrap

Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...

htmlcsstwitter-bootstrap-3

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

Acquire the current audio video stream directly from the web browser

Currently, I am utilizing a JavaScript library that internally invokes getUserMedia. My objective is to access the stream object that has already been initiated. Unfortunately, the library does not provide any means to retrieve it. Is there a method avai ...

javascripthtmlhtml5-videowebrtc

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

javascriptjqueryhtmlcsshtml5-video

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

htmlcsssvg

What is the best way to convert minutes into both hours and seconds using javascript?

In order to achieve this functionality, I am trying to implement a pop-up text box where the user can choose either h for hours or s for seconds. Once they make their selection, another pop-up will display the answer. However, I am facing issues with gett ...

javascripthtml

Unveiling hidden HTML elements with BeautifulSoup: A step-by-step guide

Currently, I am attempting to extract video content from a specific website. Although I can locate the video link using Chrome DevTools, it remains hidden when utilizing BeautifulSoup for extraction. I am hoping for assistance in modifying the code below t ...

pythonhtmlbeautifulsoup

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

htmlcssbootstrap-4

Is it possible to share deep links with just a hashtag?

I am currently developing a web application and I want to include social media buttons such as Facebook Like. I have tried using the HTML code/API provided by Facebook, AddThis, Shareaholic, ShareThis, but none of them seem to properly handle my deep link ...

htmlajaxfacebookdeep-linkingaddthis

CSS file selector for Reactstrap component

What is my goal? I noticed a gap between my jumbotron and footer that I want to remove. Initially, I was able to achieve this by setting the margin-bottom to 0px, but it required passing an ID to the Jumbotron element. Now, my objective is to accomplish t ...

cssreactstrap

Transform information into text once retrieved from an Excel file (xls or xlsx) in Python

Currently, I am in the process of developing a function that reads data from an xls/xlsx file and inserts it into a database. However, a challenge I am facing is that after extracting the data from the cells of the xls file, the values are converted into f ...

pythondjangoxlsxlsxopenpyxl

Keep elements in position when their bottom edge becomes visible while scrolling

This task may appear intricate, but I will do my best to explain it! I want to create a continuous scrolling article display similar to Bloomberg Politics (), but with a slight twist. My idea is to have the current article's bottom edge stick to the ...

javascriptjquerycss

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the enti ...

javascripthtmlcsscalculator

Accents marked with diacritics are not being detected + An issue occurred while

I'm currently working on putting together a Spanish dictionary by sourcing the definitions from www.rae.es. However, there are a couple of challenges I'm facing: One issue is that the search engine does not function properly with acute accent ...

phpjavascripthtmlhyperlinkhtml-parsing

Attempting to align the text perfectly while also adding a subtle drop shadow effect

Trying to center text with a drop shadow without using the CSS property. I'm utilizing span and :before for cross-browser compatibility. Here is what it currently looks like: The HTML: <h3 title="Say hello to Stack Overflow"><span>Say ...

htmlcss

CSS Trick: How to Clear Content in a 3-Column Div arrangement

I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing. When viewed in Firefox, the next ele ...

csshtml

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...

htmlcssreactjssass

Ways to extract information from a website using the data within a span element

I am struggling to extract the R1200 value from the "one Way drop off surcharge" section. Despite trying different methods, I have not been successful in retrieving this information. My goal is to copy the 1200 value and paste it into an Excel cell. I am f ...

htmlexcelvbaweb-scraping