Skip to Content

Website Google Fonts

by
Odoo

$ 35.28

v 16.0 Third Party
Live Preview
Availability
Odoo Online
Odoo.sh
On Premise
Odoo Apps Dependencies • Website (website)
• Discuss (mail)
Lines of code 449
Technical Name bt_website_google_fonts
LicenseOPL-1
Websitehttps://broditech.com/shop/website-google-fonts-100#attribute_values=3
Versions 16.0 17.0 18.0 19.0
You bought this module and need support? Click here!
Availability
Odoo Online
Odoo.sh
On Premise
Odoo Apps Dependencies • Website (website)
• Discuss (mail)
Lines of code 449
Technical Name bt_website_google_fonts
LicenseOPL-1
Websitehttps://broditech.com/shop/website-google-fonts-100#attribute_values=3
Versions 16.0 17.0 18.0 19.0

Website Google Fonts

Apply any Google Font to individual elements directly from the website editor - fonts load only on pages where they are used.

Odoo 16 200 + built-in fonts Full API catalog Zero render-blocking OPL-1
Website Google Fonts - hero banner

What does this module do?

Website Google Fonts extends the Odoo website editor with a dedicated font picker that lets editors assign any Google Font to sections, columns, paragraphs, and headings - all without touching a single line of code.

Unlike theme-level font settings that apply site-wide, this module works per element: you select a block, pick a font, and only that block changes. Fonts are loaded lazily at runtime, so a page never downloads a font it does not actually use.

Per-element font control

Assign different fonts to sections, columns, headings, and paragraphs - all from the editor toolbar.

Searchable font picker

200 + curated fonts built-in. Optionally connect a Google Fonts API key to unlock the full 1 400 + font catalog, sorted by popularity.

Live preview

Hover over any font in the picker to preview it instantly before applying. The preview renders in the selected font in real time.

Performance-first loading

On the frontend, a single combined stylesheet request loads only the fonts used on that specific page. Unused fonts are never downloaded.

Non-destructive editing

Use the standard "Remove Format" button in the editor toolbar to clear any applied font and revert to the theme default.

Dynamic catalog via API

When an API key is configured, the picker fetches the latest font list directly from Google - always up to date with new releases.

Editor toolbar button

A new button appears in the inline formatting toolbar of the website editor. It displays the currently active font name for the selected block and opens the picker with one click.

Google Font button in the editor toolbar

Font selector button in the Odoo website editor toolbar

Font picker dialog

The picker dialog lists all available fonts in a scrollable list. Type to filter instantly. Hover a font name to preview it live. Click a name to select it, then press Apply.

Font picker dialog with search and live preview

Searchable font picker with live preview

Live preview in action

As you hover over font names the preview box below the list updates in real time, rendering the sample sentence in the hovered font so you can compare options without committing.

Live font preview inside the picker

Instant preview - "The quick brown fox jumps over the lazy dog"

Using the font picker in the editor

Follow these steps to apply a Google Font to any element on your website.

  1. Open the website editor

    Navigate to your website and click Edit in the top bar to enter editing mode.

    Open the website editor

  2. Click inside a text block

    Click inside a section, column, heading (h1–h6), paragraph, or text block. The inline formatting toolbar will appear at the top.

    Select a text block in the editor

  3. Click the font button in the toolbar

    Find the font selector button (shows the current font name or "None") on the left side of the toolbar, before the text style controls. Click it to open the font picker dialog.

    Click the font button in the toolbar

  4. Search and select a font

    Type part of a font name to filter the list. Hover a font to preview it. Click the font name to select it - the highlighted row confirms your choice. To revert to the theme default, click Default at the top of the list.

    Search and select a Google Font

  5. Press Apply

    Click Apply to assign the font to the selected block. The toolbar button updates immediately to show the new font name. Save the page as usual.

    Press Apply to confirm the font selection

  6. Remove a font (optional)

    To clear a font from a block, click inside it and press the Remove Format button (Tx) in the toolbar. The element reverts to the default theme font.

Performance note: fonts are bundled into a single stylesheet request per page. If two blocks on the same page use the same font, it is only downloaded once. Pages with no custom fonts make zero extra network requests.

Module configuration

The module works out of the box with no required configuration. The optional Google Fonts API key unlocks the full catalog.

