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

Embed Unicode Fonts WordPress

  • SOLVED

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: http://soweic.com/2011/using-dropbox-storage/
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.

2011-09-16 by Sampheap Say

Answers (2)

2011-09-16

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('http://www.rfa.org/khmer/multimedia/fonts/Battambang_Regular.ttf');
}

.khmer{
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="http://www.rfa.org/khmer/multimedia/fonts/Battambang_Regular.ttf"]]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="http://www.fontsquirrel.com/fontface/generator"]]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: http://soweic.com/2011/using-dropbox-storage/
<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') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
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>

PS:
<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:
.widget_latest_posts{
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:
.my_class_name{
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="https://developer.mozilla.org/en/CSS/Getting_Started/Why_use_CSS%3F"]]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(http://fonts.googleapis.com/css?family=Hanuman:400,700|Content:400,700|Preahvihear|Siemreap|Moul);

.khmerTxt{

font-family: 'Hanuman', serif;

}


.khmerTxt2{

font-family: 'Content', cursive;

}


.khmerTxt3{

font-family: 'Siemreap', cursive;

}


.khmerTitle{

font-family: 'Preahvihear', cursive;

}


.khmerTitle2{

font-family: 'Moul', cursive;

}


.widget_latest_posts{

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

}



Thanks a lot Abdessamad Idrissi.

2011-09-16

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:

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