สอบถามเรื่องการเพิ่...
 
การแจ้งเตือน
ลบทั้งหมด

[ได้คำตอบแล้ว] สอบถามเรื่องการเพิ่มฟอนต์ใน seedtheme ครับ

   RSS

0
หัวข้อเริ่มต้น

พอดีลองเพิ่มฟอนต์จาก adobe และ google font

โดยที่ต้องการใช้ฟอนต์ Work sans เป็นฟอนต์ภาษาอังกฤษ และฟอนต์ Thongterm เป็นฟอนต์ภาษาไทย

โดยได้เข้าไปเพิ่มฟอนต์ใน font.scss และเปลี่ยนตัวแปรใน _variables.scss

ส่วนที่เพิ่มใน font.scss

/*
 * Font name: Thongterm Adobe
 */

@font-face{
	src//use.typekit.net/ege3bxh.css")
	font-family: "thongterm", sans-serif;
	font-style: normal;
	font-weight: 400;
}
@font-face{
	src//use.typekit.net/ege3bxh.css")
	font-family: "thongterm", sans-serif;
	font-style: normal;
	font-weight: 700;
}

/*
 * Font name: Work sans
 */

@font-face{
	src//fonts.googleapis.com/css2?family=Work+Sans:[email protected];&display=swap");
	font-family: "Work Sans", sans-serif;
	font-style: normal;
	font-weight: 400;
}
@font-face{
	src//fonts.googleapis.com/css2?family=Work+Sans:[email protected];&display=swap");
	font-family: "Work Sans", sans-serif;
	font-style: normal;
	font-weight: 700;
}

ส่วนที่เพิ่มใน _variables.scss

// CSS VARIABLES
:root {
  --s-accent: #0f6b4e;
  --s-accent-hover: #03a572;
  --s-bg: #fff;
  --s-text: #222;
  --s-line: #dcdfe5;
  --s-noti: #c00;
  --s-border: #7e8993;
  --s-border-radius: 3px;
  --s-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  --s-box-padding: 15px;
  --s-heading: "Work Sans","Thongterm", sans-serif !important;
  --s-heading-weight: 500;
  --s-heading-line-height: 1.3;
  --s-body: "Work Sans","Thongterm", sans-serif !important;
  --s-body-line-height: 1.625;
  --s-space: 16px;
  --s-header-height: 50px;
  --s-footer-height: 40px;
  --s-title-size: 1.5rem;
  --s-title-height: 120px;
  --s-title-bg-blur: 20px;
  --s-title-bg-opacity: 0.7;
}

 

แต่ว่าตอนที่แสดงผลในหน้า Page หลักยังไม่ขึ้นเป็นสองฟอนต์นี้น่ะครับ (แนบรูปไว้)

 font issue
แท็กหัวข้อ
1 คำตอบ
0

สวัสดีครับ

มี 2 ประเด็นนะครับ

1. โค้ดจาก Adobe / Google Fonts

 การใส่ @font-face แบบมี src:url ผมยังไม่เคยเห็นโค้ดลักษณะนี้เลย ปกติจะเห็นแต่ script ที่เค้าให้มาแทรกในเว็บ เช่น

<link rel="stylesheet" href="https://use.typekit.net/test123.css">

ซึ่งนำโค้ดไปใส่ใน Customizer ส่วน Other จะมีให้แทรกโค้ดได้นะครับ (หรือเขียนในธีม header.php ก็ได้เช่นกัน)

แต่ว่าวิธีใส่โค้ดนี้อาจจะใช้ได้อยู่นะครับ ให้เช็คข้อต่อไปเป็นหลัก

2. แก้ไฟล์ SCSS แล้วต้อง Compile ด้วยเสมอนะครับ

ให้ดูคู่มือลิงก์นี้ครับ การใช้งานธีม Seed 

จะเห็นว่า แนะนำให้ใช้ VS Code และลง Live Sass Compiler นะครับ แล้วติ๊ก Watch Sass ไว้ ระบบจะ compile ไฟล์ SCSS เป็น CSS ให้ครับ

ขอบคุณครับ เรื่องแก้ scss นี่เพิ่งจะเคยลองครับ ตอนนี้เว็บใช้ผ่าน Lightsail คือต้องต่อ ftp เพื่อดึงไฟล์มาแก้ด้วย VS code ใช่มั้ยนะครับ พอดีก่อนหน้านี้ไปแก้ใน theme editor

ถ้าแก้ Theme Editor แนะนำให้เขียนที่ Customizer ดีกว่าครับ เพราะมันไม่มีตัว compile (จริงๆ มีปลั๊กอินช่วย Compile SCSS ครับ แต่ไม่ค่อยแนะนำ เพราะแก้อะไรมันไปอยู่บน server หมด อันตราย)

แนะนำให้ทำผ่าน Git จะดีสุด หรืออย่างน้อย แก้ในเครื่องแล้วมี backup หน่อย (เช่น dropbox / google drive)

ดังนั้น ผมเลยแนะนำปลั๊กอิน sftp ด้วยอีกตัว เมื่อเรา save ไฟล์ ระบบจะ upload ใหัอัตโนมัติครับ

แบ่งปัน: