تخطي للذهاب إلى المحتوى
أودو القائمة
  • تسجيل الدخول
  • جرب مجاناً
  • التطبيقات
    المالية
    • المحاسبة
    • فوترة
    • النفقات
    • جدول البيانات (BI)
    • المستندات
    • توقيع إلكتروني
    المبيعات
    • إدارة علاقات العملاء
    • المبيعات
    • نقطة البيع للمتاجر
    • نقطة البيع للمطاعم
    • الاشتراكات
    • تأجير
    المواقع الإلكترونية
    • أداة بناء المواقع الإلكترونية
    • متاجر إلكترونية
    • مدونة
    • المنتدى
    • دردشة مباشرة
    • التعليم الإلكتروني
    سلسلة التوريد
    • المستودعات
    • التصنيع
    • إدارة دورة حياة المنتج
    • المشتريات
    • الصيانة
    • الجودة
    الموارد البشرية
    • موظفون
    • التوظيف
    • إجازة عمل
    • التقييمات
    • الإحالات
    • تطبيق الأسطول
    التسويق
    • التسويق الإجتماعي
    • التسويق عبر البريد الإلكتروني
    • التسويق عبر الرسائل النصية
    • فعاليات
    • أتمتة التسويق
    • الاستطلاعات
    الخدمات
    • المشاريع
    • الجداول الزمنية
    • الخدمة الميدانية
    • مكتب المساعدة
    • التخطيط
    • مواعيد
    اﻹنتاجية
    • مناقشة
    • الموافقات
    • إنترنت الأشياء "IoT"
    • بروتوكول ربط المحادثات الصوتية عبر الإنترنت
    • المعرفة
    • WhatsApp
    التطبيقات الخارجية ستوديو أودو منصة أودو السحابية
  • قطاعات الأعمال
    البيع بالتجزئة
    • متجر كتب
    • متجر ملابس
    • متجر أثاث
    • متجر بقالة
    • متجر معدات
    • متجر ألعاب
    الطعام والضيافة
    • بار وحانة
    • المطعم
    • مطعم للوجبات السريعة
    • نزل للضيوف
    • موزّع مشروبات
    • فندق
    العقارات
    • وكالة عقارات
    • شركة هندسة معمارية
    • البناء
    • إدارة العقارات
    • العناية بالحدائق
    • اتحاد مُلاّك العقارات
    استشارة
    • مؤسسة محاسبية
    • شريك أودو
    • وكالة تسويقية
    • منشأة قانونية
    • استقطاب المواهب
    • التدقيق والتوثيق
    التصنيع
    • الأقمشة
    • معدني
    • الأثاث
    • الطعام
    • مصنع خمور
    • هدايا الشركات
    الصحة واللياقة البدنية
    • نادي رياضي
    • متجر نظارات
    • مركز لياقة بدنية
    • الممارسون الصحيون
    • صيدلية
    • صالون تصفيف الشعر
    التجارة
    • عامل صيانة
    • الأجهزة والمعدات التقنية ودعمها
    • أنظمة الطاقة الشمسية
    • صانع أحذية
    • خدمات التنظيف
    • خدمات التكييف (HVAC)
    غير ذلك
    • منظمة غير ربحية
    • وكالة بيئية
    • تأجير لوحات إعلانية
    • تصوير
    • تأجير دراجات
    • بائع وسيط للبرمجيات
    تصفح كافة قطاعات الأعمال
  • مجتمع أودو
    تعلم
    • دروس
    • التوثيق
    • شهادات
    • التدريب
    • مدونة
    • بودكاست
    قم بتعزيز التعليم
    • برنامج تعليم
    • Scale UP! لعبة الأعمال
    • قم بزيارة أودو
    احصل على البرنامج
    • تحميل
    • قارنْ الإصدارات
    • إطلاق
    تعاون
    • جيت هاب "Github"
    • المنتدى
    • فعاليات
    • الترجمات
    • كنْ شريكاً
    • خدمات الشركاء
    • سجل مكتب المحاسبة الخاص بك
    احصل على الخدمات
    • اعثر على شريك
    • اعثر على محاسب
    • قابل أحد مرشدي الأعمال
    • خدمات التنفيذ
    • مراجع العملاء
    • الدعم
    • الترقيات
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    الحصول على عرض توضيحي
  • الأسعار
  • المساعدة

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • إدارة علاقات العملاء
  • e-Commerce
  • المحاسبة
  • المخزون
  • PoS
  • المشروع
  • MRP
