Bangla/Bengali Joomla CMS - বাংলা জুমলা বাংলাদেশ

The original tutorial has been modified and translated to English by Alamgir Mohammed, under permission from the original author.

First, download and install the WEF tool from Microsoft web site. When run for the first time, it will check all the font installed in your computer and make a database of it. Then a wizard will start. Cancel the wizard and quit the WEFT tool, because we have some preparations to make.
Create fonder, say Bangla in your c:\ drive. Within that folder, create a text file named SolaimanLipi.txt (see Fig. 1)

Fig-1

Open the file in notepad and add the following HTML codes. Please dont add the squares. See Fig. 2.

Fig-2

Now, run MS Word (Fig. 3) and type something in Bangla with SolaimanLipu font using Avro or similar software. Then copy the whole text and pase it in notepad as shown in Fig. 2. You would see the squares now. Save the file and quit notepad.

Fig -3

Now, rename the file extension from txt to htm (Fig-4)

Fig-4

After renaming, the file would look like Fig-5.

Fig-5 

Run the WEFT tool and select 'Update Font Database' from tools menu. (Fig-6) It would take a few moments to update the font database.

Fig-6

Now click 'Available Fonts' from View menu. This would show all the available fonts in your system. This would also inform which fonts are permitted to create EOT from and which are not. Make sure, the font you have chose is in green The one we are going to use, SolaimanLipi is showing in green, Fig-7.

Fig-7

Ok, let us start creating the EOT.

Run the Wizard from Tools menu. You would be welcomed. Fig. 8

Fig-8

Next >
Click on Next, then you would see Set User Information dialog box (Fig-9). Provide your name, email address. You need to add this information only once. 

Fig-9

Next >
Now, show the HTML file that we have prepared before. Fig - 10.

Fig-10.

Click on Browse and select the file SolaimanLipi.htm in C:\Bangla folder (Fig-11). 

Fig-11

Next >
The wizard would then check the integrity of the input file. Fig-12. 

Fig-12

As we have Bangla content in the HTML file, the Wizard would then show a warning message. Not all operating systems and Browsers support EOT, so we just ignore this warning. Fig-13.

Fig-13

Since we have used SolaimanLipi font in our HTML file, the Wizard would automatically select the font and show the details. Fig-14
 

Fig-14

Now you have to select Subsetting. This would determine how often the EOT would be downloaded on client computer. If you select Per site subsetting-(Fig-15) then the EOT would be downloaded only once for a site. The same font would be used for all pages. If you happen to select  Per page subsetting the EOT would be downloaded on loading of each page slowing down the users browsing speed.

Fig-15

Now, only 16 characters are being shown, not the all. The reason is the html file we used at input didn't use all of the characters of the font.  We need to select more characters. Select font and click on Subset. Fig-16.

Fig-16

From the drop down list select Bengali and then the characters. Fig-17.

Fig-17

Almost all of the characters were not selected. Select them. Fig-18. 

Fig-18

Be careful in selecting characters. If you miss one, it would appear as a box. Fig-19.

Fig-19

If you add a few extra it would increase the EOT size. We want a smaller EOT as it would require less time to download on users computers. Click Ok when done. I have selected (Fig-20) 115 characters. 

Fig-20

Next >

Now the wizard  is ready  to create the EOT. You have to specify the site names the font would be used on.  For protection, EOT created for one site cant be used on another. (Fig-21).

Fig-21

Click Edit, type in a site name and then Add. I have added six site names. Fig -22.

Fig-22

Note that I have added both http://www.shujan.org and http://shujan.org (Fig-23)

Fig-23

Click OK, you would see Fig-24.

Fig-24

Next >
Click Next and wait for few moments (Fig-25).

Fig-25

Now the EOT has been created. You may wish to save the project. Fig-26.

Fig-26

Next >
All done! Fig-27.

Fig-27

How would you know the EOT is created?

1. Go to the folder C:\Bangla. (Fig-28) Next to the htm file, you would find an eot file!

Fig-28

2. Open the htm file with Notepad.(Fig-29) You would find some extra tags- these have been added by the WEF tool. You need to copy these tags to any HTML file you want to use the EOT on.

Fig-29

How to use the EOT on your site?

1. Copy both the htm and eot files and put it in your web server. You may use Windows Copy-Paste feature or a FTP program.

2. On every htm file that you want to use the EOT, put the tags <STYLE> ... </STYLE> (from SolaimanLipi.htm) between  </TITLE> and </HEAD>.

Well done. Now your visitor should view your pages without any problems. But it is better to test from a computer not having the same font. Beware that EOT is a Microsoft only technology and only works on Internet Explorer. Firefox, Opera etc do not support EOT. On the other hand, all Windows operating systems after 2000 support Unicode fully, so there is little point to develop an EOT for 98 and ME at present. When all computers would have the support for Unicode, we wouldn't need to create any EOT and this tutorial would loose its value.

Dynamic font (EOT) with Joomla

Joomla is independent of any type of font, and all issues of typography have been put into what is called template or theme. Default Joomla installation may have one or two templates. Third-party commercial and free templates for joomla are also available. To use EOT font with Joomla, first you have to decide on the template. Whatever is the template you would find a folder of that name in templates folder of Joomla installation. For example, Joomla.org.bd has js_simplicity as the default template. In templates/js_simplicity folder you should expect these files/folder:

• index.php
• templateDetails.xml
• template_thumbnail.png
• css/template_css.css
• images/ lots of names the template uses

<style type="text/css">
<!-- EOT stuff
@font-face{
font-family:SolaimanLipi;
font-style:normal;
font-weight:normal;
src:url(solaima0.eot);
}
-->
</style>

Now you can put this font in your class id's. For this, you have to edit the font-family tags in the CSS file.