Your PageSpeed Dropped to 78 Because of Fonts: Add Custom Fonts in Odoo 18

Your Odoo website loads Google Fonts from their CDN. Every page load: 2 external requests to fonts.googleapis.com and fonts.gstatic.com. Total latency: 340ms just for fonts. Your PageSpeed score dropped from 92 to 78 because of external font requests.

Worse: You're in the EU. GDPR says loading fonts from Google = sending user data to Google = you need cookie consent just for displaying text. Your lawyer sent a $4,200 compliance audit bill because your site was loading Roboto from Google servers without proper consent banners.

Plus your brand guidelines say use "Montserrat Bold" everywhere. But Odoo's default theme only has system fonts. Every PDF report, every email, every web page—wrong font. Your marketing director keeps complaining that documents "don't look like our brand."

Odoo 18 lets you add custom fonts properly. Host them locally, use them everywhere, stay GDPR-compliant, and speed up page loads by 340ms. Here's how to do it without breaking your theme.

Two Methods: Quick vs Proper

Odoo 18 has two ways to add custom fonts. One is fast but limited. One takes longer but actually works everywhere.

Method 1: Web Editor (5-Minute Shortcut)

Good for testing fonts before committing to a theme module. Not GDPR-compliant unless you self-host the font files.

Step 1: Get Google Font URL

1. Go to fonts.google.com
2. Search for your font (e.g., "Montserrat")
3. Select weights you need (Regular 400, Bold 700)
4. Click "View selected families"
5. Copy the <link> URL (looks like: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700)

Step 2: Add Font in Odoo

1. Open your Odoo website
2. Click Edit (top-right)
3. Click Theme tab in left panel
4. Find Font Family dropdown
5. Click "Add a Custom Font"
6. Paste the Google Fonts URL
7. IMPORTANT: Uncheck "Serve from Google servers"
8. Click Save & Reload

Step 3: Apply Font to Elements

1. Still in Edit mode
2. Click any text element
3. In the formatting toolbar, click font dropdown
4. Select your newly added font
5. Repeat for headings, body text, etc.
6. Click Save

Method 2: Custom Theme Module (The Right Way)

Creates a proper Odoo module that applies your font everywhere: website, backend, PDFs, emails. Takes 30 minutes but solves the problem permanently.

Step 1: Download Font Files

You need the actual font files (.ttf, .woff, .woff2), not just Google's CSS link.

1. Go to fonts.google.com
2. Find your font (e.g., "Montserrat")
3. Click Download family
4. Extract the .ttf files you need (e.g., Montserrat-Regular.ttf, Montserrat-Bold.ttf)

Or use a font you purchased (like fonts from Adobe, MyFonts, etc.). Make sure you have a license that allows web embedding.

Step 2: Create Module Structure

Create this folder structure in your Odoo addons directory:

custom_brand_fonts/
├── __init__.py
├── __manifest__.py
└── static/
    └── src/
        ├── fonts/
        │   ├── Montserrat-Regular.ttf
        │   └── Montserrat-Bold.ttf
        └── scss/
            └── primary_variables.scss

Step 3: Create __init__.py

Empty file. Just create it.

# __init__.py
# Empty - required for Python module

Step 4: Create __manifest__.py

{
    'name': 'Custom Brand Fonts',
    'version': '18.0.1.0.0',
    'category': 'Theme',
    'summary': 'Adds Montserrat font for brand consistency',
    'description': """
        Custom font module for brand guidelines.
        Applies Montserrat across website, PDFs, and emails.
    """,
    'author': 'Your Company',
    'depends': ['web'],
    'data': [],
    'assets': {
        'web._assets_primary_variables': [
            'custom_brand_fonts/static/src/scss/primary_variables.scss',
        ],
    },
    'installable': True,
    'application': False,
    'license': 'LGPL-3',
}

Step 5: Create primary_variables.scss

This is where you define your font faces and register them with Odoo's theme system.

// Define font faces
@font-face {
    font-family: 'Montserrat';
    src: url('/custom_brand_fonts/static/src/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/custom_brand_fonts/static/src/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

// Register with Odoo theme system
$o-theme-font-configs: map-merge($o-theme-font-configs, (
    'Montserrat': (
        'family': ('Montserrat', sans-serif),
    ),
));

Step 6: Place Font Files

Copy your .ttf files into:

custom_brand_fonts/static/src/fonts/
├── Montserrat-Regular.ttf
└── Montserrat-Bold.ttf

Step 7: Install Module

1. Restart Odoo server (to detect new module)
2. Go to Apps menu
3. Click Update Apps List
4. Search: "Custom Brand Fonts"
5. Click Install

Step 8: Apply Font

1. Go to your website
2. Click Edit
3. Click Theme tab
4. Find font dropdown
5. Select "Montserrat" (now available)
6. Apply to headings, body text, etc.
7. Save

Testing Your Font Works Everywhere

Common Mistakes That Break Fonts

Performance Impact

We tested page load times before/after implementing custom fonts properly:

Font Licensing (Don't Get Sued)

Not all fonts allow web embedding. Check licenses before using.

Multiple Font Weights

If you need multiple weights (Light 300, Regular 400, Bold 700), add multiple @font-face blocks:

@font-face {
    font-family: 'Montserrat';
    src: url('/custom_brand_fonts/static/src/fonts/Montserrat-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/custom_brand_fonts/static/src/fonts/Montserrat-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/custom_brand_fonts/static/src/fonts/Montserrat-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

Now when you use <strong> or font-weight: 700, it automatically uses Bold. When you use font-weight: 300, it uses Light.

Quick Implementation Checklist