From 374eeaeb08bc60c734412d95bf9b5b4314993e43 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 18 Apr 2026 09:37:30 +0300
Subject: [PATCH] feat(print): respect user's detail font when printing

---
 apps/client/src/print.css                                 | 3 ++-
 apps/client/src/print.tsx                                 | 7 +++++++
 .../Notes/Printing & Exporting as PDF.html                | 8 +++++++-
 .../Notes/Printing & Exporting as PDF.md                  | 5 ++++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/print.css b/apps/client/src/print.css
index b08ae29c36..25a61e5bf4 100644
--- a/apps/client/src/print.css
+++ b/apps/client/src/print.css
@@ -1,7 +1,6 @@
 @import "boxicons/css/boxicons.min.css";
 
 :root {
-    --print-font-family: sans-serif;
     --print-font-size: 11pt;
 }
 
@@ -11,6 +10,8 @@
 
 html,
 body {
+    --print-font-family: var(--detail-font-family, sans-serif);
+
     width: 100%;
     height: 100%;
     color: black;
diff --git a/apps/client/src/print.tsx b/apps/client/src/print.tsx
index 11d1cad7b8..2a7f25161a 100644
--- a/apps/client/src/print.tsx
+++ b/apps/client/src/print.tsx
@@ -31,6 +31,13 @@ async function main() {
     if (!noteId) return;
 
     await import("./print.css");
+
+    // Load the user's font preferences so that --detail-font-family is available.
+    const fontLink = document.createElement("link");
+    fontLink.rel = "stylesheet";
+    fontLink.href = "api/fonts";
+    document.head.appendChild(fontLink);
+
     const note = await froca.getNote(noteId);
 
     const bodyWrapper = document.createElement("div");
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html
index cae0118ea7..95992cf3d4 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html	
@@ -167,10 +167,16 @@ class="admonition note">
       class="reference-link" href="#root/_help_KC1HB96bqqHX">Templates</a>.</li>
   </ul>
   <p>For example, to change the font of the document from the one defined by
-    the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">:root {
+    the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">body {
 	--print-font-family: serif;
     --print-font-size: 11pt;
 }</code></pre>
+  <aside class="admonition important">
+    <p>When altering <code spellcheck="false">--print-font-family</code>, make
+      sure the change is done at <code spellcheck="false">body</code> level and
+      not <code spellcheck="false">:root</code>, since otherwise it won't be picked
+      up due to specificity rules.</p>
+  </aside>
   <p>To remark:</p>
   <ul>
     <li>Multiple CSS notes can be add by using multiple <code spellcheck="false">~printCss</code> relations.</li>
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md b/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md
index 221ba93c9a..7055825a43 100644
--- a/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md	
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md	
@@ -99,12 +99,15 @@ To do so:
 For example, to change the font of the document from the one defined by the theme or the user to a serif one:
 
 ```
-:root {
+body {
 	--print-font-family: serif;
     --print-font-size: 11pt;
 }
 ```
 
+> [!IMPORTANT]
+> When altering `--print-font-family`, make sure the change is done at `body` level and not `:root`, since otherwise it won't be picked up due to specificity rules.
+
 To remark:
 
 *   Multiple CSS notes can be add by using multiple `~printCss` relations.