All apps
يجب أن تكون مسجلاً حتى تتفاعل مع المجتمع.
كافة المنشورات الأفراد الشارات
علامات التصنيف (عرض الكل)
odoo accounting v14 pos v15
حول هذا المنتدى
يجب أن تكون مسجلاً حتى تتفاعل مع المجتمع.
كافة المنشورات الأفراد الشارات
علامات التصنيف (عرض الكل)
odoo accounting v14 pos v15
حول هذا المنتدى
المساعدة

How to add custom fonts to QWeb reports?

اشتراك

تسلم الإشعارات عندما يكون هناك نشاط في هذا المنشور

لقد تم الإبلاغ عن هذا السؤال
qwebreportingfontsodoo8.0
6 الردود
70117 أدوات العرض
الصورة الرمزية
Yenthe Van Ginneken (Mainframe Monkey)

Hi guys,

Has anybody had any succes adding a custom font to a QWeb report?
My initial idea was to add a CSS file that references the font file but that doesn't seem to work. In my module I've made static/src/css and added a file mylayout.css. In this file I've added the following:

 @font-face 
{
    font-family: cool_font;
    src: url('nexa.otf');
}
h1
{
font-family:cool_font;
color:blue;
text-align:center;
}

I've added the CSS file to my __openerp__.py:

 # any module necessary for this one to work correctly
    'depends': ['sale','project','product'],

 'css':'static/src/css/usentric.css',
    'data': [
        # 'security/ir.model.access.csv',
	'linker_report.xml',
        'views/report_saleorder_expand.xml',
        'templates.xml',
	#This creates the default items in the model sale.order.printorder, so we don't ever have to create it manually.
	'defaultdata.xml',
	'security/ir.model.access.csv',
    ],
    # only loaded in demonstration mode
    'demo': [
        'demo.xml',
    ],

But doing so did not change anything to my report. Neither the font is used and neither is the color applied. So then I decided to give it a try with inline css (style). My code:

<h1 style="font-family:cool_font; src:url('nexa.otf');">This is to test my custom font.</h1> 

But this doesn't work either. I've added the .otf file on the same level as the XML report file. I'm 100% sure the code works because I've tested this in a basic HTML page and the font is rendered.
So, what am I missing / doing wrong and has anybody got this working?


Thanks,
Yenthe

7
الصورة الرمزية
إهمال
Deepa Venkatesh

@Yenthe, Can you please answer this query of mine. Thanks. https://www.odoo.com/forum/help-1/question/odoo9c-how-to-add-custom-fonts-to-qweb-reports-104960

الصورة الرمزية
Axel Mendoza
أفضل إجابة

Hi Yenthe

First the css that you declare in the file mylayout.css is not used because of this:

css and style declarations It's working ok, just a little more hard than expected, I just test it locally by modifying the saved view in the database for my working layout view(website module override original report layout) to add my style(ugly yeah), the scenario work by collecting the styles defined in the head of the report document, as you said is not working for the body of the report document, at least for pdf, for html is ok. The way to go is extend the report layout to add your css files or styles to the head or create a new report layout to ensure that your css is loaded in the head only for your target report template. I test it by changing the color and it works in html and pdf reports. The same apply for your needs. With that fixed you could now try again all the methods for including your custom font, including the following:

Second your custom font won't will be picked by wkhtmltopdf, but you could declare it in another way. for example:

Full explanation here:

http://blog.shahariaazam.com/use-google-web-fonts-for-wkhtmltopdf-tools/

<style type="text/css"> 
@font-face {     font-family: cool_font;     font-style: normal; font-weight: 400; src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAAD00AA4A---[large string ommited]----3MAuAH/hbAEjQA=) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAARAQAABAAQRFNJRwAAAAEAAJUIAAA---[large string ommited]-----wAAAAAAAAAAAAEAAAAA) format("truetype");
} h1{     font-family:cool_font;     color:blue;     text-align:center;  }
</style>