Where to find the settings

Go to Website > Configuration > Settings and scroll to the Google Fonts section.

Google Fonts API Key field in Website Settings

Google Fonts API Key field in Website > Configuration > Settings

Built-in font list (no API key required)

Without an API key the picker uses a curated list of 200 + popular Google Fonts covering serif, sans-serif, monospace, display, and handwriting categories. This works entirely offline from the picker - fonts are still loaded from Google Fonts CDN when applied to a page.

Included fonts include: Inter, Roboto, Poppins, Lato, Montserrat, Playfair Display, Merriweather, Source Code Pro, Dancing Script, Bebas Neue, and 190 + more.

Full catalog via API key

When a valid Google Fonts API key is saved in settings, the picker fetches the complete Google Fonts catalog (1 400 + families) sorted by popularity directly from https://www.googleapis.com/webfonts/v1/webfonts. The list updates automatically as Google releases new fonts.

If the API key is invalid or the request fails, the picker silently falls back to the built-in list - your editors are never blocked.

Important: the API key is used only server-side to fetch the font name list. It is never exposed to the browser. Actual font files are always loaded directly from the Google Fonts CDN by the visitor's browser.

Enabling the API key - quick reference

  1. Obtain a Google Fonts API key (see the Get a Google API Key tab for full instructions).
  2. Go to Website > Configuration > Settings.
  3. Paste the key into the Google Fonts API Key field (AIza...).
  4. Click Save.
  5. Open the font picker in the editor - the full catalog loads automatically.

How to get a Google Fonts API Key

A Google Fonts API key lets the module fetch the full, up-to-date font catalog from Google. Keys are free and subject to generous quotas (well above any normal Odoo usage).

Time required: ~5 minutes. You need a Google account to proceed.

  1. Go to Google Cloud Console to get the key

    Open Google Cloud Console at https://developers.google.com/fonts/docs/developer_api#APIKey and click on Get a Key and follow the steps.

    Google Cloud docs to get an API key

  2. Paste the key into Odoo settings

    In Odoo go to Website > Configuration > Settings. Find the Google Fonts section and paste the key (starts with AIza) into the Google Fonts API Key field. Click Save.

    Paste the API key into Odoo Website Settings

    Paste the key in Website > Configuration > Settings > Google Fonts

  3. Verify - open the font picker

    Open the website editor, click inside a text block, and open the font picker. If the key is valid you will see the full Google Fonts catalog (1 400 + fonts) instead of the default 200-font list.

    Font picker showing the full Google Fonts catalog

    Full catalog loaded - 1 400 + fonts available

Quota & cost: the Web Fonts Developer API is free. Google's free tier allows 10 000 requests per day, far more than any typical Odoo instance will ever use (the key is queried once per editor session, not per page view).

Troubleshooting

  • Picker still shows only 200 fonts after saving the key: verify the key is correct, the Web Fonts Developer API is enabled for the selected project, and the key is not restricted to wrong APIs.
  • "Request had insufficient authentication scopes" error in Odoo logs: the API restriction is too narrow - ensure Web Fonts Developer API is in the allowed list.
  • Key starts with something other than AIza: you may have copied a service account key or OAuth client ID instead of an API key. Return to Credentials and create a plain API key.

Developed by Broditech Solutions S.L. 

Odoo Proprietary License v1.0

This software and associated files (the "Software") may only be used (executed,
modified, executed after modifications) if you have purchased a valid license
from the authors, typically via Odoo Apps, or if you have received a written
agreement from the authors of the Software (see the COPYRIGHT file).

You may develop Odoo modules that use the Software as a library (typically
by depending on it, importing it and using its resources), but without copying
any source code or material from the Software. You may distribute those
modules under the license of your choice, provided that this license is
compatible with the terms of the Odoo Proprietary License (For example:
LGPL, MIT, or proprietary licenses similar to this one).

It is forbidden to publish, distribute, sublicense, or sell copies of the Software
or modified copies of the Software.

The above copyright notice and this permission notice must be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.

Please log in to comment on this module

  • The author can leave a single reply to each comment.
  • This section is meant to ask simple questions or leave a rating. Every report of a problem experienced while using the module should be addressed to the author directly (refer to the following point).
  • If you want to start a discussion with the author or have a question related to your purchase, please use the support page.