I want to add my custom font to website theme editor > options > font family.
That custom font isn't related to "Google Web Fonts" and it has its own folder and files.
I'm using Odoo 14 with default theme.
tnx.
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project management
- MRP
This question has been flagged
4
Replies
14731
Views
you need to follow these steps:
Prepare your custom font files: Make sure you have the necessary font files in the proper formats (e.g., .woff, .woff2, .ttf, etc.) for your custom font. Place these font files in a directory within your Odoo module.
Define the font in your Odoo module's assets: In your module, create a static assets directory (e.g., static/src/fonts) and place your custom font files in this directory. Also, create a CSS file (e.g., static/src/css/custom_fonts.css) to define the font face rules.
Define the font face rules: In the custom_fonts.css file, define the @font-face rules for your custom font. For example:
@font-face {
font-family: 'YourCustomFontName';
src: url('/your_module_name/static/src/fonts/YourCustomFont-Regular.woff2') format('woff2'),
url('/your_module_name/static/src/fonts/YourCustomFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Replace 'YourCustomFontName' with the actual name you want to use for your font, and adjust the paths in the url() statements to match the location of your font files within your module.
- include the font CSS file in the assets section:
"web.assets_frontend": [ "your_module_name/static/src/fonts/YourCustomFont-Regular.woff", "your_module_name/static/src/fonts/YourCustomFont-Regular.woff2", "your_module_name/static/src/css/custom_fonts.css" ], "web.assets_qweb": [ "your_module_name/static/src/fonts/YourCustomFont-Regular.woff", "your_module_name/static/src/fonts/YourCustomFont-Regular.woff2", "your_module_name/static/src/css/custom_fonts.css" ]
Restart your Odoo server and update the module: After restarting the server, update your module to load the new assets.
Customize the website theme: Go to the Odoo backend and navigate to Website > Configuration > Website Settings. In the "Options" tab, you should now see your custom font in the font family options. Select your custom font to apply it to the website theme.
Hello Mishaghmi,
You can give a path of your font folder in css.
.test {
@font-face {
font-family: 'myfont';
src: url('/theme_test/static/src/fonts/230163575-DINNextLTArabic-Regular.eot');
src: url('/theme_test/static/src/fonts/230163575-DINNextLTArabic-Regular.eot?#iefix') format('embedded-opentype'),
url('/theme_test/static/src/fonts/230163575-DINNextLTArabic-Regular.woff') format('woff'),
url('/theme_test/static/src/fonts/230163575-DINNextLTArabic-Regular.ttf') format('truetype'),
url('/theme_test/static/src/fontss/230163575-DINNextLTArabic-Regular.svg#DIN Next LT Arabic') format('svg');
font-weight: normal;
font-style: normal;
}
li {
font-family: 'myfont';
}
}
Thank you!
Regards,
Email: odoo@aktivsoftware.com
Skype: kalpeshmaheshwari
Thanks für your solution Jainesh! Stupid Question, how do I access the odoo file system? I do not use odoo on premise, I use the cloud installation. Could you please briefly describe how I can access the files - i.e. how I can access the font folder in css? Thanks and br Horst
Hi,Please refer to this blog to understand how to add custom fonts to the theme.
https://www.cybrosys.com/blog/how-to-add-new-fonts-to-the-odoo-15-website
Even though it says about how to add custom fonts in version 15, 14 also follows the same steps.
Hope it helps
How about fopr odoo 16? The same?
@Misaghmi
Have you found any solution?