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

10 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. This tutorial includes vbscript code to embed the font right from body part so that u can use it for Newsgroup and Forum messages. This link is for advanced users only!!!!

    (thanks laopys for the link)

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

    ReplyDelete
  9. 情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣,情趣,情趣,情趣,情趣,情趣,情趣,情趣,A片,視訊聊天室,聊天室,A片,aio,av女優,av,av片,aio交友愛情館,ut聊天室,聊天室,豆豆聊天室,色情聊天室,尋夢園聊天室,080聊天室,視訊聊天室,080苗栗人聊天室,上班族聊天室,成人聊天室,中部人聊天室,一夜情聊天室,情色聊天室,情色視訊,美女視訊,辣妹視訊,視訊交友網,免費視訊聊天,視訊,免費視訊,美女交友,成人交友,聊天室交友,微風論壇,微風成人,sex,成人,情色,情色貼圖,色情,微風,聊天室尋夢園,交友,視訊交友,視訊聊天,視訊辣妹,一夜情


    免費A片,AV女優,美女視訊,情色交友,免費AV,色情網站,辣妹視訊,美女交友,色情影片,成人影片,成人網站,A片,H漫,18成人,成人圖片,成人漫畫,情色網,日本A片,免費A片下載,性愛,a片,a片


    A片,色情,成人,做愛,情色文學,A片下載,色情遊戲,色情影片,色情聊天室,情色電影,免費視訊,免費視訊聊天,免費視訊聊天室,一葉情貼圖片區,情色,情色視訊,免費成人影片,視訊交友,視訊聊天,視訊聊天室,言情小說,愛情小說,AIO,AV片,A漫,avdvd,聊天室,自拍,情色論壇,視訊美女,AV成人網,色情A片,SEX,成人論壇

    情趣用品,A片,免費A片,AV女優,美女視訊,情色交友,色情網站,免費AV,辣妹視訊,美女交友,色情影片,成人網站,H漫,18成人,成人圖片,成人漫畫,成人影片,情色網


    情趣用品,A片,免費A片,日本A片,A片下載,線上A片,成人電影,嘟嘟成人網,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,微風成人區,成人文章,成人影城,情色,情色貼圖,色情聊天室,情色視訊,情色文學,色情小說,情色小說,臺灣情色網,色情,情色電影,色情遊戲,嘟嘟情人色網,麗的色遊戲,情色論壇,色情網站,一葉情貼圖片區,做愛,性愛,美女視訊,辣妹視訊,視訊聊天室,視訊交友網,免費視訊聊天,美女交友,做愛影片

    av,情趣用品,a片,成人電影,微風成人,嘟嘟成人網,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,成人文章,成人影城,愛情公寓,情色,情色貼圖,色情聊天室,情色視訊,情色文學,色情小說,情色小說,色情,寄情築園小遊戲,情色電影,aio,av女優,AV,免費A片,日本a片,美女視訊,辣妹視訊,聊天室,美女交友,成人光碟

    情趣用品.A片,情色,情色貼圖,色情聊天室,情色視訊,情色文學,色情小說,情色小說,色情,寄情築園小遊戲,情色電影,色情遊戲,色情網站,聊天室,ut聊天室,豆豆聊天室,美女視訊,辣妹視訊,視訊聊天室,視訊交友網,免費視訊聊天,免費A片,日本a片,a片下載,線上a片,av女優,av,成人電影,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,成人文章,成人影城,成人網站,自拍,尋夢園聊天室

    ReplyDelete

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