[DOC] reports: add documentation for custom fonts

closes odoo/odoo#30813

1 files changed, 32 insertions, 0 deletions

diff --git a/doc/reference/reports.rst b/doc/reference/reports.rst
index e324b132ae0..64920f41f8e 100644
--- a/doc/reference/reports.rst
+++ b/doc/reference/reports.rst
@@ -301,6 +301,38 @@ the function ``render_html`` and pass objects in the ``docargs`` dictionary:
             }
             return report_obj.render('module.report_name', docargs)
 
+.. _reference/reports/custom_fonts:
+
+Custom fonts
+============
+If you want to use custom fonts you will need to add your custom font and the related less/CSS to the ``web.reports_assets_common`` assets bundle. 
+Adding your custom font(s) to ``web.assets_common`` or ``web.assets_backend`` will not make your font available in QWeb reports.
+
+Example::
+
+    <template id="report_assets_common_custom_fonts" name="Custom QWeb fonts" inherit_id="web.report_assets_common">
+        <xpath expr="." position="inside">
+            <link href="/your_module/static/src/less/fonts.less" rel="stylesheet" type="text/less"/>
+        </xpath>
+    </template>
+
+You will need to define your ``@font-face`` within this less file, even if you've used in another assets bundle (other than ``web.reports_assets_common``).
+
+Example::
+
+    @font-face {
+        font-family: 'MonixBold';
+        src: local('MonixBold'), local('MonixBold'), url(/your_module/static/src/fonts/MonixBold-Regular.otf) format('opentype');
+    }
+
+    .h1-title-big {
+        font-family: MonixBold;
+        font-size: 60px;
+        color: #3399cc;
+    }
+
+After you've added the less into your assets bundle you can use the classes - in this example ``h1-title-big`` - in your custom QWeb report.
+
 Reports are web pages
 =====================