@font-face  การฝังฟอนต์  ลงในหน้าเว็บ ให้สามารถแสดงผลฟอนต์แปลกๆ ได้โดยไม่ต้องติดตั้งลงที่เครื่องปลายทาง  โดยการทำงานร่วมกับ css stylesheet ซึ่งจากการทดสอบ สามารถทำงานได้ดีทั้งบน FF และ IE8 แต่ใน IE6 ผมไม่แน่ใจเพราะไม่ได้ทดสอบ ทั้งนี้หลักการทำงานของ  @font-face ตามความเข้าใจผม
1. ประกาศ @font-face ตั้งชื่อ font
2. ใส่ font ลงไป (หลักการเหมือน เราใส่รูปและเรียกรูปใช้งาน)
3. เรียกการใช้ font

ตัวอย่างเว็บ ผมโหลด ฟ้อนต์ ฟรี ชื่อ ไอแอน

http://www.f0nt.com/release/iannnnnctx/

ประกาศ @font-face ตั้งชื่อ font family เรียกใช้งาน font อย่าลืมที่จะโหลด font ไปวางด้วย

@font-face {
font-family: ‘2005_iannnnnCTX-9001′;

src: url(‘../image/2005_iannnnnCTX-9001.ttf’) format(‘truetype’);
}

เรียกใช้งาน ฟ้อนต์

#divfont {
font: 2.5em/1.5em ‘2005_iannnnnCTX-9001′, Arial, sans-serif;letter-spacing:
}

การนำ @font-face  ไปใช้งานร่วมกัน opencart
สำหรับ opencart เปิดไฟล์ catalog\view\theme\ชื่อเทมเพลต\stylesheet\stylesheet.css
ใส่
@font-face {
font-family: ‘2005_iannnnnCTX-9001′;

src: url(‘../image/2005_iannnnnCTX-9001.ttf’) format(‘truetype’);     font-weight:lighter; font-weight:lighter;
}
สำหรับตำแหน่งไหนที่เราจะเรียกใช้งาน ให้เรา เพิ่มคำสั่ง font และเรียกใช้งานเข้าไปด้วย

#divfont {
font: 2.5em/1.5em ‘2005_iannnnnCTX-9001′, Arial, sans-serif;letter-spacing:
}
จาก ตัวอย่าง เราเรียกใช้ฟ้อนต์ จะเรียงลำดับ 1,2,3 ตามนี้  2005_iannnnnCTX-9001 อันดับ 1 ถ้าไม่มี font นี้จะเรียกใช้  Arial ต่อไป ตามลำดับ
อีกตำแหน่งที่ำสำคัญ  ให้ลำคัญสั่ง ที่ต้องลบออก
* {
font-family: Arial, Helvetica, sans-serif;
}
ไม่ เช่นนั้น จะไม่สามารถใช้งาน ได้เพราะ opencart ประกาศเรียก ฟ้อนต์ทั้งหมดเป็น   Arial, Helvetica, sans-serif นี่จึงเป็นสาเหตุหนึ่งที่  @font-face ไม่สามารถใช้งานได้

ที่มาก @font-face