วิธีเพิ่มแบบอักษรที่กำหนดเองลงใน Squarespace อย่างมืออาชีพ

ต้องการเพิ่มแบบอักษรที่กำหนดเองให้กับ Squarespace หรือไม่

หากคุณเป็นผู้ใช้ Squarespace คุณรู้อยู่แล้วว่าแพลตฟอร์มนี้มีตัวเลือกแบบอักษรที่ชัดเจน แต่มีเหตุผลมากมายในการเพิ่มแบบอักษรให้กับเว็บไซต์ Squarespace!

โดยปกติแล้วจะเป็นแบบอักษรของแบรนด์หรือแม้แต่แบบอักษรที่คุณสร้างขึ้นเอง

อาจเป็นมากกว่าเกี่ยวกับรูปลักษณ์เฉพาะที่คุณต้องการสร้างสำหรับองค์ประกอบภายในเว็บไซต์ของคุณ

ไม่ว่าด้วยเหตุผลใด การเพิ่มแบบอักษรที่กำหนดเองลงใน Squarespace เป็นเรื่องง่าย เพียงทำตามขั้นตอนนี้!

วิธีเพิ่มแบบอักษรที่กำหนดเองให้กับเว็บไซต์ Squarespace ของคุณ

การเพิ่มแบบอักษรที่คุณเลือกให้กับเว็บไซต์ Squarespace นั้นค่อนข้างง่าย แต่มี CSS เล็กน้อยที่จะเพิ่ม

ตรวจสอบให้แน่ใจว่าคุณโอเคกับการทำสิ่งนั้นก่อนที่จะเริ่ม หรือคว้าคนที่ใช่

ขั้นตอนที่ 1. เลือกแบบอักษรของคุณ

หากคุณเลือกแบบอักษรที่ต้องการใช้แล้ว ให้ข้ามไปยังขั้นตอนถัดไป มิฉะนั้น ตรวจสอบให้แน่ใจว่าคุณได้เลือกแบบอักษรที่สามารถใช้ได้อย่างถูกกฎหมายในบล็อกของคุณ

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

ขั้นตอนที่ 2. เตรียมไฟล์ฟอนต์เว็บของคุณ

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

1. .ttf หรือ .otf
2. .woff
3. .woff2

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

มิฉะนั้น ให้เตรียมไฟล์ทั้งสามประเภทให้พร้อมสำหรับการเพิ่ม

ขั้นตอนที่ 3 อัปโหลดไฟล์ฟอนต์ของคุณไปที่ Squarespace

ไปที่ Design > Custom CSS > Manage Custom Files

ที่นี่คุณจะเพิ่มแบบอักษรผ่านปุ่มอัปโหลด

ทำซ้ำสำหรับทั้งสามไฟล์หรือสำหรับไฟล์ฟอนต์ของเว็บหากคุณมี

ขั้นตอนที่ 4 ตั้งชื่อแบบอักษรที่กำหนดเองของคุณใน Squarespace

เมื่ออัปโหลดฟอนต์แล้ว คุณต้องบอก Squarespace ว่ามันคืออะไรและที่ไหนด้วย CSS Editor

ใช้รหัสต่อไปนี้:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

ใช้สิ่งนี้และเพิ่มข้อมูลที่เกี่ยวข้องสำหรับแบบอักษรของคุณ:

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

ขั้นตอนที่ 5. กำหนดตำแหน่งและวิธีการใช้แบบอักษรที่กำหนดเอง

สุดท้าย คุณเพียงแค่ต้องบอก Squarespace ว่าจะใช้แบบอักษรต่างๆ บนเว็บไซต์ของคุณได้ที่ไหน

ซึ่งอาจอยู่ในตำแหน่งต่างๆ เช่น ส่วนหัวหรือส่วนหัวของไซต์ ปุ่ม หรือแม้แต่ส่วนอื่นๆ เช่น บล็อกจดหมายข่าว

วิธีใช้ฟอนต์ในที่ทั่วไป

เมื่อคุณได้อัปโหลดแบบอักษรของคุณแล้ว คุณสามารถเริ่มให้ข้อมูลเฉพาะกับ Squarespace เกี่ยวกับตำแหน่งที่จะใช้แบบอักษรนั้นได้

ต่อไปนี้คือตัวอย่างยอดนิยมบางส่วนและวิธีดำเนินการ

วิธีเปลี่ยนแบบอักษรส่วนหัวของไซต์

ส่วนหัวของไซต์คือพื้นที่ที่ด้านบนของแถบนำทาง

คุณอาจมีลิงก์มากมายที่นี่ โลโก้แบบข้อความ และอาจมีประกาศ

แบบอักษรของสิ่งเหล่านี้สามารถเปลี่ยนแปลงได้โดยใช้ข้อมูลโค้ด CSS ต่อไปนี้:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

อย่าลืมแทนที่ YOURNAME ด้วยชื่อแบบอักษรของคุณ

วิธีเปลี่ยนแบบอักษรของปุ่ม

สถานที่ยอดนิยมอีกแห่งในการใช้แบบอักษรที่กำหนดเองคือปุ่มของเว็บไซต์ของคุณ

