วิธีแรก : เป็นการดาวน์โหลดฟอน์ต ต่างๆ เข้ามาเก็บไว้ที่เว็บไซต์ ของเราเอง เเล้วใช้การ @font-face เรียก path font ขั้นมาใช้งาน ทำได้ดังตัวอย่างค่ะ อธิบายเพิ่มเติม :
จะสังเกตุเห็นว่า font ชื่อเดียวกันเเต่ทำไมถึงมี นามสกุลที่เเตกต่างกัน เหตุนี้ก็เพราะ เเต่ละ Browser จะรองรับ font file ที่เเตกต่างกัน ทั้งนี้ที่เราต้องมีหลากหลายก็เพื่อต้องการให้เว็บไซต์ของเราสามารถเปิดใช้งาน font ได้
โค้ด: เลือกทั้งหมด
@font-face {
font-family: 'TH Sarabun';
src: url('thsarabunnew-webfont.eot');
src: url('thsarabunnew-webfont.eot?#iefix') format('embedded-opentype'),
url('thsarabunnew-webfont.woff') format('woff'),
url('thsarabunnew-webfont.ttf') format('truetype');
}
font-family: คือ ระบุชื่อ font ที่เราจะใช้งาน
src: url : เป็นการระบุ path ของไฟล์ที่เราทำการเก็บไว้
format : เป็นการระบุ รูปแบบของ font file ของเรา เพื่อให้รองรับกับ Browser ต่างๆ
โค้ด: เลือกทั้งหมด
@import url("../webfonts/TH_Sarabun/stylesheet.css");
body{
font:0.875em/1.4 "TH Sarabun", Helvetica, sans-serif;
background:#77aaaa;
}
@import url : คล้ายๆ กับคำสั่ง include เป็นการเรียกไฟล์ stylesheet.css มาใช้งาน
font:0.875em/1.4 "TH Sarabun", Helvetica, sans-serif; วิธีที่สอง [/size]ในการเรียกใช้งาน font วิธีนี้เราไม่จำเป็นต้องทำการโหลด font เก็บไว้ ด้วยความสามารถของ @font-face ทำให้เราสามารถ ระบุ path ของ font file ยังเว็บไซต์ต่างๆได้เลย
วิธีที่สาม import url มาเลย ตัวอย่างเราจะทำการเลือกใช้งานของ
โค้ด: เลือกทั้งหมด
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
ตัวอย่างการใช้งานง่ายมากๆค่ะ
https://www.google.com/fonts/ เข้าไปเลือก font ที่เราต้องการ คลิกไปที import จากนั้นเราก็ copy มาวางที่ไฟล์เราได้เลยค่ะ
โค้ด: เลือกทั้งหมด
@import url(http://fonts.googleapis.com/css?family=Roboto);
#cssmenu {
font-family: Roboto, sans-serif;
background: #333333;
}
โค้ด: เลือกทั้งหมด
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
#cssmenu {
font-family: Roboto, sans-serif;
background: #333333;
}
ข้อความระวังในการใช้งาน font เรื่องลิขสิทธิ์