วิธีนำ Google Font มาใช้ในเว็บไซต์
19 ก.พ. 2016 , 37,073 Views , หมวดหมู่ WebDesign ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:font, Google Font
- เริ่มจากเข้าไปที่ https://www.google.com/fonts
- หากต้องการใช้ฟอนต์ไทย ฟอนต์ไทยใน google font ตอนนี้มีอยู่ 3 ฟอนต์ (อนาคตอาจจะมีเพิ่ม) ตรง Script เมนซ้ายมือ ให้เลือกเป็น Thai
- เลือกฟอนต์ที่ต้องการ โดยคลิกตรงปุ่มสีฟ้า Add to Collection
- กดปุ่ม Use เพื่อที่จะนำไปใช้งาน
- จากนั้นก็จะมาอีกหน้านึงสำหรับเลือก style ของฟอนต์ เช่น ตัวเอียง ตัวหนา เป็นต้น แล้วก็จะมีโค๊ดสำหรับนำไปใส่ในส่วนของ <head> ของเว็บไซต์ตามตัวอย่างด้านล่าง
ตัวอย่างโค๊ดที่นำไปใส่ใน <head>
1<link href='https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin' rel='stylesheet' type='text/css'>
- เพิ่มฟอนต์ใน CSS สำหรับนำไปใช้งาน
123456body {font-family: 'Kanit', sans-serif;}h1 {font-family: 'Kanit', sans-serif;}
ตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href='https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin' rel='stylesheet' type='text/css'> <style> body { font-family: 'Kanit', sans-serif; } h1 { font-family: 'Kanit', sans-serif; } </style> </head> <body> <h1>ชื่อเว็บไซต์ สีนวล (seenual)</h1> มาจากชื่อบ้านเกิดเมืองนอน บ้านนาสีนวล ที่ตั้งอยู่ใน ตำบลนาสีนวล อำเภอพยัคฆภูมิพิสัย จังหวัดมหาสารคาม </body> </html> |
See the Pen JGqrLg by Suttipong Choysakda (@nathanbc46) on CodePen.
เพิ่มเติม ฟรีฟอนท์
https://github.com/jenskutilek/free-fonts/tree/master/Noto
ป้ายกำกับ:font, Google Font
