How to Add Custom Fonts in Odoo18

Branding and user experience are now critical in the constantly changing world of commercial apps. Odoo 18 offers more features for personalizing your business apps, such as advanced font management choices. With Odoo 18, you can generate professional, branded papers that reflect the identity of your business by customizing report layouts and fonts.

This complete guide will show you the different ways to add custom fonts to Odoo 18.

Why Custom Fonts Matter in Odoo 18

Custom fonts serve multiple purposes in modern business applications:

• Brand Consistency: Maintain your corporate identity across all documents and interfaces
• Professional Appearance: Create polished, branded reports and web interfaces
• User Experience: Enhance readability and visual appeal
• Compliance: EU regulations emphasize the importance of hosting fonts locally to ensure compliance by reducing reliance on external font sources

Method 1: Using Odoo 18 Web Editor (Quick Setup)

The easiest way to add custom fonts is through Odoo's built-in web editor.

Step 1: Access the Website Editor

1. Navigate to your Odoo 18 website
2. Click Edit to enter the website editor
3. Go to the Theme tab in the editor panel

Step 2: Add Custom Font

• Click on the font-family selection box and select 'Add a Custom Font' option.

• In the dialog box that appears, you can:
• Add a Google Font URL
• Important: Disable "Serve from Google servers" for local hosting.

• Copy the font URL from Google Fonts website
• Click Save & Reload

Step 3: Apply the Font

Once added, your custom font will appear in the font-family list and can be applied to any website element.

Method 2: Creating a Custom Theme Module (Recommended)

For more control and professional implementation, create a custom theme module. Here is a sample module provided.

Module Structure

custom_theme/
+-- __manifest__.py
+-- static/
¦   +-- src/
¦       +-- fonts/
¦       ¦   +-- Barrio-Regular.ttf
|       |
¦       +-- scss/
¦           +-- primary_variables.scss

Manifest File (__manifest__.py)

'assets': {
        'web._assets_primary_variables': [
            'custom_theme/static/src/scss/primary_variables.scss',
        ],
    },

SCSS Configuration (primary_variables.scss)

// Define custom font faces
@font-face {
   font-family: 'CustomFont-Regular';
   src: url('/cutom_theme/static/src/fonts/Barrio-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
}
// Merge with Odoo's theme font configurations
$o-theme-font-configs: map-merge($o-theme-font-configs, (
   'CustomFont-Regular': (
       'family': ('CustomFont-Regular'),
   ),
));

Here you can use your own font files or can download the font files from website. I have downloaded and extracted this file ‘Barrio-Regular.ttf’ from https://fonts.google.com/selection?categoryFilters=Feeling:%2FExpressive%2FPlayful and added it to the above-mentioned path.

Applying Your Custom Fonts

Once you've successfully installed the custom font module, accessing and using your fonts becomes straightforward:

Step 1: Navigate to Theme Options

After module installation, visit your website's theme configuration page. You'll now see your custom font appearing as an available option in the theme selection interface.

Step 2: Activate the Custom Font Theme

Select your custom font theme from the available theme options. This will enable all the fonts you've configured within that theme module.

Step 3: Use Fonts in Website Editor

To apply your custom fonts to website content:

1. Open the website editor by clicking the Edit button
2. Navigate to the Theme tab in the editor panel
3. Click on the Font Family dropdown menu
4. Your custom fonts will now appear in the list alongside the default Odoo fonts
5. Select your desired custom font to apply it to the selected element

Step 4: Apply Fonts to Specific Elements

You can now use your custom fonts throughout your website:

• Select any text element on your page
• Choose your custom font from the font family dropdown
• The font will be applied immediately with live preview

Your custom fonts are now fully integrated into Odoo's website editor, allowing you to maintain brand consistency across all your web pages while working within Odoo's intuitive editing interface.

Conclusion

Adding custom fonts in Odoo 18 offers multiple approaches depending on your needs:

• Web Editor: Quick setup for simple requirements
• Custom Theme: Professional implementation with full control

By hosting fonts locally, you ensure compliance with EU privacy standards while maintaining complete control over your brand presentation. Choose the method that best fits your project requirements and technical expertise.

Remember to always test your font implementations across different browsers, devices, and output formats (web, PDF, print) to ensure a consistent user experience.

To read more about How to Add Custom Fonts in Odoo 17, refer to our blog How to Add Custom Fonts in Odoo 17.