8
الصورة الرمزية
إهمال
Yenthe Van Ginneken (Mainframe Monkey)
الكاتب

Thanks for the reply Axel. What exactly do you mean with you can declare the same inside the report template? Do you mean to add everything between style= or? Its pretty strange that you need to base64 encode your font family by the way.. :/

Axel Mendoza

I mean like using . I update my answer to include those tags. That need to be declared as part of your report template. It's rare but it's a solution

Axel Mendoza

I mean style tag definition. Odoo forum delete the tag style in the previous comment. The answer is ok

Yenthe Van Ginneken (Mainframe Monkey)
الكاتب

@Axel thanks for the update. I did try the method of adding the CSS within the XML template but that doesn't get rendered either. Not even the color for example, so this makes me believe CSS inside the XML templates does not work?

Axel Mendoza

Docs said: Useful Remarks Twitter Bootstrap and FontAwesome classes can be used in your report template Local CSS can be put directly in the template Global CSS can be inserted in the main report layout by inheriting its template and inserting your CSS

Yenthe Van Ginneken (Mainframe Monkey)
الكاتب

@Axel I've tried adding CSS in the latest runbot for simply centering and coloring a H1 in a report and that doesn't even work. Perhaps this never even worked in Odoo? Any ideas?

Axel Mendoza

I edited my answer with the solution to load css and styles, explaining why did not work before

الصورة الرمزية
Cyril
أفضل إجابة

Hello

In odoo v10, it seems to be super easy... That's what we did with google font Roboto :

- Inherit css with google :

<xpath expr="." position="inside">
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet"/>
</xpath>

- Inherit the reports with font-family :

<xpath expr="//div[@class='page']" position="attributes">
    <attribute name="style">font-family: 'Roboto', sans-serif;</attribute>
</xpath>

- Inherit the header and footer with font-family :

<xpath expr="//div[@class='footer']" position="replace">
    <div class="footer" style="font-family: 'Roboto Condensed', sans-serif;">
...

It works with wkhtmltopdf 0.12.1


7
الصورة الرمزية
إهمال
Ermin Trevisan

Can you please explain which css file should be inherited with google? Could you provide an example of the complete xml file?

الصورة الرمزية
Jose David Moreno Hernandez
أفضل إجابة

In case someone is looking for an Odoo v12 approach:

If you just need your custom font to be rendered in your HTML reports. In your custom css file you can:

body{    
    font-family: 'Montserrat', sans-serif;
}

And then, in your assets.xml file you could inherit the report_assets_common in this way:

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
        <template id="report_assets_common" name="Technical Service Assets Reports" inherit_id="web.report_assets_common">
            <xpath expr="//link[last()]" position="after">
                <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"/> /*Here your chosen Google Font or any other*/
                <link rel="stylesheet" href="your_custom_module/static/src/css/report_styles.css"/> /*This is your custom css file*/
            </xpath>
        </template>
</odoo>

Finally add both files if not already there in your __manifest__.py:

'data': [
    'views/assets.xml',
],
'css': [
    'static/src/css/report_styles.css',
],

But this doesn't work that easy with pdf rendering. In that other case, following the @Cyril concept:

 This is for PDF printing reports:


Same as before, append your new fonts to the assets:

<?xml version="1.0" encoding="utf-8" ?>
<odoo>        
    <template id="report_assets_common" name="Technical Service Assets Reports" inherit_id="web.report_assets_common">           
        <xpath expr="//link[last()]" position="after">                 
            <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"/> /*Here your chosen Google Font or any other*/                 
            <link rel="stylesheet" href="your_custom_module/static/src/css/report_styles.css"/> /*This is your custom css file*/            
        </xpath>         
    </template>
</odoo>

