การฝัง Font ใน Blogger

เคยเห็นเว็บไซด์หลายๆ ที่เขาแสดงฟอนท์ที่แปลกไปจากเครื่องเรามี ก็เกิดความสงสัยว่าเขาทำกันอย่างไร ... หากเป็นสมัยที่เช่าพื้นที่ server ในการติดตั้ง Homepage ก็ไม่แปลกใจนัก มายุคหลังๆ มีพื้นที่ฟรีให้เขียนบล็อก เช่น Blogger.com หรือ Google Site ยิ่งทำให้เกิดความอยากรู้ อยากเห็นขึ้นมาอีก ...
สื่อแรกที่นึกถึงคือ Google ครับ เข้าไปค้นหาลิงค์ที่เกี่ยวข้อง ก็มีเขียนไว้หลายๆ ที่ จนไปพบที่หนึ่งที่อ่านแล้วเข้าใจง่าย ใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย CSS3 @font-face ผู้เขียนเลยแกะรอยจากที่นี่เลยละกัน

ลิงค์อื่นๆ ที่เกี่ยวข้อง
1. http://xomisse.com/blog/tutorial-add-custom-font-to-blogger-or-wordpress/
2. http://www.hatyaiwebdesign.com/blog/55-%E0%B9%80%E0%B8%97%E0%B8%84%E0%B8%99%E0%B8%B4%E0%B8%84-css-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9D%E0%B8%B1%E0%B8%87-font.html
3. http://www.hackublog.com/2010/05/3-way-to-change-blogger-font-style.html

การใช้ font ภาษาไทยแสดงบนเว็บไซต์นั้นไม่ค่อยมีให้เลือกมากนัก ที่มีบ้างบ่งตัวก็ติดลิขสิทธิ์ การใช้ Css เข้ามาช่วย @font-face เพื่อแสดง Font ต่างๆ ก็จะสะดวกขึ้น

หลักการและขั้นตอน

เริ่มต้นให้เราเลือก font ที่เราต้องการใช้
ทำการแปลงสกุล font
นำ font ขึ้นไปไว้บนเว็บไซต์อินเตอร์เนท เพื่อเรียกใช้งาน Font
วิธีนำไปใช้ในเว็บไซต์ CSS Code

1. การเลือกใช้ Font

เพื่อหลีกเลี่ยงปัญหาการละเมิดลิขสิทธิ์ จึงขอยกตัวอย่างมาจากชุด 13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA) ในที่นี้ขอยกตัวอย่างฟอนท์ "TH Krub ออกแบบโดยคุณเอกลักษณ์ เพียรพนาเวช"

2. การแปลงสกุล Font

เครดิต : รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์ สำหรับคนที่ต้องการฟอนต์ที่ดาวน์โหลดแล้วใช้งานได้เลย

ในที่นี้จะลองแปลงเป็นชุดของฟอนต์ ที่เราเลือกให้เป็นนามสกุล .eot .woff .ttf .scg เพื่อใช้ในการแสดงบน Web Browser ที่แตกต่างกัน โดยเครื่องมือที่ใช้ได้แก่ @font-face Kit Generator โดย Font Squirrel ซึ่งวิธีการตั้งค่าสำหรับฟอนต์ไทยจะต้องใช้โหมด EXPERT ดังภาพ

การแปลงฟอนท์ อย่าลืมติ๊กตรง Not Subseting เมื่อใช้ฟอนท์ภาษาไทย

ตอนนี้เรามาดูความหมายของนามสกุลฟ้อนท์ ชนิดต่างๆกันนิดนึง

TTF : ไฟล์ฟ้อนที่ไม่แสดงใน IE และ iPhone (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)

EOT : แสดงใน IE อย่างเดียว (Internet Explorer 4+)

WOFF (Web Open Font Format) : ฟ้อนสำหรับ Firefox 3.6+, Internet Explorer 9+, Chrome 5+

SVG : ฟ้อนสำหรับแสดงใน iPad and iPhon

ดาวน์โหลดมาเก็บในชื่อ webfontkit-xxxxxxxx-xxxxxx.zip ซึ่งถูกบีบอัดอยู่ ให้ทำการแตกไฟล์ออกมาจะได้ดังภาพ

รายการไฟล์ที่ถูกบีบอัด

3. การนำ Font ขึ้นไปไว้บนเว็บไซต์
ขั้นตอนนี้อาจแตกต่างกันออกไป ตามแต่ความสะดวกของผู้ใช้ อาจไปเก็บไว้ที่ site.google.com หรือที่อื่นๆ สำหรับผู้เขียนนำไปฝากไว้ที่ site.google.com

กรณีนี้ ผู้ใช้งานต้องลงทะเบียนใช้และสร้างไซต์ไว้ก่อนแล้ว ... ไปที่ไซต์ของเราเลือก "จัดการไซต์ >> ไฟล์แนบ >> อัพโหลด

เช่น https://sites.google.com/site/tigersmile2014/th_krub-webfont.ttf เป็นรูปแบบปกติ, ตัวเอียง, ตัวหนา และ ตัวหนา-เอียง รวม 4 typeface ก็จะมี 16 ไฟล์
และที่ขาดไม่ได้คือไฟล์ stylesheet.css ที่รวม css tag เอาไว้ ในที่นี้ผู้เขียนได้เปลี่ยนชื่อเป็น webfont_stylesheet.css เพื่อง่ายต่อการทำความเข้าใจ รวมทั้งสิ้นอย่างน้อย ก็จะมี 17 ไฟล์

4. วิธีนำไปใช้ในเว็บไซต์ CSS Code

การนำไปใช้ในเว็บไซต์ ให้ทำการฝัง Font โดยใช้ Code CSS ไว้ส่วนบนสุดของ Code จากกรณีนี้ใช้กับ Blogger ให้ไปที่ แม่แบบ >> แก้ไข HTML มองหาแทก <link ... > (ประมาณบรรทัดที่ 20) จะได้ประมาณนี้

    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900|Roboto' rel='stylesheet' type='text/css'/>
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
    <link charset='utf-8' href='https://sites.google.com/site/tigersmile2014/webfont_stylesheet.css' rel='stylesheet' type='text/css'/>

แทก <link ... > บรรทัดล่างสุดที่เพิ่มเข้ามา ที่สำคัญคือ url ชื่อ https://sites.google.com/site/tigersmile2014/webfont_stylesheet.css ต้องไม่ผิดพลาด

จากนั้นลองค้นหา "body{font-family:" แล้วทำการแก้ไข

เดิม - body{font-family:Roboto,Helvetica,Tahoma,Arial;font-size:14px}
แก้เป็น - body{font-family:th_krubregular,Tahoma,verdana,Helvetica,Arial;font-size:16px}

และสุดท้ายยกเครดิตให้เจ้าของบล็อกนี้ http://www.wecraftweb.com/ ... ตัวอย่าง 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont

TH Bai Jamjuree CP