QR Code

Scan the QR code to visit this page. LIVE demo for Automatic QR CODE plugin

Google Font integration for Joomla changes your font to Google without touching the site’s CSS directly.

Joomla google fonts module

How to use Google fonts for Joomla website 

Module Purpose

This Joomla extension enables administrators to selectively apply different Google Fonts to heading tags (<h1> through <h6>) and other UI elements—like body text, buttons, forms, menus, and blockquotes—without touching the site’s CSS directly.

 

Heading Font Configuration (H1–H6)

Each heading level receives its own dedicated font selector:

  • Backend Settings: Six separate input fields labeled for H1 to H6.

  • Function: Admins input the desired Google Font name (e.g., Poppins, Lato) for each heading level.

  • Result: The module dynamically includes the font from Google Fonts and applies it via inline styles or embedded CSS.

 

Non-Heading Font Options

LabelFunctionality Description
Body Text Font Sets the font for paragraphs (<p>), generic div content, and other body-level text. Admins input a font name like 'Open Sans' or 'Roboto'.
Buttons Font Controls the font styling for <button> elements and clickable items styled like buttons. Ideal for harmonizing typography across CTAs.
Form Inputs Font Applies font styling to <input>, <textarea>, and <select> fields. This enhances form readability and aesthetic consistency.
Menu Font Targets navigation menus and links typically found in ul > li, dropdowns, or navbar components. Ensures a consistent look for primary site navigation.
Blockquotes Font Adjusts typography for <blockquote>, quotations, and testimonial boxes. Perfect for styling featured quotes or customer feedback sections with a unique flair.
 

Each of these labels uses a backend configuration field that pulls the selected Google Font from the user's input, dynamically embedding the font and applying it across relevant elements on the frontend.

 

You do not have permission to manage article hits.

QR Code

Scan the QR code to visit this page. LIVE demo for Automatic QR CODE plugin