Khmer web font

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:

fonts-directory

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.

Comments (20)

  1. hanuman June 11, 2016
  2. PedroMChaulk June 16, 2016
  3. LarryDTiboni June 18, 2016
  4. DougMVillani June 27, 2016
  5. KittieYNanda July 13, 2016
  6. KentonQMicha July 16, 2016
  7. DanialAGetto August 23, 2016
  8. AnitaZLagana August 26, 2016
  9. RickyZEckert August 27, 2016
  10. TobiasIHilde August 28, 2016
  11. GlenPBeloate August 28, 2016
  12. Ginger August 29, 2016
  13. ChauFOvens August 29, 2016
  14. KatyMCerao September 2, 2016
  15. TomasKGodbey September 5, 2016
  16. NilaZGaldo September 9, 2016
  17. RubinWSavers September 29, 2016
  18. sam December 13, 2016

Leave a Comment!