Google Web Font ကိုသဘောကျရင်းနဲ့ စဉ်းစားမိတာက မြန်မာ Unicode တွေကော အဲလို လုပ်လို့မရဘူးလားပေါ့။ အဲလိုမျိုး လုပ်ဖို့ စဉ်းစားနေတာ ကြာတော့ ကြာနေပြီ။ ပြဿနာက ဘာလဲဆိုတော့ Mac OS X ပြဿနာပဲ။ Mac မှာက Master Piece ပဲ အလုပ်လုပ်တယ်။ font embed လုပ်လိုက်ရင် အခြား unicode font နဲ့ ရေးထားတာတွေ Mac မှာ ဖတ်လို့မရတော့ဘူး။ နောက်ပြီး iPhone iPad မှာ ဖတ်လို့မရတော့ဘူး။ Mac မှာဆိုရင်တော့ မြန်မာ Unicode အတွက် font embed မလုပ်တာ အကောင်းဆုံးပဲ။ ဘာလို့လည်းဆိုတော့ Rendering တွေ အလုပ်မလုပ်တော့လို့ပါ။ iPhone , iPad မှာဆိုရင် Masterpiece Uni Sans ပဲ အလုပ်လုပ်ပါတယ်။

Firefox မှာ ဆိုရင်တော့ ပြဿနာ တစ်ခုက Cross Domain ပဲ။ Blogspot မှာ ကျွန်တော်ပေးထားတဲ့ Script ထည့်မရဘူးဆိုတာက cross domain ကြောင့်ပါ။ Firefox က domain မတူတာကနေ request လုပ်တဲ့အခါမှာ font ကို မပြပေးဘူး။ အဲဒီတော့ font မမြင်ရတာတွေဖြစ်ကုန်တယ်။ မနေ့က Google App Engine ကို စမ်းရေးကြည့်မယ်ဆိုပြီး ရေးဖြစ်လိုက်တယ်။

http://mywebfont.appspot.com

အဲဒီပြထားတဲ့ CSS အတိုင်း အသုံးပြုရင် iPhone , iPad တွေဆိုရင် Masterpiece နဲ့ ပြောင်းအောင်လည်း လုပ်ထားပေးပါတယ်။ IE ဆိုရင်လည်း EOT ကို font embed ပြန်လုပ်ထားတယ်။ Chrome နဲ့ Mac OS ကိုတော့ support မလုပ်ဘူး။

နောက်ပြီး အကြံပေးချင်တာက Unicode font ကို သုံးမယ်ဆိုရင် Masterpiece ကို ရှေ့ဆုံးမှာ ထားစေချင်တယ်။ ဒါမှ iPhone , iPad မှာ မြင်ရပါလိမ့်မယ်။ နောက်ပြီး Mac OS နဲ့ website ကြည့်တဲ့ သူတွေကို အဆင်ပြေစေပါတယ်။

h1 { font-family:”Masterpiece Uni Sans”,Yunghkio,Myanmar3; }

ဇော်ဂျီ သမားတွေအတွက်လည်း Zawgyi ကို font embed လွယ်လွယ် ကူကူ ထည့်လို့ရအောင် လုပ်ထားပေးပါတယ်။ ဇော်ဂျီ font မရှိတဲ့သူတွေလည်း လွယ်လွယ် ကူကူ ကြည့်လို့ရအောင် embed လုပ်နိုင်ပါတယ်။ OFL မဟုတ်တဲ့ font တွေက Embed လုပ်ခွင့်မရှိပါဘူး။ ဒါကြောင့် OFL ရတဲ့ font တွေကိုသာ css link ထုတ်ထားပေးတာပါ။ ဘယ်လို အသုံးပြုလို့ရလဲ ဆိုတာ အောက်မှာ လေ့လာကြည့်လိုက်ပါအုံး။

Demo

