วิธีเปลี่ยนฟอนต์ใน Squarespace 7.1 (Site Styles + CSS)

เปลี่ยนฟอนต์ใน Squarespace 7.1 ผ่าน Site Styles อัปโหลดไฟล์ฟอนต์ของคุณเอง หรือใช้ CSS กำหนดเฉพาะองค์ประกอบ พร้อมขั้นตอน ตารางเลือกวิธี และวิธีแก้ปัญหา

คำถามที่พบบ่อย

จะเปลี่ยนฟอนต์ทั้งเว็บไซต์ Squarespace ได้อย่างไร

สำหรับเว็บไซต์เวอร์ชัน 7.1 ให้เปิด Site Styles คลิก Fonts แล้วเลือกชุดฟอนต์ (font pack) ที่แนะนำ หรือเปิด All Font Packs แล้วกรองตามแบบ sans-serif, serif หรือผสม ชุดฟอนต์จะกำหนดฟอนต์ของหัวข้อ ย่อหน้า ปุ่ม และข้อความอื่น ๆ ให้ในครั้งเดียว

ใช้ Google Fonts ตัวไหนก็ได้ใน Squarespace หรือไม่

คุณค้นหา Google Fonts ตามชื่อได้จากเมนูดรอปดาวน์ของฟอนต์ แต่ศูนย์ช่วยเหลือของ Squarespace ระบุว่า Google Fonts ไม่ได้มีครบทุกตัวในไลบรารี หากฟอนต์ที่ต้องการไม่มี คุณอัปโหลดไฟล์ฟอนต์เองได้ ตราบเท่าที่ใบอนุญาตอนุญาต

อัปโหลดไฟล์ฟอนต์ประเภทไหนใน Squarespace ได้บ้าง

ตัวอัปโหลดฟอนต์ใน Site Styles รองรับไฟล์ OTF, TTF, WOFF และ WOFF2 ส่วนพื้นที่ Custom Files ที่ใช้คู่กับตัวแก้ไข CSS ระบุไว้เพียง TTF, OTF และ WOFF ดังนั้นหากเป็นไฟล์ WOFF2 ให้ใช้ตัวอัปโหลดใน Site Styles แทนพื้นที่ไฟล์ CSS

ต้องขออนุญาตก่อนอัปโหลดฟอนต์ที่กำหนดเองหรือไม่

ต้อง ศูนย์ช่วยเหลือของ Squarespace ระบุว่าคุณต้องได้รับอนุญาตจากเจ้าของหรือผู้ออกใบอนุญาตฟอนต์ก่อนนำไปใช้บนเว็บไซต์ ตรวจสอบใบอนุญาตว่าครอบคลุมการใช้งานบนเว็บก่อนอัปโหลด

ทำไมขั้นตอนเปลี่ยนฟอนต์บนเว็บไซต์ของฉันจึงต่างจากในคู่มือนี้

เว็บไซต์เวอร์ชัน 7.0 และ 7.1 มีการตั้งค่าฟอนต์ไม่เหมือนกัน ขั้นตอนในคู่มือนี้ใช้กับ 7.1 ส่วนบน 7.0 การเปลี่ยนฟอนต์ทำผ่าน Site Styles ในแผง Design นอกจากนี้ Squarespace แจ้งว่าฟอนต์ Adobe แบบกำหนดเองที่ตั้งค่าไว้บน 7.0 ไม่รองรับบน 7.1 คุณจึงต้องเลือกฟอนต์ในตัวของ 7.1 แทน

ถ้าเปลี่ยนเทมเพลต Custom CSS จะยังอยู่หรือไม่

บนเว็บไซต์เวอร์ชัน 7.0 Squarespace ระบุว่า Custom CSS จะไม่ถูกย้ายไปด้วยเมื่อเปลี่ยนเทมเพลต ควรเก็บสำเนา CSS ที่เพิ่มเองไว้ เพื่อวางกลับเข้าไปได้เมื่อจำเป็น

สรุปสั้น ๆ: บนเว็บไซต์ Squarespace 7.1 ให้เปิด Site Styles คลิก Fonts แล้วเลือกชุดฟอนต์ (font pack) หรือกำหนดฟอนต์ของ Headings, Paragraphs, Buttons และ Miscellaneous ทีละหมวด หากต้องการใช้ฟอนต์ที่ไม่มีในไลบรารี ให้อัปโหลดไฟล์ของคุณเองในแผงเดียวกัน ใช้ Custom CSS เฉพาะเมื่อต้องการเปลี่ยนองค์ประกอบใดองค์ประกอบหนึ่งโดยเฉพาะ

