@font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ font ที่ไม่ได้ถูกติดตั้งไว้ที่เครื่องของ users ได้
หลักการของมันก็ง่ายๆ คือจะทำหน้าที่เป็น “ตัวระบุ” ที่อยู่ของ “font file” ที่เราต้องการจะใช้

@font-face {
    font-family: Helvetica;
    src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
body {
    font-family: Helvetica;
}

@font-face {
    font-family: Helvetica;
    src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
@font-face {
    font-family: Georgia;
    src: url('http://www.yourdomain.com/fonts/Georgia.ttf');
}
body {
    font-family: Helvetica;
}
h1 {
    font-family: Georgia;
}

แต่ละ web browsers รองรับ font file ในรูปแบบ(format) ที่แตกต่างกันออกไป
จากตัวอย่างข้างต้น ใช้ font file สกุล “ttf” หรือ “TrueType”
font file รูปแบบนี้นิยมมาก แต่ ยังมีบาง web browsers ไม่รองรับ font file นามสกุลนี้ แล้วต้องทำไง?

สมัยก่อน web browser ที่รองรับ @font-face มีแต่ Internet Explorer จึงต้องเลือกใช้ font file ที่ IE รองรับ คือ “eot”

@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot');
}

ต่อมา web browsers ต่างๆ เริ่มรองรับ @font-face มากขึ้น แต่รองรับ font file ในรูปแบบที่ไม่เหมือนกัน เราจึงต้องจัดเตรียม font file ในรูปแบบต่างๆ มาให้พร้อม เพื่อให้สามารถใช้ได้กับทุกๆ web browsers

@font-face {
    font-family: Helvetica;
    src: url('Helvetica.eot'), url('Helvetica.woff'), url('Helvetica.ttf');
}

ใช้ google font ก็ได้ง่ายดีแต่ยังมี font ไทยน้อย