Help is on the way!

Browse our Documentation, Search the Knowledge Base, Still need help? Send us a support ticket.


The JoomlaXTC Google Fonts plugin allows you to easily display text content using any of the Google Font families available.


Upload the plugin .zip file to your site using the Joomla Installer, then enable it in the Plugin manager.


There are two ways to add Google fonts to your content, the first involves editing the content itself to add a special tag to change the content font, and the second allows you to set font styles using your template's CSS (Cascade Style Sheets) file, if you are familiar with it or just want to have styling code separate.

Plugin Parameters
The plugin can be customized using the standard Joomla! Plugin Manager, this is a brief explanation of them:

Plugin parameters
Default Size
Select a default font size or 'Default' if you are specifing the font size within the tag itself (see below).
Enter one or more Google font family names (one family per row). These font families will always be loaded in your site regardless of use in the content tag (see below).
Content Tag
Applying font changes in your content is done by adding a custom tag within the text of your article or item. Keep in mind that 3rd party extensions must be capable of using Joomla! content plugins if you want to use it on their content.

In order to change the font of your text content, edit the Article or item using the Joomla! article editor or 3rd party item editor, locate the beginning of the text you want to modify within the content, and surround it with placeholder tags like these:

{gfont family}your text{/gfont}

Where family is the Google Font family name that you want to use. The font families currently available are listed here:, just click in the font that want to add in your site to see the Font API parameter name and a demo text to see how it looks.

Save the article once you have entered the placeholder tag and review the changes in the frontend of your site. You should now see the article text using the selected font.

If you are familiar with CSS code, you can add additional attributes by appending them with semicolons in between, for example:

{gfont Tangerine;font-size:24px}your text{/gfont}

The example above will render "your text" with a 24 pixels high Tangerine font.

Template CSS

There are times when you would rather have font stylings done globally on your site, for this reason you can use the Families parameter to specify one or more fonts to be loaded on every page of your site, regardless of the content being shown.

Use the the Familiy parameter to enter the family name (as shown in Google's website) of every font you want, one family per row, and edit your template or other CSS file according to your needs. Of course, the Content Tag is still available if you want to override font attributres for a particular piece of text.

The plugin will only load each family of fonts once regardless of how many times you use it.


These are two examples of how the placeholder tag can look in your text content:

  • If you want to see only one font:
    {gfont Reenie Beanie}Google Fonts{/gfont}
  • If you want to get the same that we have in demo:
    {gfont Reenie Beanie; font-size:48px; text-shadow:4px 4px 4px #aaa;}Google Fonts{/gfont}
    < span style="font-family:Tangerine; font-size:48px; text-shadow:4px 4px 4px #aaa; margin-left: 250px;">JoomlaXTC< /span>
    < span style="font-family:Lobster; font-size:48px; text-shadow:4px 4px 4px #aaa; margin-left: 500px;">I love JXTC!< /span>

Copyright 2010 Monev Software LLC

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.


Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.