คู่มือนี้อธิบายขั้นตอนสำหรับเวอร์ชัน 7.1 ตามที่ศูนย์ช่วยเหลือของ Squarespace ระบุไว้ (ตรวจสอบเมื่อพฤศจิกายน 2026) หากเว็บไซต์ของคุณเป็นเวอร์ชัน 7.0 ชื่อแผงต่าง ๆ จะไม่เหมือนกัน ดูหมายเหตุเรื่องเวอร์ชันใกล้ท้ายบทความ

ควรเลือกวิธีไหน

เลือกวิธีที่ง่ายที่สุดที่ได้ผลตามที่ต้องการ ยิ่งลงไปด้านล่างของตาราง ยิ่งต้องตั้งค่ามากขึ้น

สิ่งที่คุณต้องการวิธีที่เหมาะที่สุดความยาก
เปลี่ยนลุคทั้งเว็บด้วยการคลิกครั้งเดียวชุดฟอนต์ (font pack) ใน Site Stylesง่าย
ใช้ฟอนต์หัวข้อกับเนื้อหาไม่เหมือนกันตั้งฟอนต์แยกตามหมวดใน Site Stylesง่าย
ฟอนต์ Google Font ตัวใดตัวหนึ่งค้นหาในเมนูดรอปดาวน์ของฟอนต์ง่าย
ฟอนต์แบรนด์ที่คุณมีใบอนุญาตอัปโหลดไฟล์ฟอนต์ปานกลาง
เฉพาะหัวข้อเดียว ปุ่มเดียว หรือเซกชันเดียวCustom CSSปานกลางถึงยาก

วิธีที่ 1: เปลี่ยนฟอนต์ด้วยชุดฟอนต์ (font pack)

ชุดฟอนต์จะกำหนดฟอนต์ที่เข้ากันให้ข้อความทุกหมวดพร้อมกัน จึงเป็นวิธีที่เร็วที่สุดในการปรับโฉมเว็บไซต์

  1. เปิดตัวแก้ไขแล้วคลิก Site Styles (ไอคอนพู่กัน)
  2. คลิก Fonts
  3. เลือกชุดฟอนต์ที่แนะนำ หรือคลิก All Font Packs แล้วกรองตามแบบ sans-serif, serif หรือผสม
  4. เลื่อนดูหน้าต่าง ๆ เพื่อตรวจสอบหัวข้อ เนื้อหา และปุ่ม ก่อนปิดแผง

ชุดฟอนต์เป็นจุดเริ่มต้นที่ดี แต่บางครั้งคุณอาจชอบฟอนต์หัวข้อแต่ไม่ชอบฟอนต์เนื้อหา ซึ่งวิธีถัดไปช่วยแก้ปัญหานี้ได้

วิธีที่ 2: เปลี่ยนฟอนต์ของข้อความแต่ละหมวด

ภายใต้ Fonts Squarespace แบ่งข้อความออกเป็นสี่กลุ่ม และคุณตั้งค่าแต่ละกลุ่มแยกกันได้

  • Headings: ชื่อหน้าและสไตล์หัวข้อในบล็อกข้อความ
  • Paragraphs: ข้อความเนื้อหา
  • Buttons: ข้อความบนปุ่ม
  • Miscellaneous: ข้อความขนาดเล็ก เช่น คำบรรยายภาพและป้ายกำกับในฟอร์ม (ขอบเขตของกลุ่มนี้ต่างกันไปตามเทมเพลต ควรตรวจดูหลายหน้าหลังเปลี่ยน)

วิธีเปลี่ยนแต่ละกลุ่ม:

  1. ใน Site Styles > Fonts คลิกหมวดที่ต้องการ เช่น Headings
  2. เปิดเมนูดรอปดาวน์ของฟอนต์แล้วค้นหาตามชื่อ
  3. เลือกฟอนต์ แล้วปรับสไตล์ น้ำหนัก และขนาดตามต้องการ
  4. หากต้องการ Adobe Fonts ให้ใช้ลิงก์ Additional Fonts ที่ด้านล่างของรายการ

Squarespace ยังให้ตั้งขนาดพื้นฐานที่ข้อความอื่นจะปรับตาม ดังนั้นหากหลังเปลี่ยนฟอนต์แล้วทุกอย่างดูใหญ่หรือเล็กเกินไป ให้ปรับค่านี้ก่อนจะไล่ปรับขนาดทีละบล็อก

