ဘလော့ဂ်ရေးသားသူများအတွက် Custom Font Embed ဖို့နည်းလမ်း

ဒီပို့စ်ကတော့ ကျွန်တော် သိလွန်းတက်လွန်းလို့ ရေးသားတာ မဟုတ်ဘူးဆိုတာကို ပထမဆုံး ပြောပါရစေ။

ကျွန်တော်လည်း ဟိုနားရှာ၊ ဒီနားရှာ ကိုဂူဂယ်လ်ကို ဒုက္ခပေးလိုက်၊ မြန်မာဆိုဒ်တွေကို လိုက်ကြည့်လိုက် နည်းလမ်းတစ်ကာကို လိုက်စမ်းရင်းနဲ့ နဲနဲအဆင်ပြေသော နည်းလမ်းကို တွေ့မိလို ပြန်လည်း မျှဝေလိုက်ပါတယ်။

ဖောင့်နည်းပညာမှာ နာမည်ကြီးသော ကိုစေတန်ဆီလည်း ရောက်ခဲ့ပါတယ်။

နောက်ဆုံးတော့ ဘလော့ဂ်ဂါတစ်ယောက်အနေနဲ့ မိမိစိတ်ကြိုက် ဖောင့်ကို ဘလော့ဂ်မှာ တပ်ဆင်ဖို့နည်းလမ်းကို လိုအပ်လာနိုင်တာမို့ ကိုယ်ဘာသာ Font Embed ပြုလုပ်နိုင်သော နည်းလမ်းလေးကို ကျွန်တော်ရှာတွေလာပါတယ်။

ဘလော့ဂ်ဂါအတော်များများကို သိရှိသော Custom CSS ကို အသုံးပြုသော နည်းလမ်းပဲဖြစ်ပါတယ်။

ကျွန်တော်တွေ့ခဲ့သော နည်းလမ်းကတော့ ဘယ် Blogging Platform မှာပါ အဆင်ပြေနိုင်ပါလိမ့်မယ်လို့ထင်ပါတယ်။

ကျွန်တော်ကတော့ Blogspot  မှာပဲ စမ်းသပ်ထားပါတယ်။

Font Embed ပြုလုပ်ဖို့ Font Files လေးခု လိုအပ်ပါတယ်။

ဉပမာ။  ။ Myanmar3 Font အတွက်ဆိုရင်  Myanmar3.ttf , Myanmar3.eot , Myanmar3.woff  , Myanmar3.svg  တို့ပဲ ဖြစ်ပါတယ်။

ဇော်ဂျီအတွက်ဆိုရင်တော့ Zawgyi-One.ttf , Zawgyi-One.eot , Zawgyi-One.woff , Zawgyi-One.svg  တို့ပဲ ဖြစ်ပါတယ်။

ဒီနေ့အချိန်မှာဆိုရင် ကျွန်တော်တို့ မြန်မာတွေအတွက်က ဖောင့်အမျိုးအစား အတော်များများကို ရွေးချယ်သုံးနိုင်သလို ၊ အခြားတိုင်းရင်းသာ ဖောင့်တွေကိုပါ အင်တာနက်အပေါ်မှာ အဆင်ပြေပြေရေးနိုင်တာမို့ ဒီနည်းလမ်းလေးက အဆင်ပြေစေမှာပါ။

ကျွန်တော်တို့ Font Embed ပြုလုပ်ဖို့အတွက် မူရင်း Font File ( *.ttf ) တစ်ခုပဲ လိုအပ်ပါတယ်။ ကျန်သော File Types တွေကို ကျွန်တော်တို့ ပြန်လည် ဖန်တီးနိုင်သော နည်းလမ်းတွေရှိပါတယ်။

ကျွန်တော် Font Embed Code  ကို ပထမဆုံးကြည့်ရင် ဘာကြောင့် အဲ့လိုဖိုင်လေးဖိုင်လိုအပ်တာကို သိလာပါမယ်။


ကျွန်တော်ရလာသော CSS Codes တွေက :

@font-face {
font-family: ‘UndercoverRegular’;
src: url(‘UNDERCOV-webfont.eot’); /* IE9 Compat Modes */
src: url(‘UNDERCOV-webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘UNDERCOV-webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘UNDERCOV-webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘UNDERCOV-webfont.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}


ကျွန်တော် အဲ့ဒီနည်းအတိုင်း လုပ်ကြည့်တာ အဆင်ပြေသလို ကိုယ်တပ်ဆင်ထားသော ဖောင့်ကိုလည်း ဆိုဒ်ကို လေးလံခြင်းမရှိပဲ ကြည့်နိုင်တာကိုတွေ့ရပါတယ်။

ပထမဆုံးကျွန်တော်တို့ ဖောင့်ဖိုင်လေးဖိုင်လုံးမလိုသေးပါဘူး။ မူရင်း တစ်ဖိုင်ပဲလိုအပ်ပါတယ်။

ဉပမာ။  Myanmar3 Font ကို Font Embed ပြုလုပ်မယ်ဆိုပါတော့ လိုအပ်တာက Myanmar3.ttf  ဆိုတာလေးလိုအပ်ပါတယ်။ အင်တာနက်မှာ ဒေါင်းလုပ်ချနိုင်သလို တကယ်က ကိုယ်အသုံးပြုနေသော ဖောင့်ဖြစ်တာမို့ ကွန်ပျူတာမှာ အဆင်သင့်ရှိနေတက်ပါတယ်။


၁) *.ttf Font File to *.eot Font

ဒီကိစ္စအတွက်ဆိုရင် ကျွန်တော်လွယ်ကူသော Online Font Conventer  ကိုပဲ အသုံးပြုမှာပါ။ အဲ့လို ttf - eot  ပြောင်းလဲဖို့  http://www.kirsle.net/wizards/ttf2eot.cgi  မှာ လွယ်လွယ်ကူကူပြောင်းလဲနိုင်ပါတယ်။ အခြားကိုယ်ကြိုက်ရာဆိုဒ်၊ ဆော့ဝဲလ်ကိုလည်းပဲ အသုံးပြုနိုင်ပါတယ်။ အဲ့ဒီဆိုဒ်မှာ *.ttf File လေးကို Upload ခေါ်ယူပြီး အလွယ်တကူ eot file ပြောင်းလဲကာ ဒေါင်းလုပ်ချနိုင်ပါတယ်။


၂) *.ttf Font File to *.svg

သူ့အတွက်ကတော့ အွန်လိုင်ဖောင့်ပြောင်းပေးနိုင်တဲ့ဆိုဒ်ဖြစ်တဲ့ http://www.freefontconverter.com/  မှာ သွားရောက် ပြောင်းလဲနိုင်ပါတယ်ခင်ဗျား။


၃) *.ttf Font File to *.woff

သူ့အတွက်ကတော့ ကျွန်တော် Online Conventer  ကို မသုံးပါဘူး။ sfnt2woff   ဆိုသော ဆော့ဝဲလ်လေးကို သုံးပါမယ်။ http://people.mozilla.org/~jkew/woff/  မှာ ဒေါင်းလုပ်ရယူနိုင်ပါတယ်ခင်ဗျား။ အသုံးပြုပုံက မခက်ပါဘူး။ ဖောင့်တစ်ခုခုကို .woff  ပြောင်းဖို့ဆိုရင် ဖိုဒါတစ်ခု အရင်ဆောက်၊ အဲ့ဒီဖိုဒါထဲမှာ sfnt2woff  ဆော့ဝဲလ်လေးနဲ့ အတူ ttf File ကို အတူထား။ Windows Platform မှာတော့ ဖိုဒါတစ်ခုတည်းမှာ sfnt2woff.exe လေးနဲ့ ကိုယ်သုံးချင်သော ဖောင့် ဉပမာ Myanmar3.ttf  ကို အတူထား Command Line ကနေပြီး sfnt2woff.exe Myanmar3.ttf  လို့ရိုက်ထည့်ရင်ရပါတယ်။ Command Line မသုံးတက်ရင် Note Pad ကို ဖွင့် Command ကို ကူးထည့် *.bat နဲ့ Save  လုပ်။ *.bat လေးကိုပါ အဲ့ဒီ ဖိုဒါလေးထဲမှာထည့် ပြီး Double Click နဲ့ Run လိုက်ရင် *.woff file လေး အဲ့ဒီဖိုဒါလေးထဲမှာ အော်တိုထွက်လာတာကို တွေ့ရမှာပါ။ Command က မှာလို့မရပါဘူး sfnt2woff.exe Space နဲ့ Myanmar3.ttf ကြားမှာ Space တစ်ချက်ပါပါတယ်။ Myanmar3.ttf  နေရာမှာ ကိုယ်အသုံးပြုလိုသော ဉပမာ Zawgyi-One.ttf  ကို အသုံးပြုရင် Zawgyi-One.woff  ကို ရရှိမှာ ဖြစ်ပါတယ်။

