Skip to main content

How to install Khmer Web Font into your website

Khmer web font

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. in 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:

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

fonts-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>

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.

21 thoughts on “How to install Khmer Web Font into your website

  1. I do not even know the way I ended upp right
    here, but I believed this post was once good. I don’t know who you’re but
    definitely you’re going to a well-known blogger should you aren’t already.

    Cheers!

  2. Im not too much of a online reader in all honesty yet your sites very nice, keep
    it up! I’ll go ahead and bookmark your website to return in the future.
    All the best

  3. Good day! I simply wish to provide you with a big thumbs up for your great info you’ve got
    here with this post. I will be coming back to your website for more soon.

  4. Greetings from Florida! I’m bored at your workplace therefore i chosen to have a look at your blog
    on my small iphone during lunch break. I enjoy the info you present here and can’t wait to have a look once i get home.
    I’m shocked at how quick your blog site loaded on my small phone ..
    I’m not even using WIFI, just 3G .. Anyways, superb blog!

  5. Hello, i think i saw you visited my weblog so i
    got here to return the want?.I’m looking to to find issues to enhance my website!I assume its ok to utilize a few of your concepts!!

  6. Great post. I found myself checking continuously this blog and I am impressed!

    Extremely helpful info specially the very last part 🙂 I maintain such information a good deal.
    I had been seeking this certain info to get a number of years.
    Thanks a lot and best of luck.

  7. Pretty section of content. I just stumbled upon your web site
    and in accession capital to assert that I acquire actually
    enjoyed account your blog posts. Any way I will be subscribing to your augment and even I achievement
    you access consistently fast.

  8. “Como terceira função, ele auxilia no ganhode massa, porque ajuda vocĂŞ a melhorar a absorção das proteĂ­nas da sua alimentação e suplementação adicional.”

  9. Terrific article! That is the level of information which should be
    shared round the web. Disgrace on Google for not positioning this publish higher!
    Occur over and visit my site . Thanks =)

  10. Hello! This is my first visit to your blog! We are a
    collection of volunteers and starting a brand new initiative inside a community
    in the same niche. Your site provided us useful information to operate on. You might have done a marvellous job!

  11. Someone necessarily help to make seriously posts I’d state.
    That may be the first time I frequented your webpage and up to
    now? I surprised with the research you made to make this kind of set
    up extraordinary. Excellent activity!

  12. hey there and thank you for your information – I’ve certainly acquired anything new from on this site.

    I have done however expertise a few technical points
    applying this website, since I experienced to reload the website many times previous to
    I really could have it to load correctly. I was wondering in case your web host is OK?
    Not that I am just complaining, but slow loading instances
    times will often affect your placement in the search engines and
    could damage your top quality score if advertising and marketing with Adwords.
    Well I’m adding this RSS to my email and can consider much more
    of your respective exciting content. Guarantee that you update
    this again soon.

Leave a Reply