Your PageSpeed Dropped to 78 Because of Fonts: Add Custom Fonts in Odoo 18
By Braincuber Team
Published on December 20, 2025
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.
You Need This If:
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 | Setup Time | Works On | GDPR Safe |
|---|---|---|---|
| Web Editor (Quick) | 5 minutes | Website only | Only if self-hosted |
| Theme Module (Proper) | 30 minutes | Website + PDFs + Emails | Yes (fully local) |
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
- Go to fonts.google.com
- Search for your font (e.g., "Montserrat")
- Select weights you need (Regular 400, Bold 700)
- Click "View selected families"
- Copy the
<link>URL (looks like:https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700)
Step 2: Add Font in Odoo
- Open your Odoo website
- Click Edit (top-right)
- Click Theme tab in left panel
- Find Font Family dropdown
- Click "Add a Custom Font"
- Paste the Google Fonts URL
- IMPORTANT: Uncheck "Serve from Google servers"
- Click Save & Reload
Why uncheck "Serve from Google servers"? If checked, your site loads fonts from Google's CDN. That's an external request that slows down your site AND sends user data to Google (GDPR violation). Unchecking downloads the font to your Odoo server.
Step 3: Apply Font to Elements
- Still in Edit mode
- Click any text element
- In the formatting toolbar, click font dropdown
- Select your newly added font
- Repeat for headings, body text, etc.
- Click Save
Limitation: This method only affects website content. Your PDF reports and transactional emails will still use default fonts. For full brand consistency, use Method 2.
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.
- Go to fonts.google.com
- Find your font (e.g., "Montserrat")
- Click Download family
- 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),
),
));
Path matters: The URL in @font-face must match your module name exactly. If your module is called my_fonts, the path should be /my_fonts/static/src/fonts/...
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
- Restart Odoo server (to detect new module)
- Go to Apps menu
- Click Update Apps List
- Search: "Custom Brand Fonts"
- Click Install
Step 8: Apply Font
- Go to your website
- Click Edit
- Click Theme tab
- Find font dropdown
- Select "Montserrat" (now available)
- Apply to headings, body text, etc.
- Save
Testing Your Font Works Everywhere
Checklist:
- Website: Open homepage, check if font displays correctly
- PDF reports: Generate a quotation PDF, verify font in document
- Emails: Send a test sales order confirmation, check email font
- Backend: Check if form views use correct font
- Mobile: Test on mobile device (fonts should load)
- PageSpeed: Run test - should see no external font requests
Common Mistakes That Break Fonts
1. Wrong File Path in SCSS
Your module is named brand_fonts but SCSS says /custom_fonts/.... Font doesn't load.
Fix: Path in @font-face must match module name exactly.
2. Forgetting to Restart Odoo
You add the module but don't restart server. Module doesn't appear in Apps list.
Fix: Always restart Odoo after adding new modules to addons folder.
3. Using Wrong Font Format
You upload a .otf file but SCSS specifies format('truetype'). Browser can't parse it.
Fix: Use .ttf files with format('truetype') or .woff2 with format('woff2').
4. Font Name Mismatch
File is named Montserrat-Regular.ttf but font-family says 'MontserratRegular'. Won't work.
Fix: font-family name in SCSS must match what you register in $o-theme-font-configs.
Performance Impact
We tested page load times before/after implementing custom fonts properly:
| Metric | Google Fonts CDN | Self-Hosted (Method 2) |
|---|---|---|
| External requests | 2 (CSS + font files) | 0 |
| Font load time | 340ms | 87ms |
| PageSpeed score | 78 | 92 |
| GDPR compliant | No (sends data to Google) | Yes (fully local) |
Font Licensing (Don't Get Sued)
Not all fonts allow web embedding. Check licenses before using.
Safe Font Sources:
- Google Fonts: All free, all allow embedding (open license)
- Adobe Fonts: Check license - some allow, some don't
- MyFonts/FontShop: Buy "webfont license" specifically
- Custom fonts: If you commissioned it, get written permission for web use
Red flag: If font license says "desktop use only," you can't use it on websites legally.
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
- Download font files (.ttf format from Google Fonts or purchased source)
- Create module folder in Odoo addons directory
- Add font files to
static/src/fonts/ - Create SCSS with
@font-facedefinitions - Create manifest linking SCSS to
web._assets_primary_variables - Restart Odoo and install module
- Apply font in website theme settings
- Test on website, PDFs, and emails
- Run PageSpeed to verify no external font requests
Time Investment: Method 1 (Web Editor): 5 minutes, website only. Method 2 (Theme Module): 30 minutes, works everywhere forever. Choose wisely.
Brand Fonts Not Working in Odoo?
We build custom theme modules with your brand fonts, optimize for PageSpeed, ensure GDPR compliance, and apply fonts across all Odoo documents. Stop using Arial when your brand guidelines say Montserrat.
