การใช้ Font จาก Google Font ใน Web Page
Google Fonts คืออีกหนึ่งบริการของ Google ที่ให้เรานำฟอนต์ที่เค้าเตรียมไว้ให้มาใส่ในเว็บไซต์ง่ายๆ
โดยไม่มีค่าใช้จ่ายใด ๆ ซึ่งตอนนี้ google ได้ใส่ฟอนต์ภาษาไทยไปลงไปให้เราเลือกใช้แล้ว
ตามลิงค์นี้ https://fonts.google.com/?subset=thai
ตัวอย่างการสร้าง การใช้ Font จาก Google Font ใน Web Page
- เข้า เว็บไซต์ https://fonts.google.com/?subset=thai
- ค้นหาฟอนต์ที่ต้องการ ซึ่งจะมีตัวอย่างฟอนต์ให้ดูด้วย
- คลิกที่ฟอนต์ที่ต้องการจะแสดงตัวอย่างฟอนต์แบบต่าง ๆ ให้ดู
- จากนั้นให้เลือก style ที่เราต้องการ (ในกรอบสีแดง) คลิกเลือก + Select this style แสดงดังภาพ
5. เมื่อคลิกเลือก แล้ว จะแสดงแถบ Use on the web ทางขวาของหน้าจอ เราต้องนำโค้ดไปใส่ที่เว็บ โดยจะมี 2 ส่วน คือ ส่วนของ embed <link> และ CSS
6.จากนั้น นำ HTML ไปวางในไฟล์
<html>
<head>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,200&display=swap” rel=”stylesheet”>
<style>
body {
font-family: ‘Kanit’, sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>เนื้อหาเว็บ</div>
</body>
</html>
- ตัวอย่างการใช้งานจริง
7. ตัวอย่างการใช้งานฟอนต์
- ทำให้สามารถเลือกใช้ฟอนต์ที่เราต้องการได้อย่างสะดวกรวดเร็ว
