How to use Google Web Fonts in a template.

Starting with JM-HCT-Pharmacy template we started to build our templates on new frameworks with extended functionality.
JM-HCT-Pharmacy is based on HCT framework that provides multiple parameters on the Template Manager including the great feature - creating your own template color version without touching css code.
Another templates listed here use similar framework (not as much advanced as HCT framework) but still full of useful and powerful tools that you can manage at the template back end. 

The feature I would like to describe is included in Font Settings configuration tab, where you can modify the font option if you do not like the one that is used on a demo site of a particular template.
Let's take for example JM-Royal-Beauty-Salon template, addressed for beauty salon.

We used Open Sans Google Web Font for module headings, dj-menu and article titles for this template.
Now let's assume: we do not like that font. However, if the template uses your favourite font, you will consider to buy it :)
It's very simple to do, there are no limits to use any other Google Web Font.

At first, login to administrator panel and navigate Extensions -> Template Manager and click on the template name, then open Font Settings tab:


Let's change the font name for the article title, it looks as follows now:


Now, we have to choose the font we like, so visit
A wide range of fonts allows to choose the one, most suitable for your business website.
I choosed Codystar font,  then have to click on Quick-use icon to copy the necessary code:


There are several font styles to select from but our template uses normal style, so check NORMAL 400 option.
Note: using many font styles affect your site load speed, do not choose font style options that you do not need.


The next step is choosing character set. If the font supports any other characters besides Latin, they will be listed near the basic one, for example: Latin Extended, Cyrillic, Greek, Khmer, Vietnamese.
You can also use Script filter while searching through to narrow down the font selection to specified character sets.


Finally, we reached the code part that you should replace in the template.
At first, we have to embed the font collection and then put the font name that was generated.


Simply copy and paste the marked code in our template parameters options list:


Once it's entered save settings.
I also enlarged the font size since the previous one (21px) was too small for Codystar font.

The result:



In case your template does not use the framework I mentioned above, you can still use Google Web Fonts API in a very simple way.

Simply copy the code:

<link href='' rel='stylesheet' type='text/css'>

to <head tag of the HTML document of your template (usually it's in lib/php/dj_head.php in our templates)

and then add the following style of the font name to any CSS selector you want:

font-family: 'Codystar', cursive;

For example:

div.item-page h2 { font-family: 'Codystar', cursive; }

Try it with your template!

Tips for Joomla templates

Latest Template



Hot Deal! 3 templates discounted by 30%!

2016-05-18 14:06:00
Wednesday Offer has been updated. Each template within this offer you can get with 30% discount! ...

Check 3 hot templates with 30% discount!

2016-05-12 09:06:00
For the next 7 days you have an occasion to purchase a template from our Wednesday Offer. Each templat ...


Artists! Show off your work by using this professional portfolio template!

2016-05-20 12:44:04
Every artist needs to be able to present their work. Nowadays one of the most popular ways of getting a large ...

Visit J&Beyond site and nominate EF4 Framework!

2016-05-04 10:04:26
J and Beyond 2016 is the International Joomla! Conference held in Barcelona May 20-22nd 2016 - it's the fantas ...


Utility classes for showing and hiding content by device.

2013-11-04 14:02:29
When customizing your own Joomla 3 site for tablets and mobile devices, you may come to the conclusion that yo ...

What does the subscription mean in practice?

2013-10-10 11:35:35
Customers often have doubts what the subscription exactly means in practice.They seem to be surprised that the ...