CSS font-face จะทำให้ เครื่องอื่นๆ เห็น Font เดียวกับเรา

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

1. ให้ดาวน์โหลด Font ที่ต้องการส่วนใหญ่ผมจะโหลดจาก เว็บ f0nt.com ตัวอย่างผมใช้ font supermarket จากนั้นเราจะได้ไฟล์นามสกุล .ttf มาเช่น supermarket.ttf

2. ให้เรานำ font ที่โหลดมาไปแปลง ที่เว็บไซต์ http://www.fontsquirrel.com/tools/webfont-generator

3. ให้เรา เขียน Code ดังนี้
@font-face {
    font-family: 'supermarketregular';
    src: url('font/supermarket-webfont.eot');
    src: url('font/supermarket-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/supermarket-webfont.woff') format('woff'),
         url('font/supermarket-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

4. ตอนนี้เราสามารถนำ font ไปใช้ได้แล้ว เช่น <span style=" font-family: 'supermarketregular';">ทดสอบ</span>