How to add custom Bangla font in Plus Ui blogger theme

If you are a blogger website owner and if you write content in Bangla language in your blogger website. Then the first thing you need to do is to add Bengali font in blogger site. One of the common blogging mistake is not using best font that go well with your website. With using bangla font in your blogger website, the site with bangla contents will look very beautiful.

Currently one of popular themes is Plus Ui. Although there are many features in this theme blogger theme, it is somewhat difficult to add custom Bangla font in plus ui blogger theme. But if you follow Bytes Vibe guide, then you can add custom bangla font in plus ui theme through some simple steps.

How to add Bangla font in Plus Ui theme

To add bangla font in plus ui theme, everyone should follow these steps very well. No step should be left out or misplaced. Be sure to take a backup of Blogger theme before making any change. Here I will show you how to use Solaiman Lipi font on Plus Ui blogger theme. You can also use another bangla fonts in blogger site same way.

Access Blogger Theme HTML:

Go to Blogger Themes section from your blogger dashboard. And click on “Edit Html“.

Search for Mobile Fonts:

Search for mobilefonts by clicking Ctrl + f in your theme. Those who are mobile users will get it on 514 number line in plus ui theme codes.

Search for Mobile Fonts:

Visit this website that offers many free Bangla fonts that you can use on website. Choose a Bangla font you want to use. In there, you will find three options: STANDARD, IMPORT in CSS, and Specify in CSS.

Add Bangla Font Link:

In the second box or import in css, copy only the text between <style> and </style> and paste it after mobileFonts: " followed by this symbol (“) . After pasting it will look like this:

fontFamily: {
  <strong>mobileFonts: "</strong>@import url('https://fonts.maateen.me/solaiman-lipi/font.css'); @font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;Code language: HTML, XML (xml)

Update Desktop Fonts:

Search for Desktop Fonts in the HTML and paste the same code after it. Your blogger theme code will now look like this:

*<![CDATA[*/
/* <strong>Desktop Fonts */</strong>
@import url('https://fonts.maateen.me/solaiman-lipi/font.css');
/* Font Body and Alternative */ @font-face{font-family:'GoogleCode language: PHP (php)

Specify the Font Name:

Go back to the bangla font website and copy the name of the Bangla font from the “SPECIFY IN CSS” box, such as SolaimanLipi.

Update Font Family Codes:

Search for Font family or --fontH in the theme HTML. There you
will find 3 codes –fontH, –fontB, –fontBa . In these codes, you will see the name of the first font i.e. Google Sans Text. You need to paste the name of your custom Bangla font that you copied right after Google Sans Text and don’t forget to put a comma. It will look like this:

/* Font family */  
--fontH: Google Sans Text, <strong>SolaimanLipi</strong>, Arial, Helvetica, sans-serif;
--fontB: Google Sans Text, <strong>SolaimanLipi</strong>, Arial, Helvetica, sans-serif;
--fontLow: Google Sans Text, <strong>SolaimanLipi</strong>, Arial, Helvetica, sans-serif;Code language: HTML, XML (xml)

Save Changes:

Save your changes and check your Blogger site to see if the custom Bangla font applied successfully. If you encounter any issues, feel free to leave a comment.

Download Custom Plus UI Theme:

If you want to use the Plus UI theme with Solaiman Lipi font already integrated, you can download the customized theme file from this Telegram channel. Message plusui_lipi to receive the theme file. You can watch this video for more understanding: