WEFT eot font tutorial

[The following tutorial is about creation of eot font i talked before.]

UPDATE (August 03, 2007):
ဒီ tutorial  ျမန္မာလို ျပန္ေရး လိုက္ပါတယ္။ အားလံုးအတြက္ အသံုးက်မယ္လို႕ ထင္ပါတယ္။ အဓိကအေနနဲ႕ blogspot မွာတင္တဲ့ ့blog ေတြအတြက္ ဦးတည္ျပီး ေရးထားပါတယ္။ ေနာက္ျပီး zawgyi-one font ႐ွိျပီးသားလို႕ယူဆထားလိုက္ပါမယ္။
ကဲ... ပထမဆံုး  WEFT program ကို download လုပ္လိုက္ၾကရေအာင္။ အခမဲ့ရမွာပါ။ ျပီးရင္ေတာ့ install လုပ္ထားေပါ့ေနာ္။ ဒါျပီးရင္ေတာ့ သူ႕ကို ခဏထားထားလိုက္ပါအံုး။

အခုေလာေလာဆယ္  html file ေလးတစ္ခုလုပ္ရေအာင္။ အဲဒီ file မွာ zawgyi-one နဲ႕စာနဲနဲေရးလိုက္ပါ။ ေရးရင္ font-family ကို ဒီလို style="font-family: Zawgyi-One;" ဆိုျပီး ေၾကျငာထားတာပါရပါမယ္။ ျပီးရင္ လြယ္ေအာင္ c:\ ေအာက္မွာ test.html ဆိုတဲ့နာမည္နဲ႕ သိမ္းလိုက္ပါ။

ဟာ... html ဆိုတာ ဘယ္လိုလုပ္ရမွာလဲ။ မသိဘူး ဆိုရင္ေတာ့ ေဟာဒီ file ကိုပဲ c:\ ေအာက္ကို download လုပ္ unzipလုပ္ျပီး သိမ္းလိုက္ပါ။

ကဲ အလုပ္စရေအာင္။ WEFT program ကိုဖြင့္လိုက္ပါ။ စစခ်င္းဖြင့္ေတာ့ font ေတြကို scan လုပ္လိမ့္မယ္။ ျပီးရင္ နာမည္တို႕ email တို႕ ေမးလိမ့္မယ္။

ျပီးရင္  STEP 1  စရေအာင္

 [...] button ေလးကိုႏွိပ္ျပီး ခုနက  test.html ကိုေ႐ြးေပးလိုက္ပါ။
ျပီးရင္ [add] ကိုႏွိပ္ပါ။

ျပီးရင္»
 "weft is now ready ဘာညာဘာညာ..." ဆိုတာေပၚလာလိမ့္မယ္။
ျပီးရင္»

ျပီးရင္ » yes ကိုႏွိပ္ပါ။

"no subsetting" ကိုေ႐ြးပါ။ (ဒါအေရးၾကီးပါတယ္။!!!!!!!!)

ျပီးရင္»

fonts may only be used from pages under these roots ဆိုတာမွာ >> editကို click ပါ။



http:// ကိုေရြးပါ။
ကိုယ့္ URL ကိုျဖည့္ပါ။ ("http://" မပါပဲ။ ) ဥပမာ။ ။dathana.blogspot.com/ ဆိုတာမ်ဳိး။
  add ကို ႏွိပ္ပါ။


အေပါက္ေတြကို ဒီပံုမွာလို ခ်စ္ပါ။

ျပီးရင္ 
font creation ျပီးစီးေၾကာင္း နဲ႕CSS ေပၚလာပါလိမ့္မယ္။.
အဲဒီCSS ကို notepad ကူးျပီးသိမ္းလိုက္ပါ.
အဲဒီ dialog ကိုပိတ္ျပီး

ေဟာဒီအေပါက္ကို ခ်စ္ျပီး next>>

font လုပ္လို႕ျပီးပါျပီ။. ရလာတဲ့ font ကို test.html နားမွာေတြ႕ရပါလိမ့္မယ္ ။ C:\ ေအာက္မွာေပါ့။

step 2
သူတို႕ကို ေနရာခ်ထားေပးရေအာင္။ ZAWGYIO0.eot ကို remote loading ခြင့္ျပဳတဲ့ web server တစ္ခုေပၚကို upload လုပ္ပါ။
ဥပမာ ripway.com တို႕ pages.google တို႕
ခုနကရလိုက္တဲ့ CSS  မွာ အဲဒီ upload လုပ္လိုက္တဲ့ font ရဲ႕ URL ကိုျဖည့္ ပါ။ (အဝါေရာင္စာသားေနရာ)
  @font-face {
    font-family: Zawgyi-One;
    font-style:  normal;
    font-weight: normal;
    src: url(http://www.example.com/ZAWGYIO0.eot);
  } ဒီ code ကိုtemplate ရဲ႕ CSS ပိုင္းမွာ ကူးထည့္ပါ။
ျပိးပါျပီ။
 
HTH.

thinking this might be helpful for my myanmar blogger friends, i wrote this following tutorial. forgive me for spelling/grammar mistakes and lack of beautiful talks. I'm quite busy these days. So, I’m writing this rather hurriedly on notepad.
if u still have any question or suggestion do not hesitate to ask me. just leave comment or email me to dathana at gmail.com

in this tutorial I'm supposing that u r making this font for a blog at blogspot.

download the WEFT program. (it's free of charge.)


before we start, u need to make an html file.
for simplicity, make an html file written in zawgyi font and save it in c:\ and name it test.html.
(name, location are just arbitrary.)
Make sure ur html file contain font face declaration style="font-family: Zawgyi-One;"
Let's run WEFT program now.
when u run the program, it will scan the fonts.

after that, it will ask ur name and email.
next>>
Let's say,  STEP I starts here.

click button [...]>> choose the file you saved
click (add)>>

next>>
u will see "weft is now ready blah blah blah..."
next>>

click>> yes


select>> no subsetting


next>>


fonts may only be used from pages under these roots
click>> edit




select http://
enter ur URL (excluding http://)
click>> add



check the boxes as follows:

next>>

when font creation ends dialog box containing CSS will appear.
copy CSS to notepad and save it.
close that dialog.


check the box and next>>

font creation is done. created font cand be found around ur test.html file. i.e. C:\

step II
Here I'm supposing that u r making this font for a blog at blogspot.

Let's put it all together.
upload ur ZAWGYIO0.eot to ur web server which allows remote loading.
example:
geocities does not allow remote loading.
ripway.com allows  remote loading.

in CSS, insert the location of d font file (yellow text shown below) u've just uploaded.

  @font-face {
    font-family: Zawgyi-One;
    font-style:  normal;
    font-weight: normal;
    src: url(http://www.example.com/ZAWGYIO0.eot);
  }

copy and paste that CSS to CSS part of ur template.

re-publish your blog.

HTH.


Technorati Tags: tutorial, myanmar font,