Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Embed Unicode Fonts WordPress


I am Cambodia, I speak Khmer. There are also Khmer fonts in Google Font, but I don't know how to link them to my post written in Khmer. So I just Alt+Shift, then type in unicode provided with Windows 7. They enter just fine, but some characters will be missed if browsed by computer without proper Khmer unicode.

One of the example:
You will see the different between .pdf file and one written in the post if you have no Khmer unicode.

Thanks in advance for your answers.

<strong>PS:</strong> If I try add // at the very beginning of these two lines:
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');

All those Khmer unicode characters will be just ??? or /// weird symbols.

Answers (2)


Abdessamad Idrissi answers:

I recently had same issue with Berber characters and fixed it by using font-face in my <em>style.css</em> file.

For the Khmer you could add this classes to your style.css :

@font-face {
font-family: Battambang;
src: url('');

font-family: Battambang;

then for your content to correctly appear as khmer (even if the user doesn't have khmer caharacters installed) add the class khmer.
For example to properly display a paragraph with Kmher characters, you could use:

<p class="khmer">my paragraphe text goes here</p>

Note that you could download the font [[LINK href=""]]battambang[[/LINK]] and put it in your theme folder and use it locally by changing the <em>src </em>attribute in the <em>@font-face</em>

to make this process better, you can generate different font formats (ttf, eot, svg..) for Battambang by going to [[LINK href=""]]Font squirrel[[/LINK]]

note also that you should use UTF-8 always for your page encoding.

Hope it helps ;)

Sampheap Say comments:

Great to hear from you. With your answer setting light, I got to use Google Font which then working, but only half:
<strong>You can see the post change per your method, but the 'recent post widget' still shows the previous characters. </strong>

Here what I have done:

1. Put the in header (using Header-Footer plugin for WP)
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Dangrek:khmer', 'Siemreap:khmer', 'Content:400,700:khmer', 'Hanuman:400,700:khmer', 'Moul:khmer' ] }
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

2. Style an element with an inline style:
<div style="font-family: 'Hanuman', serif;">Your text</div>

<blockquote>to make this process better, you can generate different font formats (ttf, eot, svg..) for Battambang by going to Font squirrel</blockquote>
I think this is also great if I don't want to depend on Google. Anyway, I have no clue about this and will need to learn how to use it. Great if you can link me to the tutorial.

You deserve this tip!

Abdessamad Idrissi comments:

For the latest posts widget, you can add this at the end of your theme's <em>style.css</em> file:
font-family: 'Hanuman', serif;

and if you want my advise, avoid declaring styles on elements directly such as:
<div style="font-family: 'Hanuman', serif;">Your text</div>
better give this element a class name like:
<div class="my_class_name">Your text</div>
and in the style.css style the element:
font-family: 'Hanuman', serif;

If you are new to css and wonder why should you should put the styling code in css file instead of the actual post, then read : [[LINK href=""]]Why use CSS?[[/LINK]]
hope it works :)

Sampheap Say comments:

I take your advice, now all working as expected!

Here is what I implemented without using the script (as it will not work if visitors browser is script disable), but with this style.css it works perfectly:

@import url(,700|Content:400,700|Preahvihear|Siemreap|Moul);


font-family: 'Hanuman', serif;



font-family: 'Content', cursive;



font-family: 'Siemreap', cursive;



font-family: 'Preahvihear', cursive;



font-family: 'Moul', cursive;



font-family: 'Preahvihear', Amaranth, sans-serif;


Thanks a lot Abdessamad Idrissi.


Julian Lannigan answers:

Try changing your encoding to "iso-8859-1" (without quotes) under Settings > Reading.

Note: you may have to reenter the characters in the post.

Sampheap Say comments:

Not working. After changing, all characters turns:

ប្រហែលជា១០ឆ្នាំមុន យើងធ្លាប់ប្រើឌីស្គែតសំរាប់ផ្ទុកឯកសារ​ ហើយក្រោយ​មកក៏ចាប់ផ្តើមទទួលយកការប្រើប្រាស់ យូអេសប៊ីផ្លាស និង អិក្សធឺណលហាឌីស ដោយសារតែលក្ខ័ណ្ឌដ៏ល្អរបស់វា អនុញ្ញាតិឲ្យយើងអាចផ្ទុកឯកសារ​បានច្រើនតាមតំរូវការ ធននឹងការខូចខាត មានភាពងាយស្រួលក្នុងការលុប និងដាក់ចូលឯកសារនានា ។