Monday, April 10, 2006

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] ကိုႏွိပ္ပါ။
eot
ျပီးရင္»
 "weft is now ready ဘာညာဘာညာ..." ဆိုတာေပၚလာလိမ့္မယ္။
ျပီးရင္»
eot
ျပီးရင္ » yes ကိုႏွိပ္ပါ။

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

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


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

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

ေဟာဒီအေပါက္ကို ခ်စ္ျပီး next>>
eot
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)>>
eot
next>>
u will see "weft is now ready blah blah blah..."
next>>
eot
click>> yes


select>> no subsetting

eot
next>>


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



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


check the boxes as follows:
eot
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>>
eot
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: , ,

7 comments:

  1. Bro

    Thank so much for your help and really appreciate for this post.

    Dont envy me friends, he created eot font for me dat I m currently using in my blog. he he. TQ so much Bro!!!

    ReplyDelete
  2. hi Friend
    I try but can't success yet...
    can u give me the test html file for making eot? I think my html is smthing wrong and my eot not working.
    also i want to know where do i put the css code at template? I m confused. i dont know any coding.
    pls mail to may11.music@gmail.com
    thanks a lot

    ReplyDelete
  3. I should have included that file here. Sorry about that. Please download that file here.

    ReplyDelete
  4. Thanks a lot for your help and eot file. Now my blog is OK. I think I stolen some of your precious time :P
    Friend , Happy Thingyan and Happy New Year to you :) Take care!

    ReplyDelete
  5. Thank you so much. Now I can embed the font at my blog.

    ReplyDelete
  6. Dear.. Nyein Chan Yar

    Great thanks to help all Burmese blogers on eot information.. If you have any information, please share to us...

    www.monywa.org/witmone

    uza

    ReplyDelete
  7. Bro,
    ဒီေန႕ပဲ သူငယ္ခ်င္းတစ္ေယာက္က WEFT eot font ကိုသံုးပါလို႕ေျပာေတာ့ ဘယ္နားက အစရွာရမွန္း မသိျဖစ္သြားတယ္။ ထံုးစံ အတိုင္း ဂူဂယ္မွာ ရွာၿပီး download ၿပီးေတာ့ ဘာဆက္ လုပ္ရမွန္း မသိဘူး ျဖစ္ေနတယ္။ အခုေတာ႕ bro ရဲ႕ဘေလာက္ခ္ကေပး တဲ့သင္ခန္းစာေလးကို ၾကည့္ ဆက္လုပ္အံုးမယ္။ ေက်းဇူးတင္လ်က္
    မိုးမင္းသား

    ReplyDelete

Note: Only a member of this blog may post a comment.