@font-face พ่อทุกสถาบัน!! เปลี่ยน Font บนเว็บได้ตามใจ!!

[VadiForte]

วันนี้มีวิธีเปลี่ยน Font บนเว็บไซต์ ที่หลายๆ คนอาจจะยังไม่รู้ (มั้ง) ซึ่งวิธีนั้นโคตรจะง่าย

แต่ผมมัวไปงมวิธียากๆ ตั้งนาน

วิธีง่ายๆ มากครับ แค่เพิ่ม โค๊ดนี้เข้าไปใน CSS

@font-face
     {
         font-family: DSN_Single;
         src: url(http://yourwebsite.com/DSNSIN.TTF);
     }

เปลี่ยน font-family: DSN_Single; เป็นอย่างอื่นตามใจฉันได้เลยครับ
ส่วน src: url(http://yourwebsite.com/DSNSIN.TTF); ก็ให้เลือกไปที่ไฟล์ Font ที่เราอัพไว้

ส่วนวิธีนำไปใช้นั้นก็แค่ เอา font-family: DSN_Single; ไปใส่ไว้ในแท็ก CSS ที่ต้องการให้เปลี่ยนฟ้อนท์ครับ

ง่ายๆครับ จบข่าว



นี่ตัวอย่างเว็บที่ผมเพิ่งเปลี่ยนไป http://store-th.com/ ในส่วนของ Title
ซึ่ง Tiltie เว็บผมใช้ h2 ผมก็จัดการเอา  font-family: DSN_Single; ไปต่อที่ h2 ใน CSS ครับ

ง่ายไหมครับพี่น้อง

[Zhelf]

ขอบคุณครับผม จะลองเอาไปใส่เว็บดู

[Phromphat]

โอ้แจ่มมาก แล้วสามารถเปลี่ยนได้ทั้งเว็บเลยด้วยไหมครับ

[cgdeaw]

ขอบคุณครับ +1

[Nopzixcros]

ขอบคุณครับ

[pakakal01]

ขอบคุณครับผม ง่าย แต่มีประโยชน์มาก

[WPDSign]

แค่คิดยังไม่เคยลอง
ขอบคุณครับ

[Veeraphan]

ขอบคุณสำหรับความรู้ครับ 

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

[Jokerz]

ขอบคุณคับ จะลองดู

[somsak1]

เราสามารถเปลี่ยนฟ้อนท์ของบอร์ด SMF ได้ไหมครับ ใครทำได้ช่วยแนะนำหน่อย

[mooyongster]

ใช้ประจำ font สวยๆทั้งนั้น fontface

[mymo]

ขอบคุณครับ

[dekmv]

เสริมครับ

@font-face {
    font-family: 'AlfaSlabOne-Regular-OTF-webfont';
    src: url('../font/AlfaSlabOne-Regular-OTF-webfont.eot');
    src: url('../font/AlfaSlabOne-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.woff') format('woff'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.ttf') format('truetype'),
         url('../font/AlfaSlabOne-Regular-OTF-webfont.svg#AlfaSlabOne-Regular-OTF-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

รองรับหลาย Browser ครับ

[atzcret]

เยี่ยม !!

[yuseki]

โอ้!!เยี่ยมมาก ขอบคุณมากค่าาา

[Pink.in.th]

ขอบคุณมาก ๆ ครับ เคยใช้อยู่เหมือนกันครับ 

[xaax]

แจ่มเลยครับ เดี๋ยวลองเอาไปใช้ดู 

[holidaytours]

สุดยอดมากคับ

[Yuu_jung]

ขอบคุณมากคร่า

[icokezaa]

แจ่ม เลยครับ ขอบคุณมากครับ