อยากใส่ฟ้อนใน wordpress ต้องทำยังไงเอ่ย

[narupot]

ไม่รู้ว่าจะมีวิธีไหนที่จะใช้ได้ผล +1 สำหรับคนใจดีที่อยากสอน

[jiyuu19th]

ผมเคยใช้ font face ครับ หาจาก google เมื่อนานมาแล้ว แต่ไม่แน่ใจพวกเรื่องลิขสิทธิ์ก็เลยไม่ค่ยอได้ทำต่อเลยครับ

[Blackdarkside]

ไม่รู้ว่าจะมีวิธีไหนที่จะใช้ได้ผล +1 สำหรับคนใจดีที่อยากสอน

ลองหาวิธีในยูทูบดูครับ เจอเยอะเลยครับ แต่ที่เคยใช้ จะเป็นปลั๊กอินช่วยมาครับ แบบที่ใช้ทำ squeeze pages

[narupot]

ไม่รู้ว่าจะมีวิธีไหนที่จะใช้ได้ผล +1 สำหรับคนใจดีที่อยากสอน

ลองหาวิธีในยูทูบดูครับ เจอเยอะเลยครับ แต่ที่เคยใช้ จะเป็นปลั๊กอินช่วยมาครับ แบบที่ใช้ทำ squeeze pages

เคยใช้ปลั๊กอินอยู่นะครับ แต่มันติดที่ว่าเราเพิ่มขนาด เพิ่มความหนา จะใส่เฉพาะตรงนี้ ไม่อยากใช้ตรงนี้อ่ะครับ ถ้าใช้ปลั๊กอินมันจะเหมารวม เซงเหมือนกัน เพราะมือใหม่ อิอิ ขอบคุณสำหรับคำแนะนำครับ

[adjobb]

แก้ไขได้ใน css เลยครับลองเอาโค้ด css ของ ธีมมาเดียวผมช่วยดูให้

[Judinho]

แก้ไขใน CSS เช่น

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

จากนั้น มาดูว่าเราจะใส่ส่วนไหนของเว็บ เช้น

h1, h2, h3,h4, h5, h6 { font-family:'ชื่อฟ้อนท์'; font-weight:normal;}

เท่านี้ก็เสร็จแล้วครับ

[Moyzier]

แก้ไขใน CSS เช่น

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

จากนั้น มาดูว่าเราจะใส่ส่วนไหนของเว็บ เช้น

h1, h2, h3,h4, h5, h6 { font-family:'ชื่อฟ้อนท์'; font-weight:normal;}

เท่านี้ก็เสร็จแล้วครับ

ผมงงครับ แก้ไขแล้ว มันจะเป็น font Defult ใช่ปะครับ

[gapgag55]

แก้ไขใน CSS เช่น

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
   src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

จากนั้น มาดูว่าเราจะใส่ส่วนไหนของเว็บ เช้น

h1, h2, h3,h4, h5, h6 { font-family:'ชื่อฟ้อนท์'; font-weight:normal;}

เท่านี้ก็เสร็จแล้วครับ

ผมงงครับ แก้ไขแล้ว มันจะเป็น font Defult ใช่ปะครับ

แก้ไขตำแหน่ง font ที่คุณเอาไว้ครับ ถ้าไม่อยากพิมพ์ @font-face เองนี่เลย

http://www.fontsquirrel.com/

[Moyzier]

แก้ไขใน CSS เช่น

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
   src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

จากนั้น มาดูว่าเราจะใส่ส่วนไหนของเว็บ เช้น

h1, h2, h3,h4, h5, h6 { font-family:'ชื่อฟ้อนท์'; font-weight:normal;}

เท่านี้ก็เสร็จแล้วครับ

ผมงงครับ แก้ไขแล้ว มันจะเป็น font Defult ใช่ปะครับ

แก้ไขตำแหน่ง font ที่คุณเอาไว้ครับ ถ้าไม่อยากพิมพ์ @font-face เองนี่เลย

http://www.fontsquirrel.com/

font ที่ติดมากับ theme มีแต่ภาษาอังกฤษ จะเปลี่ยนเป็นภาษาไทยสะเลย

/* Main Global Layout Settings */
*{ padding:0; margin:0;   outline:none; list-style:none; border: 0 none;}
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
body {
   background:#FFF url(images/patterns/body-bg7.png);
   color: #333;
   font-family: 'Droid Sans',Arial,Verdana,sans-serif;
   font-size: 13px;
}

ตรง 'Droid Sans',Arial,Verdana,sans-serif; ให้เปลี่ยนเป็นชื่อ font ที่เราปรับที่ด้านบนใช่ปะครับ

[wasantec]

ดู font ดีๆนะครับว่าฟรีหรือป่าว เว็บดังมาโดนฟ้องจะยุ่งเอา

[poumerida]

http://www.wecraftweb.com/2011/04/css3-font-face-%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B9%84%E0%B8%97%E0%B8%A2%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A/

