สอนวิธีใช้ Custom Fonts ใน Wordpress และ สอนวิธีแปลง Fonts นามสกุล TTF ให้ใช้กับเว็บไซต์ได้เลย

ในวีดีโอนี้เราก็จะมาเรียนรู้วิธีการใช้งาน Custom Fonts ใน Wordpress กันครับ โดย Font ที่เรา Download มาส่วนมาก จะเป็นนามสกุล TTF ซึ่งมักจะนำมาใช้กับ Web ไม่ได้ครับ ในวีดีโอนี้ผมมีวิธี แปลง File Font แบบง่ายๆ จากนามสกุล TTF ไปเป็นนามสกุล WOFF หรือ WOFF2 เพื่อนำไปใช้บนเว็บไซต์ ได้เลยโดยไม่ต้องออกแรง
นอกจากนั้นเรายังมาดูวิธีการแก้ปัญหาในเรื่องของการอัพโหลด Custom Fonts และ การนำ Font ไปใช้งานอีกด้วยครับ ใน Wordpress รองรับการใช้งานกับ Elementor Page Builder ด้วยนะครับ
สารบัญ
00:00 ที่มาของ Custom Fonts
01:11 วิธีการแปลง Fonts จาก TTF เป็น WOFF2
05:04 เพิ่ม Plugin สำหรับติดตั้ง Custom Fonts
06:30 การใส่ Custom Fonts
08:22 การเพิ่ม Font Variation
09:47 วิธีแก้ปัญหาอัพโหลดไฟล์ WOFF2 ไม่ได้
10:58 การเลือก Fonts ใช้งานกับธีมที่รองรับ
11:33 การใช้งาน Custom Fonts กับธีมที่ไม่รองรับ
15:09 การใช้ Custom Fonts กับ Elementor
ติดตามเราได้ที่
=============================================
Facebook : / palamike.web
TH-cam : / palamike
Twitter : / palamikeweb
Website : palamike.com
Podcasts : podcasts.palamike.com/
Line : @palamike
=============================================
#wordpress #สอนwordpress

[@SectorSveN]

ขอบคุณครับ

[@ssptfamily5184]

ใช้วิธีนี้ เพื่อโหลดเว็บได้เร็วขึ้น (มีผลต่อคะแนน google page speed) ใช่ไหมครับ

[@palamike]

ใช้ได้ครับ ถ้า เราไม่ต้องใช้ google fonts หรือ server เราเร็วกว่า google fonts server ครับ

[@user-zf4jh8un5b]

โหลดมาได้แค่ไฟล์นามสกุล ttf แค่รูป มีแค่นี้ ไม่มีไฟล์ที่สามารถลงได้ทำยังไงคะ

[@palamike]

เอาไปแปลงได้ครับ ในคลิปมีวิธีแปลง

[@UP2You-fj9cq]

ทำได้ตามปกติทุกอย่างแต่จะใช้งาน ไม่มี Fontขึ้นให้ใช้อะครับ

[@palamike]

ไม่ขึ้นที่ธีม หรือ Elementor ครับ

[@up2youfreestyleshop411]

@@palamike ทั้งคู่ครับ ผมไม่ได้ใช้ Elementor ด้วย คือก่อนหน้านี้ ทำตามวิธีอาจารย์ ขึ้นมา 1 Font แต่ไม่สามารถใช้งานได้ กดไปไม่มีการเปลี่ยนแปลง ไม่ถึง ครึ่งวิ Font ก็กลับมา Font เดิม ลบลงใหม่ก็ไม่หาย เลยลอง ทำผ่าน CSS ขึ้นบ้างไม่ขึ้นบ้าง ครับอาจารย์ ใช้ Flatsome. ครับ

[@palamike]

ต้องลอง inspect ตัว element ดูครับว่า font ที่ตัว element นั้นใช้ เอาจาก css ที่ไหนมา ถ้ามันมี priority สูงกว่า css ของเรา code css ก็ต้อง override ให้ priority สูงกว่าตามวิธีการของ cascading style sheet ครับ
และ font เราใส่ เป็นไฟล์ woff2 หรือว่า ไฟล์ประเภทไหนครับ บางทีเป็นที่ไฟล์ font เองครับ แนะนำให้ลองกับ html ทั่วๆ ไปดูก่อนครับ