การติดตั้งฟอนต์แบบโหลดมาใช้

WordPress and Digital marketing

สอน wordpress การใช้ Easy Google Fonts

เว็บไซต์รุ่นใหม่นิยมใช้ฟอนต์ที่หลากหลายมากขึ้นเพื่อดึงดูดความสนใจของผู้เข้าชม มีผู้สร้างฟอนต์ภาษาไทยหลายตัวให้ใช้ฟรี แหล่งที่หาได้ง่ายคือ google font ซึ่งสามารถลิงค์ได้โดยตรงโดยไม่ต้องโหลดมาติดตั้ง แต่ถ้าคุณต้องการมีฟอนต์ในระบบเองจะทำอย่างไร

ถ้าคุณเบื่อ Ms San หรืออะไรก็ตามที่เป็นมาตรฐานของเบราเซอร์ ถึงเวลาแล้วที่จะเปลี่ยนฟอนต์ให้ดูแปลกตาไป คุณรู้ไหมว่าแค่คุณเปลี่ยนฟอนต์เว็บคุณจะดูแปลกไปราวๆกับการเปลี่ยนธีมเลย

หาฟอนต์ฟรี

แหล่งหาฟอนต์ฟรีสำหรับภาษาไทยมีสองที่ครับ https://www.f0nt.com/ กับ https://fonts.google.com ที่แรกให้คุณดาวน์โหลดฟอนต์มาติดตั้งบนเว็บของคุณ ที่สองดาวน์โหลดมาติดตั้งก็ได้หรือจะทำเป็นลิงค์ไปก็ได้

ข้อดีของการดาวน์โหลดมาติดตั้งก็คือทำให้เว็บไซต์ของคุณทำงานได้เร็วไม่ต้องลิงค์ไปหาฟอนต์ที่ต้องการ ข้อเสียคือถ้าเว็บที่เราลิงค์ไปเกิดช้า(โดยเฉพาะ google ในบางครั้ง) มันก็จะค้างอยู่อย่างนั้นเป็นเวลานาน (คุณอาจจะเคยสังเกตบางเว็บบางเวลาที่มุมล่างซ้ายของเบราเซอร์ค้างอยู่ที่ fonts.google.com)

เริ่มจากฟอนต์จาก google

สอน wordpress การติดตั้งฟอนต์
google font มีฟอนต์ฟรีให้เลือกใช้มากมาย

เนื่องจากเป็นแหล่งรวมฟอนต์ทุกภาษา ผมขอแนะนำให้คุณเริ่มหาฟอนต์ที่ตรงตามความต้องการจาก google ถ้าไม่มีก็ค่อยไปหาแหล่งอื่น เมื่อเข้าไปแล้วก็คลิกเลือกภาษาไทยจากเมนูทางขวา สมมติว่าเลือกฟอนต์ Taviraj กดปุ่ม + แล้วฟอนต์นั้นจะถูกเลือกเก็บไว้ แล้วคุณก็ไปเลือกฟอนต์อื่นๆต่อไป

สอน wordpress การดาวน์โหลดฟอนต์ที่ต้องการ
เมื่อฟอต์ที่ต้องการแล้ว ก็กดลิงค์ดาวน์โหลด

เอาง่ายๆสมมติว่าเลือกตัวนี้ตัวเดียวก่อน ให้คุณคลิกตรงแถบสีดำแล้วกดปุ่มลุกศรดาวน์โหลด จะได้ zip ไฟล์เมื่อแตกออกมาจะได้

สอน wordpress การเพิ่มฟอนต์
รายการฟอนต์ taviraj ที่แตกออกมา

นี่คือฟอนต์ที่คุณจะต้องไปเอาไปติดตั้งบนเว็บไซต์ของคุณ ซึ่งต้องเลือกโฟลเดอร์ที่จะติดตั้ง ปกติ WordPress จะมีโฟลเดอร์สำหรับ upload ข้อมูลอยู่แล้ว ให้คุณสร้างโฟลเดอร์ fonts ภายใต้โฟลเดอร์นี้ mywebsite.com/wp-content/uploads/fonts ให้คุณใช้ FileZilla อัพโหลดฟอนต์ไฟล์ทุกตัวลงไปที่โฟลเดอร์นี้ จริงๆคุณเลือกเพียงสไตล์ของฟอนต์ที่ต้องการก็พอ แต่เพื่อความง่ายก็อัพโหลดไปทุกตัวก็แล้วกัน

