0.00 (0 votes)

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:
 

jm-royal-beauty-salon-template-manager


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

jm-royal-beauty-salon-article-title


Now, we have to choose the font we like, so visit http://www.google.com/webfonts.
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:

google-font-quickuse


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.

google-font-font-style


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.

google-font-character


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.

google-font-code


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

jm-royal-beauty-salon-fontreplacing


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:

jm-royal-beauty-salon-article-codystar

 

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='http://fonts.googleapis.com/css?family=Codystar' 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!

Users' reviews

Total rating: (0 votes) Log-in to add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2018 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.