มีบล็อคปุ่มสามปุ่ม: เล็ก กลาง และใหญ่ คุณสามารถเปลี่ยนอย่างใดอย่างหนึ่งหรือทั้งหมดโดยใช้รหัสต่อไปนี้:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

อย่าลืมแทนที่ YOURNAME ด้วยชื่อแบบอักษรของคุณ

ตรึงไว้ที่ Pinterest เพื่อให้คุณสามารถกลับมาใหม่ได้ในภายหลัง!

(เคล็ดลับแบบอักษรที่กำหนดเองเพิ่มเติมและการแก้ไขปัญหาหลังกราฟิก)

วิธีเปลี่ยนแบบอักษรบล็อกจดหมายข่าว

บล็อกจดหมายข่าวทำให้ผู้คนสามารถลงทะเบียนรายชื่ออีเมลของคุณได้ หลายคนใช้ปลั๊กอินที่แตกต่างกันสำหรับสิ่งนี้

แต่ถ้าคุณใช้บล็อกภายใน Squarespace โค้ดต่อไปนี้จะช่วยให้คุณเพิ่มแบบอักษรที่กำหนดเองได้

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

อย่าลืมแทนที่ YOURNAME ด้วยชื่อแบบอักษรของคุณ

วิธีเปลี่ยนแบบอักษรของบล็อกโพสต์

สิ่งหนึ่งที่ได้รับความนิยมมากที่สุดเกี่ยวกับฟอนต์คือการใช้ฟอนต์นั้นสำหรับโพสต์ในบล็อก

คุณต้องพิจารณาชื่อหน้า คำอธิบาย และชื่อบทความในหน้าบทความเมื่อทำเช่นนี้

คุณอาจต้องการให้พวกเขาทั้งหมดเหมือนกัน

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

อย่าลืมแทนที่ YOURNAME ด้วยชื่อแบบอักษรของคุณ

วิธีการเปลี่ยนแบบอักษรบล็อกคำพูด

ตัวอย่างสุดท้ายคือการเปลี่ยน Quote Block เป็นฟอนต์อื่น

ใช้สำหรับคำพูดในโพสต์ แต่ยังรวมถึงคำรับรองจากลูกค้าหรือบทวิจารณ์

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

อย่าลืมแทนที่ YOURNAME ด้วยชื่อแบบอักษรของคุณ

คุณอาจชอบคำแนะนำขนาดรูปภาพ Squarespace ของฉัน

ปัญหาแบบอักษรที่กำหนดเอง

การเพิ่มแบบอักษรเป็นเรื่องง่ายเมื่อคุณมีการจัดการเกี่ยวกับ CSS เพียงเล็กน้อย แต่มีข้อผิดพลาดทั่วไปบางประการที่รายงาน

ข้อความ “แบบอักษรที่ไม่รองรับ” ในรูปแบบเว็บไซต์

ในบางครั้ง คุณอาจเห็นข้อความ "แบบอักษรที่ไม่รองรับ" บนไซต์ของคุณ สิ่งนี้เกิดขึ้นเมื่อใช้ Adobe Font แล้ว Adobe จะเลิกใช้

ส่วนใหญ่แล้ว Squarespace จะแทนที่ด้วยทางเลือกที่ใกล้เคียงที่สุด แต่ถ้าไม่ใช่ คุณอาจต้องอัปโหลดแบบอักษรอื่นเพื่อแทนที่

แบบอักษรของฉันดูแตกต่างไปเมื่อฉันเข้าสู่ระบบ

บางครั้งผู้คนสังเกตเห็นว่าแบบอักษรของพวกเขาดูแตกต่างออกไปเมื่อเข้าสู่ระบบและเมื่อดูไซต์สด โดยปกติแล้ว เป็นเพราะตัวอ่านฟอนต์และวิธีที่พวกเขาดูไซต์

หากคุณสังเกตเห็นสิ่งนี้ โปรดติดต่อฝ่ายสนับสนุนของ Squarespace และพวกเขาสามารถดูการตั้งค่าเพื่อดูว่าต้องปรับเปลี่ยนอะไรบ้าง

ฉันไม่สามารถตั้งค่าแบบอักษรเป็นขนาดเฉพาะได้

ปัญหาเกี่ยวกับการตั้งค่าขนาดเฉพาะสำหรับแบบอักษรมักเกี่ยวข้องกับส่วนหลังของเว็บไซต์ของคุณ อาจเป็นเพราะเวอร์ชันของ Squarespace ที่คุณใช้อยู่

ดังนั้น ติดต่อฝ่ายสนับสนุนเพื่อขอความช่วยเหลือในสิ่งที่อาจผิดพลาด

เพิ่มแบบอักษรที่กำหนดเองของคุณไปที่ Squarespace

ด้วย CSS คุณสามารถเพิ่มไฟล์ฟอนต์ที่กำหนดเองไปยัง Squarespace ได้อย่างรวดเร็ว

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

ตัวแก้ไขสไตล์ทำให้ง่ายต่อการปรับแต่งเว็บไซต์ของคุณนอกเหนือจากตัวเลือกแบบอักษรในตัว

คุณจะใช้แบบอักษรที่กำหนดเองเพื่อทำให้เว็บไซต์ของคุณดูชาญฉลาดยิ่งขึ้นได้อย่างไร