Enable Dark Mode!
how-to-add-new-fonts-to-the-odoo-15-website.jpg
By: Sruthi M

How to Add New Fonts to the Odoo 15 Website

Technical Odoo 15 Website&E-commerce

Odoo is the most popular ERP software in the world. We can easily manage our business prospects with Odoo. We can design or develop our own website through Odoo. For that, we can use different themes and styles.

This blog explains how we can add new fonts to our Odoo Website. For adding fonts to our website, there are two methods. One is we can use google web fonts, and the other one is we can add fonts from the font files.

Google Web Fonts:

We can use google fonts for our website. We can add google font’s URL to our website.  For that, first, go to the website editor; then, inside the themes, we can see the font family option. And from the list, we can choose to Add a Google Font option. I.e.,

how-to-add-new-fonts-to-the-odoo-15-website-cybrosys

When clicking this option, it a wizard will appear for adding a google font address.

how-to-add-new-fonts-to-the-odoo-15-website-cybrosys

We can use this link for selecting the fonts. When selecting the fonts, copy the URL and paste it here, then click Save&Reload.

In this way, we can add google fonts to our website.

Use Font Files:

We can also add fonts from different font files. For that, First, we need to add the font files to the fonts folder. We can create a font folder inside static.

how-to-add-new-fonts-to-the-odoo-15-website-cybrosys

Then we want to give the path of the font files in scss.

For Example:

@font-face {
font-family: 'Montserrat Bold';
src: url('/website_default_fonts/static/src/fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Montserrat Regular';
src: url('/website_default_fonts/static/src/fonts/Montserrat-Regular.ttf') format('truetype');
}

The next step is we need to append the newly added fonts with already existing fonts. For that, we can create another scss file. And give the path of this file inside the assets web._assets_primary_variables and use prepend.  Ie,

'web._assets_primary_variables': [
("prepend", "website_default_fonts/static/src/scss/primary_variables.scss"),
],

Inside this scss file append all the fonts you added. For example:

$o-theme-font-configs: (
    'Roboto': (
        'family': ('Roboto', sans-serif),
        'url': 'Roboto:300,300i,400,400i,700,700i',
    ),
    'Open Sans': (
        'family': ('Open Sans', sans-serif),
        'url': 'Open+Sans:300,300i,400,400i,700,700i',
    ),
    'Source Sans Pro': (
        'family': ('Source Sans Pro', sans-serif),
        'url': 'Source+Sans+Pro:300,300i,400,400i,700,700i',
    ),
    'Raleway': (
        'family': ('Raleway', sans-serif),
        'url': 'Raleway:300,300i,400,400i,700,700i',
    ),
    'Noto Serif': (
        'family': ('Noto Serif', serif),
        'url': 'Noto+Serif:300,300i,400,400i,700,700i',
    ),
    'Arvo': (
        'family': ('Arvo', Times, serif),
        'url': 'Arvo:300,300i,400,400i,700,700i',
    ),
    'Montserrat Bold': (
        'family': ('Montserrat Bold'),
    ),
    'Montserrat Regular': (
        'family': ('Montserrat Regular'),
    ),
) !default;

Then go to the website -> themes inside the Font Family we can see newly added fonts.

how-to-add-new-fonts-to-the-odoo-15-website-cybrosys

These two fonts are newly added by using font files. Then we can choose the fonts for our website.

These are the two methods for adding new fonts to our website.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message