นี้น่าจะละเอียดพอนะครับ

[Judinho]

แก้ไขใน CSS เช่น

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
   src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

จากนั้น มาดูว่าเราจะใส่ส่วนไหนของเว็บ เช้น

h1, h2, h3,h4, h5, h6 { font-family:'ชื่อฟ้อนท์'; font-weight:normal;}

เท่านี้ก็เสร็จแล้วครับ

ผมงงครับ แก้ไขแล้ว มันจะเป็น font Defult ใช่ปะครับ

แก้ไขตำแหน่ง font ที่คุณเอาไว้ครับ ถ้าไม่อยากพิมพ์ @font-face เองนี่เลย

http://www.fontsquirrel.com/

font ที่ติดมากับ theme มีแต่ภาษาอังกฤษ จะเปลี่ยนเป็นภาษาไทยสะเลย

/* Main Global Layout Settings */
*{ padding:0; margin:0;   outline:none; list-style:none; border: 0 none;}
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
body {
   background:#FFF url(images/patterns/body-bg7.png);
   color: #333;
   font-family: 'Droid Sans',Arial,Verdana,sans-serif;
   font-size: 13px;
}

ตรง 'Droid Sans',Arial,Verdana,sans-serif; ให้เปลี่ยนเป็นชื่อ font ที่เราปรับที่ด้านบนใช่ปะครับ

ใช่ครับหลังจาก Verdana,sans-serif ให้ใส, ตามเ้วยชื่อฟ้อนต์เราครับ และถ้ามี font- family ดังกล่าว ก็เพิ่มชื่อฟ้อนของเราลงไป แล้วแต่ว่า จะใช้ฟ้อนของเราทั้งหมดหรือปล่าว ลองดูครับ

[VadiForte]

1. หาฟ้อนที่ต้องการ
2. เข้าเว็บนี้ http://convertfonts.com
3. อัพโหลดเข้าไป แล้วเค้าจะเจ็นออกมาให้เป็นไฟล์ซิป
4. แตกไฟล์ซิป ข้างในจะมีฟ้อนหลายนามสกุล + ไฟล์ CSS
5. เปิด CSS แล้วก๊อปข้อมูลข้างใน ไปใส่ในไฟล์ CSS ของเรา

โค้ด เลือก ขยาย

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
   src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}
6. ก๊อปฟ้อนไปไว้ใน Folder เว็บของเรา (ตาม URL ใน CSS ของเรา)
7. เปลี่ยนชื่อฟ้อนให้จำง่าย (ตรง font-family: 'ชื่อฟ้อนท์'; )
8. เรียกใช้ชื่อฟ้อน ตามต้องการ

[Moyzier]

1. หาฟ้อนที่ต้องการ
2. เข้าเว็บนี้ http://convertfonts.com
3. อัพโหลดเข้าไป แล้วเค้าจะเจ็นออกมาให้เป็นไฟล์ซิป
4. แตกไฟล์ซิป ข้างในจะมีฟ้อนหลายนามสกุล + ไฟล์ CSS
5. เปิด CSS แล้วก๊อปข้อมูลข้างใน ไปใส่ในไฟล์ CSS ของเรา

โค้ด เลือก ขยาย

/* font */
@font-face {
    font-family: 'ชื่อฟ้อนท์';
   src: url('fonts/ชื่อฟ้อนท์-webfont.eot');
    src: url('fonts/ชื่อฟ้อนท์-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ชื่อฟ้อนท์-webfont.woff') format('woff'),
         url('fonts/ชื่อฟ้อนท์-webfont.ttf') format('truetype'),
         url('fonts/ชื่อฟ้อนท์-webfont.svg#sukhumvit_setthin') format('svg');
    font-weight: normal;
    font-style: normal;

}
6. ก๊อปฟ้อนไปไว้ใน Folder เว็บของเรา (ตาม URL ใน CSS ของเรา)
7. เปลี่ยนชื่อฟ้อนให้จำง่าย (ตรง font-family: 'ชื่อฟ้อนท์'; )
8. เรียกใช้ชื่อฟ้อน ตามต้องการ

ทำตามหมดแล้ว ตรงเรียกใช้ผมไปหน้า ปรับแต่งของ theme แล้วลองเปลี่ยน font ตรง เมนู หน้าแรกดู มันก็ไม่มี font ที่เพิ่งเพิ่มไปครับ

[Moyzier]

เปลี่ยนได้ละครับ แต่ตัวหนังสือมันแตกๆยังไงไม่รู้ครับ ไม่รู้จะแก้ตรงไหนตันหมดเลย

[Judinho]

เปลี่ยนฟ้อนต์ใหม่ อย่างเดียวครับ เพราะเคยใช้ฟ้อนนี้ RSU แล้วมันแตก ไม่รู้จะแก้ไงเหมือนกัน

[Judinho]

หรือไม่ก็ลอง Generate ฟ้อนใหม่ดูครับ