You could inherit your chosen layout, in this case I'll take the external_layout_standard, and assign the styles to those part of the template you want to be affected. I'll change everything, so I'll select the header, article and the footer. Don't forget to appent to the __manifest__.py and upgrade your module after all.

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <data>
        <template id="external_layout_standard" inherit_id="web.external_layout_standard">           
            <xpath expr="//div[@class='header']" position="attributes">
                <attribute name="style">font-family: 'Montserrat', sans-serif;</attribute>
            </xpath>
            <xpath expr="//div[@class='article']" position="attributes">
                <attribute name="style">font-family: 'Montserrat', sans-serif;</attribute>
            </xpath> 
            <xpath expr="//div[@class='footer']" position="attributes">
                <attribute name="style">font-family: 'Montserrat', sans-serif;</attribute>
            </xpath>
        </template>
    </data>
</odoo>
3
الصورة الرمزية
إهمال
Fady Noor Ilmi Lubis

thank you for making it clear for the PDF

الصورة الرمزية
EasyPME
أفضل إجابة

Here is the complete xml for inheriting css :

<template id="my_module.report_assets_common" name="my_module report assets common" inherit_id="report.assets_common">
    <xpath expr="." position="inside">
        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet"/>
    </xpath>
</template>
2
الصورة الرمزية
إهمال
الصورة الرمزية
GabrielLuke
أفضل إجابة

Generically, you can use a custom font using  @font-face  in your CSS. Here’s a very basic example:
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Then, trivially, to use the font on a specific element:

`.classname {`
`    font-family: 'YourFontName';`
`}`
.classname {
    font-family: 'YourFontName';
}
``
(.classname is your selector).

Note that certain font-formats don’t work on all browsers; you can use some generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (I can’t insert more than 1 link so you can go to Google fonts) (also has auto-generated CSS  @font-face  rules, so you don’t have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn’t possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren’t very practical.

I hope that helped!

0
الصورة الرمزية
إهمال
الصورة الرمزية
Atharva System
أفضل إجابة

You can try check this module. https://apps.odoo.com/apps/modules/15.0/advanced_report_templates/

0
الصورة الرمزية
إهمال
هل أعجبك النقاش؟ لا تكن مستمعاً فقط. شاركنا!

أنشئ حساباً اليوم لتستمتع بالخصائص الحصرية، وتفاعل مع مجتمعنا الرائع!

تسجيل
المنشورات ذات الصلة الردود أدوات العرض النشاط
How to change fonts in QWeb Reports v11.0
qweb reporting fonts v11.0
الصورة الرمزية
الصورة الرمزية
الصورة الرمزية
الصورة الرمزية
4
أبريل 18
17520
How to check checkbox state in QWeb report? تم الحل
qweb reporting checkbox odoo8.0
الصورة الرمزية
الصورة الرمزية
1
مارس 15
13704
How can I display all tasks (including completed ones) in a QWeb report in Odoo?
qweb reporting
الصورة الرمزية
الصورة الرمزية
2
سبتمبر 24
3069
Odoo 8 Reporting : Change default "Total" label تم الحل
reporting odoo8.0
الصورة الرمزية
الصورة الرمزية
1
مارس 22
8211
How do i create report in Qweb? تم الحل
qweb reporting
الصورة الرمزية
الصورة الرمزية
الصورة الرمزية
الصورة الرمزية
الصورة الرمزية
5
أغسطس 19
47566
المجتمع
  • دروس
  • التوثيق
  • المنتدى
مصدر مفتوح
  • تحميل
  • جيت هاب "Github"
  • المشغل الآلي رنبوت
  • الترجمات
خدماتنا
  • استضافة أودو إس إتش
  • الدعم
  • الترقية
  • التطويرات المخصصة
  • التعليم
  • اعثر على محاسب
  • اعثر على شريك
  • كنْ شريكاً
معلومات عنا
  • شركتنا
  • أصول العلامة التجارية
  • اتصلْ بنا
  • الوظائف
  • فعاليات
  • بودكاست
  • مدونة
  • عملاء
  • قانوني • الخصوصية
  • الحماية
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

أودو هو عبارة عن مجموعة من تطبيقات الأعمال مفتوحة المصدر التي تغطي جميع احتياجات شركتك، مثل: إدارة علاقات العملاء والتجارة الإلكترونية والمحاسبة والمخزون ونقاط البيع وإدارة المشاريع وما إلى ذلك.

ما يجعل من أودو مميزاً هو هدفه بأن يكون سهل الاستخدام للغاية ومتكاملاً تمامًا في الوقت ذاته.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now