วิธีเขียน @font-face ให้ใช้ได้ทุก Web Browser

เนื่องจากโค้ดของการเขียน @font-face rule ให้ใช้ได้ในทุกๆ web browser นั้นค่อนข้างยาว หากเราใช้ Sass ให้เราสร้างเป็น Mixin เอาไว้ใช้เลยก็ได้

@mixin font-face($fontName, $fileName, $path, $weight:normal, $style:normal) {
    @font-face {
        font-family: $fontName;
        src: url($path+$fileName+'.eot');
        src: url($path+$fileName+'.eot?') format('embedded-opentype'),
             url($path+$fileName+'.woff') format('woff'),
             url($path+$fileName+'.ttf') format('truetype'),
             url($path+$fileName+'.svg#svgFontName') format('svg');
        font-weight: $weight;
        font-style: $style;
    }
}

จาก Mixin ข้างต้น เราจะต้องใส่ variable ดังนี้

• $fontNameชื่อที่เราจะใช้เรียก font นั้นๆ
• $fileNameชื่อไฟล์ของ font (ต้องตั้งชื่อไฟล์ทุกๆ นามสกุลให้ตรงกัน)
• $pathที่อยู่ของไฟล์ font
• $weightweight ของ font นั้นๆ (ค่าเริ่มต้นเป็น normal)
• $stylestyle ของ font นั้นๆ (ค่าเริ่มต้นเป็น normal)

สมมติว่าเราจะใช้ FontAwesome ก็ให้เราดาวน์โหลดมาเก็บไว้ที่โฟลเดอร์ fonts/FontAwesome แล้วใช้ Mixin ตัวนี้ได้เลย แบบนี้

@include font-face('FontAwesome', 'FontAwesome', 'fonts/FontAwesome/');
.icon {
    font-family: FontAwesome;
}

แต่ถ้าใครไม่ได้ใช้ CSS Preprocessor เลย เราก็สามารถเขียนแบบ css ไปก็ได้ ซึ่งโค้ดก็จะเหมือนกันกับโค้ดที่ได้จากการ compile Mixin นี้นั่นเอง

@font-face {
    font-family: "FontAwesome";
    src: url("fonts/FontAwesome/FontAwesome.eot");
    src: url("fonts/FontAwesome/FontAwesome.eot?") format("embedded-opentype"), 
         url("fonts/FontAwesome/FontAwesome.woff") format("woff"), 
         url("fonts/FontAwesome/FontAwesome.ttf") format("truetype"), 
         url("fonts/FontAwesome/FontAwesome.svg#svgFontName") format("svg");
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: FontAwesome;
}