Install Khmer Web Font into your website

Installing fonts is an import to make a website look better and more attractive. We can find many fonts on the internet to decorate your website, but there are not too many Khmer fonts available today. Many web designers choose Khmer fonts from Google fonts to make the text on their website meet the purpose. We still can not find the Khmer font we want, so we need to install the Khmer font directly to the website manually. In this article we will show you step by step to stop Khmer fonts that you can use such as Kh Freehand, Khm Chhem Cher, Bokor, Khmer Os Battambang, Hanuman today.

 Step 1: We e online font. Both formats. Etc. Web. Etc. To create a website that can display font events, the user tool does not have fonts, so we need to install fonts in the font format. So please download these fonts from the link below

ក្រោម:

Download font Kh Freehand.ttf, Kh Freehand.woff, Kh Freehand.svg

Download font Kh Metal Chrieng.ttf, Kh Metal Chrieng.woff, Kh Metal Chrieng.svg

Download font Kh Bokor.ttf, Kh Bokor.woff, Kh Bokor.svg

Download font Khmer Os Battambang.ttf, Khmer Os Battambang.woff

Download font Hanuman.ttf, Hanuman.woff, Hanuman.svg

Step 2: put all the web font above into a folder, for example, the folder named ‘fonts” and then zip that folder and upload to your website directory

Picture 1: upload fonts folder to website directory

Step 3: add font face CSS into your stylesheet. Copy and paste the CSS code below and put them into your website style sheet file.

@font-face {
 font-family: "Kh Metal Chrieng";
 font-style: normal;
 font-weight: normal; src: local("Kh Metal Chrieng"), url("/fonts/Kh-Metal-Chrieng.woff") format("woff"), url("/fonts/Kh-Metal-Chrieng.ttf") format("truetype"), url("/fonts/Kh-Metal-Chrieng.svg") format("svg");
}
@font-face {
 font-family: "Kh Freehand";
 font-style: normal;
 font-weight: normal;
 src: local("Kh Freehand"), url("/fonts/Kh-Freehand.woff")format("woff"), url("/fonts/Kh-Freehand.ttf") format("truetype"), url("/fonts/Kh-Freehand.svg") format("svg");
}
@font-face {
 font-family: "Kh Bokor";
 font-style: normal;
 font-weight: normal;
 src: local("Kh Bokor"), url("/fonts/Kh-Bokor.woff") format("woff"), url("/fonts/Kh-Bokor.ttf") format("truetype"), url("/fonts/Kh-Bokor.svg") format("svg");
}

@font-face {
 font-family: "Khmer Os Battambang";
 font-style: normal;
 font-weight: normal;
 src: local("Khmer Os Battambang"), url("/fonts/KhmerOSbattambang.woff") format

("woff"), url("/fonts/KhmerOSbattambang.ttf") format("truetype");
}
@font-face {
 font-family: "Hanuman";
 font-style: normal;
 font-weight: 400;
 src: local("Hanuman"), url("/font/Hanuman/Hanuman.woff")format("woff"), url("/font/Hanuman/Hanuman.ttf") format("truetype"), url("/font/Hanuman/Hanuman.svg") format("svg");
}

Step 4: implementation font family in your paragraph:
Example:

<span style="font-family: Kh Freehand;">ពុម្ពអក្សរខ្មែរ</span>
<span style="font-family: Kh Metal Chrieng;">ពុម្ពអក្សរខ្មែរ</span>
<span style="font-family: Kh Bokor;">ពុម្ពអក្សរខ្មែរ</span>
<span style="font-family: Khmer Os Battambang;">ពុម្ពអក្សរខ្មែរ</span>
<span style="font-family: Hanuman;">ពុម្ពអក្សរខ្មែរ</span>

1- font Kh Freehand

ពុម្ពអក្សរ ខ្មែរ

2- font Kh Metal Chrieng
ពុម្ពអក្សរ ខ្មែរ

3- font Kh Bokor
ពុម្ពអក្សរ ខ្មែ

4- font Khmer OS Battambang
ពុម្ពអក្សរ ខ្មែរ

5- font Hanuman
ពុម្ពអក្សរ ខ្មែរ

So now you can choose the best font for your website. If you have any problem with this set up, please feel free to leave the comment below.

Read More