เคล็ดลับ: เปลี่ยนหัวข้อกับเนื้อหาแยกกัน หากเปลี่ยนพร้อมกันแล้วดูแปลก ๆ คุณจะไม่รู้ว่าเกิดจากตัวไหน หากต้องการคำแนะนำในการจับคู่ฟอนต์ ดูคู่มือ วิธีเลือกฟอนต์สำหรับเว็บไซต์

วิธีที่ 3: อัปโหลดฟอนต์ของคุณเอง

หากแบรนด์ของคุณใช้ฟอนต์ที่ไม่มีในไลบรารี ให้อัปโหลดเข้าไป Squarespace ระบุว่าคุณต้องได้รับอนุญาตจากเจ้าของหรือผู้ออกใบอนุญาตฟอนต์ก่อนใช้งานในลักษณะนี้

  1. เตรียมไฟล์ฟอนต์รูปแบบ OTF, TTF, WOFF หรือ WOFF2 ตัวอัปโหลดใน Site Styles รองรับทั้งสี่แบบ
  2. เปิด Site Styles > Fonts เลือกหมวด (หรือเมนูดรอปดาวน์ของฟอนต์) แล้วมองหาตัวเลือกอัปโหลด
  3. ลากไฟล์ไปวางในแผงฟอนต์ที่อัปโหลด หรือคลิกไอคอนบวกแล้วเลือกไฟล์จากคอมพิวเตอร์
  4. เลือกฟอนต์ที่อัปโหลดสำหรับหมวดที่ต้องการ
  5. เผยแพร่ แล้วดูเว็บไซต์จริงทั้งบนเดสก์ท็อปและมือถือ เพื่อยืนยันว่าฟอนต์แสดงผลถูกต้อง

ข้อความบนอินเทอร์เฟซอาจเปลี่ยนไปเป็นครั้งคราว หากปุ่มมีชื่อไม่ตรงกัน ให้มองหาไอคอนอัปโหลดหรือไอคอนบวกในเมนูดรอปดาวน์ของฟอนต์

ปัญหาที่พบบ่อยเมื่ออัปโหลด

  • ฟอนต์อยู่ในรายการแต่หน้าตาไม่ถูกต้อง ไฟล์อาจขาดน้ำหนักหรือสไตล์บางแบบ (ตัวหนา ตัวเอียง) ให้อัปโหลดแต่ละน้ำหนักที่จะใช้เป็นไฟล์แยกกัน
  • ฟอนต์ใช้ได้ในตัวแก้ไขแต่ผู้เข้าชมไม่เห็น ลองรีเฟรชหน้าที่เผยแพร่แบบเต็ม (hard refresh) และตรวจสอบใบอนุญาตของไฟล์ฟอนต์ว่าใช้บนเว็บได้
  • อัปโหลดไฟล์ WOFF2 แล้วพยายามเรียกใช้จากพื้นที่ไฟล์ CSS พื้นที่ Custom Files ในตัวแก้ไข CSS ระบุประเภทฟอนต์เป็น TTF, OTF และ WOFF ไม่รวม WOFF2 ให้ใช้ตัวอัปโหลดใน Site Styles สำหรับ WOFF2

วิธีที่ 4: กำหนดฟอนต์เฉพาะองค์ประกอบด้วย Custom CSS

Site Styles เปลี่ยนฟอนต์ทั้งเว็บตามหมวด เมื่อต้องการข้อยกเว้น เช่น หัวข้อเดียวที่ใช้ฟอนต์ต่างออกไป Custom CSS ทำได้ คำแนะนำเรื่อง CSS ของ Squarespace เองระบุว่าควรจำกัด CSS ไว้ที่ฟอนต์ สี และพื้นหลัง เพราะการเปลี่ยนอย่างอื่นอาจทำให้เลย์เอาต์พัง

  1. อัปโหลดฟอนต์ก่อนด้วยวิธีที่ 3 หรือเลือกฟอนต์จากไลบรารี เพื่อให้ฟอนต์พร้อมใช้งานบนเว็บไซต์แล้ว
  2. เปิด Website > Pages > Custom CSS (เส้นทางที่แน่นอนอาจต่างกันเล็กน้อยตามเว็บไซต์)
  3. วางกฎตามตัวอย่างด้านล่าง แล้วบันทึก

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