บอกให้ WordPress รู้จักฟอนต์

อันนี้ต้องใช้ปลั๊กอินช่วย มีอยู่หลายตัว ผมขอแนะนำตัวที่ง่ายที่สุด Custom Fonts เมื่อ activate แล้วให้ไปเซตที่ Appearance->Custom Fonts

สอน wordpress การใช้ custom fonts
ในปลั๊กอิน Custom Fonts เราต้องอัพโหลดฟอนต์ที่ต้องการทุก style

ทางขวาคือรายการฟอนต์ที่เคยเพิ่มเข้าไปแล้ว ทางซ้ายสำหรับบอกว่าฟอนต์ที่เราเพิ่มเข้าไปใหม่อยู่ที่ใด คุณแค่ตั้งชื่อ(Taviraj-regular ตามรูปหรือชื่ออื่น)  และในช่อง Font ttf ให้คุณเลือกว่าคุณจะใช้ฟอนต์นี้ในสไตล์ไหน เริ่มต้นผมแนะนำให้ใช้ taviraj-regular.ttf และใส่ path ให้ถูกต้องตามตัวอย่าง แล้วกด Add New Font แค่นี้ WordPress ก็จะรู้จักฟอนต์ใหม่แล้ว (ในรูปผิด แก้ taviraj เป็น taviraj-regular ทั้งสองที่)

ถ้าคุณต้องการหลายสไตล์ก็ต้องเพิ่มเข้าไปทีละไฟล์ด้วยนะครับ ถึงจะใช้ได้

เลือกใช้ฟอนต์ที่เพิ่มเข้าไป

ต่อไปก็คือขั้นตอนของ css แล้วครับโดยคำสั่ง font-family: ‘Taviraj-Regular’; โดยใส่กำกับลงไปตรง paragraph หรือแท็กอื่นๆที่คุณต้องการ

ข้อความในบล็อกนี้ผมเซตเป็นฟอนต์ Taviraj สไตล์ regular ที่เพิ่งเพิ่มเข้าไป ผมจะสมมติว่าคุณมีความรู้เกี่ยวกับการสร้าง class กำกับบล็อกหรือ paragraph ที่จะเปลี่ยนฟอนต์หรือใช้ Inspect Element ของเบราเซอร์ในการหาบล็อกเป้าหมายที่จะใส่ css ลงไปได้ โพสต์นี้ผมใช้ Gutenberg เขียนซึ่งสามารถสร้างชื่อ class กำกับได้ง่าย เพียงคลิกที่บล็อกที่ต้องการแล้วใส่ชื่อ class กำกับในช่อง Additional CSS Class (รูปข้างล่าง) จากนั้นก็ไปที่ Additional CSS ใน Appearance -> Themes -> Customize ระบุฟอนต์ที่ต้องการ

สอน wordpress การเซตสไตล์ให้กับบล็อคภายใต้ gutenberg
การเซตสไตล์ให้กับบล็อคใน Gutenberg เอดิเตอร์ตัวอื่นๆก็ทำคล้ายกัน

ฟอนต์จากแหล่งอื่น & สรุป

ก็ไม่ต่างอะไรกับที่กล่าวมา คุณเพียงแต่หาไฟล์ของฟอนต์มาแล้วอัพโหลดไปที่โฟลเดอร์ปลายทางบนเว็บของคุณแล้วก็เซตใน Custom Fonts ให้ WordPress รู้จักเป็นอันว่าเสร็จ วิธีนี้เหมาะสำหรับคนที่ถนัด css นะครับ

ส่วนใครถนัดเซตผ่านเมนูผมแนะนำให้ใช้วิธีทำลิงค์ไปยัง google fonts ข้อดีคือไม่ต้องโหลดฟอนต์แบบที่กล่าวมา และ WordPress ก็มีปลั๊กอินที่ช่วยเซตขนาดฟอนต์ สี สำหรับแท็กต่างๆให้โดยไม่ต้องไปเขียน css ซึ่งทำได้ง่ายโดยใช้ปลั๊กดอิน Easy Google Fonts การเพิ่มฟอนต์แบบทำลิงค์