ကဲ့ အခုဆိုရင် ကျွန်တော်တို့မှာ မူရင်းရှိသော ttf ရယ် နောက် ပြောင်းလဲထားသော eot , svg , woff  စုစုပေါင်း လေးဖိုင်ရှိသွားပါပြီ။

အဲ့ဒီလေးဖိုင်ကို Hosting တစ်ခုခုမှာ တင်ရပါမယ်။ ကျွန်တော်ကတော့ Dropbox ( https://www.dropbox.com )  ကို အသုံးပြုပါတယ်ခင်ဗျား။ Dropbox ( https://www.dropbox.com ) မှာ အကောင့် ပြုလုပ်၊ နောက် ဖိုင်လေးခုလုံးကို Upload ဆွဲတင်ပြီး Download Link တွေကို မှတ်သားပါ။

ဉပမာ ။  ။ လင့်တွေက https://www.dropbox.com/s/zrggd6upa2rewe/mm3.eot  အစရှိသဖြင့်ရရှိမှာ ဖြစ်ပါတယ်။ ဖိုင်လေးဖိုင်အတွက် လင့်က လေးခုရမှာပါ။


Blogspot  သမားများအတွက်ကတော့ Font Embed ပြုလုပ်ဖို့ဆိုရင် ပထမဆုံး www.blogger.com  မှာ Sign In ဝင်ရောက်ရမှာ ဖြစ်ပါတယ်။

နောက် Dashboard >  Template ကို ကလစ်လုပ်ရပါမယ်။

အဲ့မှာ Customize ဆိုတာလေးရှိပါတယ်။ သူ့ကို ကလစ်တစ်ချက်နှိပ်ရပါမယ်။

Customize  ရောက်ရင်တော့ အောက်ဆုံးက Advanced  ကို ကလစ်လုပ်ရမှာပါ။

Advanced ရဲ့ အောက်ဆုံးမှာ Add CSS  ဆိုတာလေးကို ကလစ်လုပ်ပါ။ အဲ့မှာ CSS  Code တွေ ထည့်သွင်းလို့ရသော နေရာလေးရှိပါတယ်။ အဲ့ဒီကုဒ်တွေထည့်သွင်းနိုင်သော နေရာမှာ အောက်က ပုံစံအတိုင်း ကုဒ်တွေ ထည့်သွင်းနိုင်ပါတယ်ခင်ဗျား။



****  Myanmar3 အတွက် ပုံစံပါ။

@font-face {
font-family: ‘Myanmar3’;
src: url(‘https://www.dropbox.com/s/nn89xr366qsuh/mm3.eot’); /* IE9 Compat Modes */
src: url(‘https://www.dropbox.com/s/nn89xr36lqsuh/mm3.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘https://www.dropbox.com/s/goobfl2tcs58bt/mm3.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.dropbox.com/s/goobfl2tc8lxb/mm3.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.dropbox.com/s/zlcuoar1j8mmd/mm3.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
font-weight: normal;
font-style: normal;

}
body,html,p,code,*,table,td,tr,span,div,a,ul,li,input,textarea{font-family:'Myanmar3'!important;}

(  ကျွန်တော်က ပုံစံပြထားတာပါ။ အဲ့ဒီလင့်တွေမှာ ဖောင့်မရှိပါဘူး။ မိတ်ဆွေတိုတင်ထားသော လင့်ကို အသုံးပြုရမှာ ဖြစ်ပါတယ်။ )



****  Zawgyi-One အတွက် ပုံစံ။

@font-face {
font-family: ‘Zawgyi-One’;
src: url(‘https://www.dropbox.com/s/ft923yrmqpl7g/Zawgyi-One.eot’); /* IE9 Compat Modes */
src: url(‘https://www.dropbox.com/s/ft923y9frpl7g/Zawgyi-One.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘https://www.dropbox.com/s/9d2su6ks4yaa9/Zawgyi-One.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.dropbox.com/s/xauqf0d84tmod/Zawgyi-One.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.dropbox.com/s/2psu6wix90drs/zawgyione.svg#UndercoverRegular’) format(‘svg’); /* Legacy iOS */
font-weight: normal;
font-style: normal;

}
body,html,p,code,*,table,td,tr,span,div,a,ul,li,input,textarea{font-family:'Zawgyi-One'!important;}

(  ကျွန်တော်က ပုံစံပြထားတာပါ။ အဲ့ဒီလင့်တွေမှာ ဖောင့်မရှိပါဘူး။ မိတ်ဆွေတိုတင်ထားသော လင့်ကို အသုံးပြုရမှာ ဖြစ်ပါတယ်။ )



ကျွန်တော် အသုံးပြုထားသော နည်းလမ်းများကို နှစ်သက်မှုမရှိပါက http://mmwebfonts.comquas.com  မှာ သွားရောက်လေ့လာနိုင်ပါတယ်။  http://mmwebfonts.comquas.com  ဆိုဒ်ကတော့ ကိုစေတန်းဖန်တီးထားသော ဆိုဒ် ဖြစ်ပါတယ်။

ဘလော့ဂ်ဂါများ မြန်မာယူနီကုဒ်၊ မွန် ၊ ရှမ်းစာများအတွက်ကတော့ http://mmuniembed.blogspot.sg/  မှာ သွားရောက်လေ့လာနိုင်ပါတယ်။


အခု ကျွန်တော်ရေးထားသော နည်းလမ်းသည် အခုလော်လော်ဆယ် ကျွန်တော် ဘလော့ဂ်အတွက် အသုံးပြုထားသော နည်းလမ်းလဲဖြစ်ပြီး ဘလော့ဂ်ဂါအတော်များများလည်း သိထားသော နည်းလမ်းပဲ ဖြစ်ပါတယ်။

Wordpree လိုမျိုး Local Host မှာ Run မယ်ဆိုရင်တောင် ဖောင့်တွေကို Local Host အပေါ်ဆွဲတင်ပြီး အသုံးပြုနိုင်သော နည်းလမ်းပဲ ဖြစ်ပါတယ်ခင်ဗျား။

နောက်ပြီး ကိုယ့်ပိုင်အကောင့်နဲ့ Dropbox  မှာ တင်ထားတာဖြစ်တာကြောင့် ဆိုဒ်ကလည်း ပေါ့ပေါ့ပါးပါးရှိပါတယ်။ အများသုံး လင့်ခ်ကို အသုံးပြုပါက ဆိုဒ်က ကိုယ့် Font Embed  လုပ်ထားသော ဖောင့်ကို မြင်ရဖို့ကို နည်းနည်းကြာမြင့်တက်ပါတယ်။



 ကျွန်တော် စမ်းသပ်ထားသော ဘလော့ဂ်နှစ်ခုကိုလည်း သွားရောက်ကြည့်နိုင်ပါတယ်ခင်ဗျား။

http://htarwaiethar-mmuni.blogspot.com/  က Myanmar3 Font ကို စမ်းသပ်ထားတာ ဖြစ်ပြီး၊

http://htarwaiethar-zawgyi.blogspot.com/   က Zawgyi-One Font ကို စမ်းသပ်ထားတာ ဖြစ်ပါတယ်။


*******   အမှားယွင်းများပါက ခွင့်လွတ်ထောက်ပြကြပါ ခင်ဗျား၊


**   ကိုကိုဇော် ( BE-EC )