แทนที่ "Your Font Name" ด้วยชื่อที่แสดงใน Site Styles ให้ตรงทุกตัวอักษร ฟอนต์สำรองแบบทั่วไป (serif หรือ sans-serif) จะทำให้ข้อความยังอ่านได้หากฟอนต์โหลดไม่สำเร็จ ชื่อคลาสอาจต่างกันไปตามเทมเพลตและการอัปเดตของ Squarespace จึงควรใช้เครื่องมือ inspector ของเบราว์เซอร์ยืนยัน selector ขององค์ประกอบที่ต้องการ

หากต้องการใช้ CSS กับหน้าเดียว ศูนย์ช่วยเหลือของ Squarespace มีตัวเลือกระดับหน้าอธิบายไว้ ควรตรวจสอบขั้นตอนล่าสุดที่นั่นก่อนใช้งานจริง

เช็กลิสต์ฟอนต์ก่อนเผยแพร่

คัดลอกรายการนี้แล้วไล่ตรวจให้ครบหนึ่งรอบ

  • [ ] หัวข้อและเนื้อหาใช้ฟอนต์ไม่เกินสองตระกูล
  • [ ] เนื้อหาอ่านง่ายบนมือถือ ไม่ใช่แค่บนเดสก์ท็อป
  • [ ] ฟอนต์มีทุกน้ำหนักที่ใช้ (ปกติ ตัวหนา ตัวเอียง)
  • [ ] คุณมีใบอนุญาตใช้ฟอนต์ที่อัปโหลดบนเว็บ
  • [ ] ปุ่มและป้ายกำกับในฟอร์มใช้ฟอนต์ที่เข้ากับส่วนอื่นของหน้า
  • [ ] คุณบันทึกสำเนา Custom CSS ที่เพิ่มเองไว้แล้ว
  • [ ] คุณตรวจดูเว็บไซต์จริง ไม่ใช่แค่พรีวิวในตัวแก้ไข

เวอร์ชัน 7.0 กับ 7.1

ศูนย์ช่วยเหลือของ Squarespace ระบุว่าตัวเลือกฟอนต์ของ 7.1 ใช้กับเว็บไซต์ 7.1 และเว็บไซต์ 7.0 มีการตั้งค่าฟอนต์ของตัวเอง บน 7.0 การเปลี่ยนฟอนต์ทำผ่าน Site Styles ในแผง Design หากกำลังชั่งใจว่าจะย้ายหรือไม่ Squarespace มีเครื่องมืออัปเดต และรีวิว Squarespace ของเราอธิบายว่าตัวแก้ไขรุ่นปัจจุบันเทียบกันอย่างไร หากฟอนต์เป็นเพียงหนึ่งในหลายเรื่องที่ทำให้หงุดหงิด หน้าทางเลือกแทน Squarespace รวบรวมเครื่องมือสร้างเว็บไซต์เจ้าอื่นไว้ และการแจกแจงค่าใช้จ่ายของเราแสดงให้เห็นว่าเว็บไซต์ Squarespace มีค่าใช้จ่ายรวมเท่าไร

หากคุณกำลังเริ่มเว็บไซต์ใหม่

เมื่อเลือกเทมเพลตหรือสร้างเว็บไซต์ตั้งแต่ต้น ให้เลือกตัวอักษรก่อน จะง่ายกว่าการมาแก้ภายหลัง แผนฟรีของ We.Inc ให้คุณเผยแพร่ได้สูงสุดสามเว็บไซต์จากเทมเพลตสำเร็จรูป ส่วน AI builder ที่ร่างเว็บไซต์จากพรอมต์เริ่มต้นที่แผน Starter ราคา $20 ต่อเดือน คุณสมัครได้ที่นี่

เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต

Umair Ali Sadaqat

ผู้ก่อตั้ง We.Inc

Umair เป็นผู้ก่อตั้ง We.Inc เขาเขียนเกี่ยวกับการสร้างเว็บไซต์ด้วย AI เอเจนซี และธุรกิจการบริหารเว็บสตูดิโอ

พร้อมสร้างสิ่งที่ยอดเยี่ยมแล้วหรือยัง

เข้าร่วมกับธุรกิจ 15,000+ รายที่ใช้ We.Inc เปิดตัว เติบโต และทำงานอัตโนมัติ ทั้งหมดจากแพลตฟอร์มเดียว

เริ่มต้นฟรี

ไม่ต้องใช้บัตรเครดิต · ติดต่อฝ่ายขาย

ที่เกี่ยวข้อง: บล็อก

ผลิตภัณฑ์

เหมาะกับใคร

ฟีเจอร์

แหล่งข้อมูล

บริษัท

แผนผังเว็บไซต์