Code:
[code lang=”xhtml”]
<html>
<head>
<link href=’http://mywebfont.appspot.com/css?font=yunghkio’ rel=’stylesheet’ type=’text/css’>
<link href=’http://mywebfont.appspot.com/css?font=myanmar3′ rel=’stylesheet’ type=’text/css’>
<link href=’http://mywebfont.appspot.com/css?font=padauk’ rel=’stylesheet’ type=’text/css’>
<link href=’http://mywebfont.appspot.com/css?font=parabaik’ rel=’stylesheet’ type=’text/css’>
<link href=’http://mywebfont.appspot.com/css?font=zawgyi’ rel=’stylesheet’ type=’text/css’>
<style>
.yunghkio {
font-family:"Masterpiece Uni Sans",Yunghkio;
}
.myanmar3 {
font-family:"Masterpiece Uni Sans",Myanmar3;
}
.padauk {
font-family:"Masterpiece Uni Sans",Padauk;
}
.zawgyi {
font-family:Zawgyi-One;
}
.parabaik {
font-family:"Masterpiece Uni Sans",Parabaik;
}
</style>
</head>
<body>
<p class="yunghkio">Yunghkio မြန်မာစာ</p>
<p class="myanmar3">Myanmar 3 မြန်မာစာ</p>
<p class="padauk">Padauk မြန်မာစာ</p>
<p class="parabaik">Parabaik မြန်မာစာ</p>
<p class="zawgyi">ေနေကာင်းလား</p>
</body>
</html>
[/code]

