Myanmar Web Font

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:

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

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

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

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

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

  2. @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

  3. 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.

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

  5. 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 အလုပ်လုပ်ပါတယ်။

  6. 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. 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.

  7. “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;
    }

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

  9. 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

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

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

  11. 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!

Leave a Reply

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

Up Next:

Myanmar Tutorials’ Web Design Contest [Review 2]

Myanmar Tutorials’ Web Design Contest [Review 2]