Adding Bangla font to an HTML template

by

In recent years, websites with Bengali language are increasing day by day. Websites targeted towards Bangla-speaking audiences must display the Bengali characters properly. If you want to increase the beauty of your website, you need to add a custom Bengali font to your website.

Adding Bengali font to an HTML template is a pretty simple task. In the other article, we have a guide about installing Bangla font on a WordPress website. You can check it out if you want to add Bengali font to your WordPress website.

If you are building a website or an HTML template supporting Bangla, most likely you will face problems with the fonts and their rendering. In this guide, I will go through a complete procedure for adding Bengali font to an HTML document.

Prerequisite

You must have basic technical knowledge about HTML and CSS. You can learn HTML and CSS by W3School, which is a well-known learning source.

Step-by-step: Adding Bangla font to an HTML template

Adding Bengali font to an HTML template is a simple task for web developers. If you have a basic idea about HTML and CSS, you also find this task simple. Let’s go through the process of adding Bengali font to an HTML document.

Download Bangla Font

At the beginning, you have to download the font that you want to install on your WordPress website. You will get all types of fonts at BongoFont. There is a huge collection of Bengali fonts, including stylish, newspaper, regular, etc.

Download the zip file of the selected font and unzip it to get the TTF files. If you don’t have knowledge about font file formats, check the following guide regarding Font File Formats: OTF, TTF, and WOFF.

Now we have the TTF files of the font, but we need web fonts for adding to an HTML template. So we need to convert the TTF font to Web font.

Convert TTF to Web Font (WOFF/WOFF2)

First convert the TTF font to Web font (WOFF2). It’s super simple; you can easily do this.

First, head over to https://cloudconvert.com/ttf-to-woff2 online TTF to WOFF2 converter. Upload the file and hit the Convert button to convert to WOFF2.

NOTE: Make sure you converted the UNICODE TTF file of the Bangla font.

ttf to woff2

Implementing Bangla font to an HTML

Now, we have the WOFF2 file of the font.

In the next step, copy the woff2 file to the HTML template folder and open the HTML template with a code editor. In the HTML template, find the </head> element.

Just before the </head> element, we will add a @font-face rule in the <style> tag.

In the rule, @font-face first define a name for the font (e.g. myCustomFont) and then point to the font file.

<style media="screen">
  @font-face {
    font-family: myCustomFont;
    src: url(Rajon_Shoil.woff2);
  }

  body{
    font-family:'myCustomFont';
    font-size: 2rem;
  }
</style>
Adding Bangla font to an HTML template

Here, we declare the @font-face rule in the <style> tag with a name for the font (e.g. myCustomFont) and then point to the font file to Rajon_Shoil.woff2.

After that, to apply the font all over the HTML template, add a body class and call the font-family property with the name of the font. You can see on the screenshot.

That’s it!

If you follow this guide, you will easily add Bengali font to an HTML template. I hope you will find this guide very helpful. If you have any questions, comment below.

Leave a Comment