50 responses to “Myanmar Web Font”

  1. ကိုစေတန်ရေ… ဒါလေးမျှော်နေတာကြာပါပြီ…ခုမှပဲ ရတော့တယ်…ကျေးဇူးပါဗျာ…တနေ့တနေ့… Google Web Font Directory ကို သွားသွားကြည့်ရတာလဲ အမောပါပဲဗျာ…

  2. ဆရာ ဆရာမလုပ်သေးတဲ့တစ်ခြားဖောင့်တွေကို အဲ့ဒီလို http://mywebfont.appspot.com/css?font=ကျွန်တော့ဖောင့် လုပ်ချင်တယ်ဗျာ Google Api နဲ.ဘယ်လိုလုပ်တယ်ဆိုတာပြောပြပေးပါလားဗျာ … Tutorial လေးနဲ.ပေါ့ဗျာ….

    1. you can use my source code but you need to know about python with google app engine. https://github.com/saturngod/MyWebFont

      If you want to add more font, please send mail to me. saturngod at mysteryzillion dot com . But font license should be embed allow. Some font are not allow for font embed.

      1. Offline Mode မှာကေါရလား အင်နာတက်ရှိမှ အဆင်ပြေတာလား android မှာအဆင်မပြေဖြစ်နေလို့

        1. offline mode မရပါဘူး။ website တွေ အတွက်ပါပဲ။ android မှာ ဘယ်လို အဆင်မပြေတာလဲ မသိဘူး ခင်ဗျ။ ?

      2. Android App လုပ်တဲ့အခါ အသုံးပြုသူတွေ ဖုန်းကို root လုပ်စရာမလိုပဲ မြန်မာစာပေါ်အောင် ဘယ်လိုလုပ်ရမလဲ..နည်းစနစ်လေးရှိရင် မစပါဦး

        1. အဲဒါကတော့ ဘယ် android device လဲဆိုတာပေါ်မှာ မူတည်ပါတယ်။

  3. http://ကျွန်တော့်ဝပ် အမည်.appspot.com/css?font=ကျွန်တော်ဖောင့်အမည်

  4. @Ko Shan Lay.. you can host font file yourself or use a free cdn .. speedymirror give u 50 GB or just use dropbox as CDN n @fontface .. try modernizr to filter if u need

  5. i’ve got sth wrong on my computer according with the font , when i download some of ur posts,the font is really different,
    although ,i’ve already installed ,ZawGyi font and ZawGtalk font .
    give me some idea to get through it ,

    1. I’m using unicode and you need Yunghkio font to see my blog. If you don’t want to install font, try from firefox.

  6. My page is write with php with joomla, not html. Is it work in Joomla with php?
    If yes, could you please write detail about this.
    Thanks in advanced.

    1. joomla also using template. You can change on your joomla template. Sorry, I so far aways from Joomla in this days. Which version of joomla are you using because templates are not same design.

      1. Dr. Win Khaing Avatar

        Thanks for your reply. I’m using joomla 1.5.22.
        I mean can i copy your code into my joomla template index.php file and template.css file, will it work?
        in windows, there is no fontface Masterpiece Uni Sans, so can i replace with Arial? I want to test offline (localhost), will it work?

        1. No matter what cms you are using, it should work as font-face renders in client-side. I strongly suggest you to read documentation from google webfonts before you may proceed to toast your template engine. If you want to test on your local testing environment, please make sure you have internet connection because it will pull font file from google server, not from your localhost.

        2. Ok , ko Zack wrote a plugin for mywebfont . you can download from http://www.zack-notes.net/download/plg_yunghkiowebfont.zip and you can install on your joomla. No need to change your template. Cheer!!

        3. font-family:’Masterpiece Uni Sans’,’Yunghkio’ ဆိုပြီး ထည့်ဖို့ လိုပါတယ်။ အခြား font family ထည့်ရင် font embed အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ Masterpiece ကို ရှေ့ဆုံးမှာ ထားမှသာ iOS font embed အလုပ်လုပ်ပါလိမ့်မယ်။

  7. Mac OS အတွက်ကျတော့ Masterpiece Uni Sans ကို web font သုံးစရာမလိုဘဲ စက်ထဲက ရှိတဲ့ font နဲ့ ပေါ်တာလား ခင်ဗျ။

    1. Mac OS မှာက firefox ကော chrome ကော font embed ကောင်းကောင်း အလုပ်မလုပ်ပါဘူး။ မြန်မာစာ render အလုပ်မလုပ်ပေးတာပေါ့။ Masterpiece Uni Sans က iphone , ios အတွက်ပါ။ ‘Masterpiece Uni Sans’,’Yunghkio’,’Myanmar3′ ဆိုရင် Masterpiece Uni Sans မရှိရင် yunghkio ကို အလုပ်လုပ်သွားပါလိမ့်မယ်။ mac မှာကတော့ font သွင်းထာမှသာ ဖတ်လို့ရပါလိမ့်မယ်။ ဒါမှမဟုတ် safari နဲ့ ဆိုရင် font embed အလုပ်လုပ်ပါတယ်။

  8. […] အကြောင်းကိုတော့ ကျွန်တော် ဒီမှာ ပြောခဲ့ပြီးပါပြီ။ သို့ပေမယ့် html ကို […]

  9. I installed Unicode for Mac OS in my Macbook pro. After that i can’t read other blog writing with Zawgyi in Safari and native apps. But in the Firefox no problem. How can i uninstall the Unicode or What should i do? Can you give me some idea.

    1. just remove font from Font Book.app . I’m using zawgyi force and unicode force bookmarklet for reading myanmar websites. you can get from bookmarklet.saturngod.net

      1. thanks for your reply. now i’m ok.

  10. I got 403 error with YSlow . Here is screenshot.

    1. can you tell me more detail ?

  11. Dear Ko Saturngod,
    Could you please answer my question concerning about unicode?
    I’m now developing my own blog page, http://www.win2u.net
    I found two plugin, MMUnicode Embed and Myanmar Unicode Font Tagger.
    My questions are
    Do i need both plugins?
    If I finished installed these plugin, will i need to edit in style CSS of my theme ?
    what is the difference between font embedding and using http://mywebfont.appspot.com/ ?

    1. Myanmar Unicode Font Tagger , no … somebody wrote with zawgyi and unicode in one page. So, they need font tagger plugin.

      font embedding need host your server and need some javascript for detecting mac , ios and windows. Some of the myanmar unicode are not working at iOS and mac.

      mywebfont can detect and easily to change font embed. You just need to add in css. No javascript. No host the font file.

  12. “Give me Google or Give me Saturn” လို့သာ ပြောလိုက်ချင်တော့တယ်…. ကျေးဇူးအရမ်းတင်တယ်။

    ဒါနဲ့ တစ်ချက်… CSS ထဲမှာ ဒီလိုရေးရင် ပိုကောင်းသွားမလားလို့ / ဆရာ လုပ်တာ မဟုတ်ပါဘူး။ ပိုကောင်းမလားလို့ မေးကြည့်တဲ့ သဘောပါ။
    .yunghkio {
    font-family:"Masterpiece Uni Sans",Yunghkio !important;
    }
    .myanmar3 {
    font-family:"Masterpiece Uni Sans",Myanmar3 !important;
    }
    .padauk {
    font-family:"Masterpiece Uni Sans",Padauk !important;
    }
    .zawgyi {
    font-family:Zawgyi-One !important;
    }
    .parabaik {
    font-family:"Masterpiece Uni Sans",Parabaik !important;
    }

  13. မင်္ဂလာပါ အကိုရယ် ဒီနည်းလမ်းကို တွေ့ရတာ ဝမ်းသာပါတယ်။ ဒါပေမဲ့ ကျွန်တော်သုံးထားခဲ့တဲ့ဖောင့်ကို အဲ့ထည့်က တစ်ခုမှ မပါသေးဘူး ဒါကြောင့် အစ်ကိုယ့်ဆီကို အကူအညီတောင်းစေချင်ပါတယ်။ ကျွန်တော် Zawgyi-Tai font ကို သုံးထားခဲ့တယ် ကျွန်တော် embed font မလုပ်တတ်သေးဘူး အစ်ကို ဆိုဒ်ထည့်ကို လုပ်ထားပေးပါနော် ပြီးတော့ mywebfont.apps.com ဆိုဒ်လိုမျိုး လုပ်ပုံလုပ်နည်းလေးကို ရှင်းပြပေးပါနော် ကျွန်တော် ကိုယ့်ဟာကို လုပ်ထားချင်လို့ပါ ကျေးဇူးပြုပြီး ပြောပြပေးပါစေ….

  14. mingalar par
    I m using now chromebook
    plz guide me how can i read zawgyi font on this os ..
    thank u very much !

  15. Hi everyone, Can u please let me know how to add myanmar font in blogger?

    Thanks in advance. :)

      1. Thanks Ko Saturn,
        I was tried to replace unicode with Zawgyi-one but didn’t work.

        1. I updated the post for zawgyi. Please , recheck it

          1. Thanks Ko Saturn, it’s work. I am really appreciate your help.

  16. ko saturn i juz want to know how to install zawgyi font and keyboard on chromebook? plz reply to me if u free bro… thanks indeed.
    Best Regards,
    Zayar

    1. I think , chromebook is base on the Linux. After you have a root permission , you can add the keyboard like in Ubuntu. https://code.google.com/p/zawgyi-keyboard/wiki/InstallGuideForUbuntu

  17. I have Problem With Font in exsiting Website Script.

    1. what problem ? can you explain detail ?

      1. @import(url)ပြပင်တာမရဘူး။ရေးတိုင်း?တွေေတေပ်တယ်။
        quizmm.comကိုစစ်ကြည့်ပေးပါ။

  18. မဂင်္လာပါ။ ကျြန်တော်အခု https://curiositymm.com/ ဆိုတဲ့ wordpress site လေးတစ္ခုလုပ်နေပါတယ်။ ကျြန်တော့် wordpress site မွာ Zawgyi ကော Unicode ကော နွစ္မိုးလုံးပေါ်ခ်င္တာ CSS မွာ ဘယ် code line ကို ထည့်သြင်းရမလဲလို့ သိခ်င္လို့ပါခင္ဗ်။

    ကေ်းဇူးတင္ပါတယ်။

  19. chrome မှာ ရအောင် ဘယ်လိုလုပ်ရမလဲ ဗျ

    1. may I know what problem in chrome ? it should work

  20. zin lynn htun Avatar

    thanks you sir

  21. I’m using “Zawgyi” font to display comments in my livestream
    And I can’t find “Zawgyi” hosted anywhere.
    This just solved the problem, you wrote back in 2011 but still helping a lots of people.
    Thank you!

  22. bro window os mar use chin yin bl lo lote ya ma lal bya.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.