How to install Khmer Web Font into your website

Install Khmer Web Font into your website

install The font is importation to make a website good looking and more attractive. We can find a lot of web font throughout the internet to decor your site but there is not too many Khmer web font available today. Many web designers chose web font Khmer from Google font to make the text in their website meet the purpose. We still can’t find the Khmer web font as we wanted so we need to install the custom Khmer web font to the website manually. this post will show you step by step to stall some favorite Khmer font that available such as font Kh Freehand, Kh Metal Chrieng, Kh Bokor, Khmer Os Battambang, Hanuman today.

Step 1: use the web font in format .woff, .svg etc. To make a website can show a font event, the user device does not have that font so we need to install the font in web font format. So please download these web font from 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 the 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>

When you completed installation the web font into your site so the website will display the font style as sample below:

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.