ใช้แบบอักษรใน HubSpot

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

โปรดทราบ: ไม่ใช่ทุกประเภทเนื้อหาที่มีอยู่ในทุกบัญชีประเภทเนื้อหาที่มีอยู่สำหรับการสมัครรับข้อมูลในบัญชี HubSpot ของคุณสามารถพบได้ในแคตตาล็อกผลิตภัณฑ์และบริการ 

ใช้แบบอักษรเริ่มต้นในโมดูลข้อความแบบสมบูรณ์

แบบอักษรเริ่มต้นสามารถใช้ในเนื้อหาทุกประเภทและได้รับการออกแบบมาเพื่อโหลดบนแพลตฟอร์มและอุปกรณ์ส่วนใหญ่ 

1. ไปที่เนื้อหาของคุณ:

   • หน้าเว็บไซต์: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าเว็บไซต์
   • หน้า Landing Page: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าแลนดิ้ง
   • บล็อก: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > บล็อก
   • อีเมล: ในบัญชี HubSpot ของคุณ ไปที่การตลาด > อีเมล
2. คลิกที่ชื่อเนื้อหาของคุณ 
3. ในตัวแก้ไขเนื้อหาให้คลิกโมดูลข้อความแบบสมบูรณ์จากนั้นไฮไลต์ข้อความที่คุณต้องการแก้ไข 
4. ในแถบเครื่องมือ Rich Text ให้คลิกเมนูแบบเลื่อนลงแบบอักษรและเลือกแบบอักษร แบบอักษรต่อไปนี้มีอยู่ในโมดูลข้อความสมบูรณ์: 

   • Andale Mono *

   • Arial

   • จอง Antiqua *

   • พาร์ทเนอร์จัดส่งใหม่

   • จอร์เจีย

   • เฮลเวติก้า

   • ผลกระทบ *

   • Lato **
   • Merriweather **

• • โมนาโก *

• • สัญลักษณ์ *

  • ตาโฮมา

  • เทอร์มินอล *

  • Times New Roman

  • Trebuchet MS

  • Verdana

* ไม่มีในเครื่องมือแก้ไขอีเมลแบบลากและวาง 

** ใช้ได้เฉพาะเป็นแบบอักษรเว็บในตัวแก้ไขอีเมลแบบลากและวางเท่านั้น

ใช้แบบอักษรบนเว็บ

แบบอักษรเว็บจะพร้อมใช้งานตามค่าเริ่มต้นในตัวแก้ไขเนื้อหา

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

โปรดทราบ: ไม่สามารถเลือกแบบอักษรบนเว็บได้ในเมนูแบบเลื่อนลงแบบอักษรของเครื่องมือแก้ไข Rich Text 

นอกจากนี้คุณยังสามารถใช้บริการของบุคคลที่สามเช่น Google Fonts โดยคัดลอกโค้ดนำเข้าของฟอนต์วางลงในสไตล์ชีตของเนื้อหาจากนั้นใช้ฟอนต์ผ่าน CSS:

1. ไปที่ fonts.google.com
2. ในแถบค้นหาให้ป้อนชื่อแบบอักษร 
3. คลิกที่ชื่อแบบอักษรเพื่อดูรายการรูปแบบที่สามารถนำเข้าได้
4. ถัดจากแต่ละสไตล์ที่คุณต้องการนำเข้าให้คลิก + เลือกสไตล์นี้
5. ในแผงด้านขวาให้เลือก @ import ในส่วน Use on the web  
6. คัดลอกรหัสแบบอักษร: 
   • ในส่วนการใช้งานบนเว็บให้คัดลอกรหัส @ import โดยไม่มีแท็ก < style >
   • ในกฎ CSS เพื่อระบุฟิลด์ครอบครัวให้คัดลอก โค้ดสำหรับการตั้งค่ากฎ CSS 

เมื่อคุณได้รับโค้ดจาก Google Fonts แล้วคุณสามารถเพิ่มฟอนต์ลงในเนื้อหา HubSpot ของคุณได้: 

• ใช้แบบอักษรของ Google ในสไตล์ชีต
• ใช้แบบอักษรของ Google ในเทมเพลตอีเมลที่กำหนดเอง
• ใช้ Google Font ใน CTA (เดิม)
• ใช้แบบอักษรของ Google ในรูปแบบ
• ใช้แบบอักษร Google ในโมดูลที่กำหนดเอง

ใช้แบบอักษรของ Google ในสไตล์ชีต

1. คัดลอกโค้ด @ import ของฟอนต์จาก Google Fonts
2. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
3. ในตัวค้นหาให้เปิดสไตล์ชีตที่ใช้สำหรับเนื้อหาของคุณ
4. วางโค้ด @ import ลงในบรรทัดที่ 1 ของสไตล์ชีต 
5. เพิ่มโค้ดสำหรับการตั้งค่ากฎ CSS ไปยังตัวเลือกที่เหมาะสมในสไตล์ชีต
6. ที่มุมขวาบนให้คลิกเผยแพร่ การเปลี่ยนแปลงเพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 

ใช้แบบอักษรของ Google ในเทมเพลตอีเมลที่กำหนดเอง

1. คัดลอกโค้ด @ import ของฟอนต์จาก Google Fonts
2. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
3. ในตัวค้นหาให้เปิดเทมเพลตอีเมลที่กำหนดเอง
4. ในส่วน ของเทมเพลตให้วางรหัส @ import ระหว่างแท็ก  
5. ในรหัสของเนื้อหาอีเมลให้เพิ่มแบบอักษรที่กำหนดเองในการจัดแต่งแบบอินไลน์ 
6. ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลงเพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 

ใช้ Google Font ใน CTA (เดิม)

1. คัดลอกโค้ดของ Google สำหรับการตั้งค่ากฎ CSS สำหรับแบบอักษรนั้น
2. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > CTA
3. วางเมาส์เหนือ CTA แล้วคลิกการดำเนินการ > แก้ไข 
4. ที่แผงด้านขวาให้คลิกตัวเลือกขั้นสูง 
5. ในกล่องข้อความให้วางโค้ดของ Google สำหรับการตั้งค่ากฎ CSS สำหรับแบบอักษรนั้น 
6. ที่ด้านล่างขวาให้คลิกถัดไปจากนั้นคลิก บันทึก

ใช้แบบอักษรของ Google ในรูปแบบ

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > แบบฟอร์ม
2. วางเมาส์เหนือชื่อแบบฟอร์มแล้วคลิกการดำเนินการ > แก้ไขแบบฟอร์มหรือสร้างแบบฟอร์มใหม่
3. ในตัวแก้ไขแบบฟอร์มให้คลิกแท็บสไตล์และตัวอย่าง  
4. ในเมนูแถบด้านข้างซ้ายให้คลิกส่วนสไตล์
5. ในส่วนข้อความให้คลิกเมนูแบบเลื่อนลงตระกูลแบบอักษรและเลือกแบบอักษรของ Google 
6. ที่ด้านบนขวาให้คลิกอัพเดทหรือเผยแพร่เพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 

ใช้แบบอักษร Google ในโมดูลที่กำหนดเอง

โปรดทราบ: แบบอักษร Google ไม่พร้อมใช้งานสำหรับโมดูลที่กำหนดเองที่ใช้ในเทมเพลตอีเมล

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาทางด้านซ้ายให้เปิดโมดูลที่กำหนดเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างโมดูลที่กำหนดเอง
3. ในตัวตรวจสอบทางด้านขวาให้คลิกเมนูแบบเลื่อนลงเพิ่มฟิลด์ในส่วนฟิลด์และเลือกแบบอักษร ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับฟิลด์แบบอักษร
   
   
4. ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลงเพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 

5. ไปที่เนื้อหาของคุณ:

   • หน้าเว็บไซต์: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าเว็บไซต์
   • หน้า Landing Page: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าแลนดิ้ง
   • บล็อก: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > บล็อก
6. คลิกชื่อเนื้อหาโดยใช้โมดูลที่กำหนดเอง 
7. ในตัวแก้ไขเนื้อหาให้คลิกโมดูลที่กำหนดเอง 
8. ในตัวแก้ไขแถบด้านข้างให้คลิกเมนูดรอปดาวน์ฟิลด์แบบอักษรและเลือกแบบอักษรของ Google 

ใช้แบบอักษรที่กำหนดเอง

เพื่อเป็นทางเลือกในการใช้แบบอักษรเว็บมาตรฐานหรือใช้ไลบรารีแบบอักษรเช่น Google Fonts คุณสามารถอัปโหลดไฟล์แบบอักษรจากนั้นใช้ในธีมหรืออ้างอิงในสไตล์ชีต 

ใช้แบบอักษรที่กำหนดเองในธีม

ในตัวแก้ไขธีมคุณสามารถอัปโหลดแบบอักษรที่กำหนดเองจากนั้นใช้แบบอักษรนั้นในหน้าเว็บและโพสต์รองรับไฟล์แบบอักษรในรูปแบบต่อไปนี้: TTF, OTF, WOFF

อัปโหลดแบบอักษรที่กำหนดเองสำหรับหน้าหรือโพสต์

เมื่อคุณอัปโหลดแบบอักษรที่กำหนดเองแล้วแบบอักษรจะพร้อมใช้งานสำหรับหน้าโพสต์หรือบทความฐานความรู้

1. ไปที่เนื้อหาของคุณ:

   • หน้าเว็บไซต์: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าเว็บไซต์
   • หน้า Landing Page: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > หน้าแลนดิ้ง
   • บล็อก: ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > บล็อก
2. คลิกที่ชื่อเนื้อหาของคุณ 
3. ในเครื่องมือแก้ไขเนื้อหาให้คลิกเมนูแก้ไขแล้วเลือกธีม: [ชื่อธีม]
4. ในเมนูแถบด้านข้างซ้ายให้คลิกเมนูดรอปดาวน์แบบอักษรใดก็ได้แล้วเลือกจัดการแบบอักษรของแบรนด์
5. ทำตามขั้นตอนในบทความฐานความรู้นี้เพื่อเพิ่มหรือแก้ไขแบบอักษรของคุณ

อัปโหลดแบบอักษรที่กำหนดเองสำหรับบทความฐานความรู้

เมื่อคุณอัปโหลดแบบอักษรที่กำหนดเองแล้วแบบอักษรจะพร้อมใช้งานสำหรับหน้าโพสต์หรือบทความฐานความรู้

1. ในบัญชี HubSpot ของคุณ ไปที่บริการ > ฐานความรู้
2. ที่ด้านบนขวาให้คลิกเทมเพลตปรับแต่ง
3. ในแถบด้านข้างซ้ายให้คลิกแท็บออกแบบ
4. ในแถบด้านข้างซ้ายให้คลิกสไตล์แบบอักษร
5. คลิกเมนูแบบเลื่อนลงแบบอักษรแล้วเลือกจัดการแบบอักษรของแบรนด์
6. ทำตามขั้นตอนในบทความฐานความรู้นี้เพื่อเพิ่มหรือแก้ไขแบบอักษรของคุณ

แก้ไขแบบอักษรที่กำหนดเอง

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

ใช้แบบอักษรที่กำหนดเองในสไตล์ชีต

นอกจากการใช้แบบอักษรเว็บมาตรฐานหรือการใช้ไลบรารีแบบอักษรเช่น Google Fonts แล้วคุณยังสามารถโฮสต์ไฟล์แบบอักษรในเครื่องมือไฟล์จากนั้นอ้างอิงไฟล์เหล่านั้นในสไตล์ชีตของคุณได้อีกด้วย 

โปรดทราบ: แบบอักษรที่กำหนดเองจะใช้ได้ในบัญชีที่มีการเข้าถึงตัวจัดการการออกแบบเท่านั้นและต้องใช้กับ CSS การเพิ่มแบบอักษรที่กำหนดเองจะไม่เพิ่มแบบอักษรลงในเมนูดรอปดาวน์การจัดแต่งทรงผมในตัวแก้ไขเนื้อหา 

หากต้องการใช้แบบอักษรในเนื้อหาให้อัปโหลดไฟล์ของแบบอักษรไปยังเครื่องมือไฟล์ขอแนะนำให้อัปโหลดฟอนต์อย่างน้อย .woff, .ttf และ .eot เพื่อให้แน่ใจว่าฟอนต์ของคุณโหลดได้ในทุกเบราว์เซอร์คุณสามารถใช้โหมดผู้เชี่ยวชาญบนเครื่องมือแปลงแบบอักษรกระรอกเพื่อสร้างรูปแบบไฟล์เพิ่มเติม

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ไฟล์
2. คลิก อัปโหลดไฟล์ 
3. บนฮาร์ดไดรฟ์ของคอมพิวเตอร์ของคุณให้เลือกไฟล์แบบอักษรจากนั้นคลิก เปิด 
4. คลิกชื่อของไฟล์แบบอักษรที่อัปโหลด 
5. ในแผงด้านขวาให้คลิกคัดลอก URL เพื่อคัดลอก URL ที่ไฟล์โฮสต์ คุณจะต้องใช้ URL สำหรับแบบอักษรในแต่ละรูปแบบไฟล์ 

ใช้แบบอักษรที่กำหนดเองในสไตล์ชีต

เมื่อเพิ่มแบบอักษรที่กำหนดเองลงในเครื่องมือไฟล์แล้วก็นำไปอ้างอิงในสไตล์ชีตได้เลยรูปแบบอักษรแต่ละแบบ (ตัวเอียงตัวหนาฯลฯ) จะต้องมีกฎ @ font-face แยกต่างหากเรียนรู้เพิ่มเติมเกี่ยวกับการทำงานกับสไตล์ชีตใน HubSpot 

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้เปิดสไตล์ชีตที่ใช้สำหรับเนื้อหาของคุณ
3. สำหรับแต่ละสไตล์แบบอักษร: 
   • ที่ด้านบนของสไตล์ชีตให้วางรหัสต่อไปนี้: 

@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

1. • • แทนที่ชื่อแบบอักษร ของคุณด้วยชื่อแบบอักษร
     • แทนที่ your_font_file.xxx? ด้วย URL จากเครื่องมือไฟล์ ทำซ้ำสำหรับแต่ละรูปแบบไฟล์

4. สร้างกฎ CSS ด้วยคุณสมบัติแบบอักษรสำหรับครอบครัวเพื่อใช้แบบอักษรที่กำหนดเอง 
5. ที่ด้านบนขวาให้คลิกอัพเดทหรือเผยแพร่เพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 

ใช้แบบอักษรที่กำหนดเองในเทมเพลตอีเมลที่กำหนดเอง

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้เปิดเทมเพลตอีเมลที่กำหนดเอง
3. สำหรับแต่ละสไตล์แบบอักษร:
   • ในส่วน < head > ของเทมเพลตให้วางโค้ดนี้ระหว่างแท็ก < style >.... : 

@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

1. • แทนที่ชื่อแบบอักษร ของคุณด้วยชื่อแบบอักษร
   • แทนที่ your_font_file.xxx? ด้วย URL จากเครื่องมือไฟล์ ทำซ้ำสำหรับแต่ละรูปแบบไฟล์ 

4. ในรหัสของเนื้อหาอีเมลให้เพิ่มแบบอักษรที่กำหนดเองในการจัดแต่งแบบอินไลน์ 
5. ที่ด้านบนขวาให้คลิกอัพเดทหรือเผยแพร่เพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 

ใช้แบบอักษรที่กำหนดเองใน CTA

หลังจากเพิ่มแบบอักษรที่กำหนดเองลงในธีมแล้วคุณสามารถใช้กับ CTA ได้:

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > CTA
2. ที่ด้านบนซ้ายให้คลิกเมนูแบบเลื่อนลงแล้วเลือก CTA
3. วางเมาส์เหนือ CTA แล้วคลิกการดำเนินการ > แก้ไข 
4. ในแผงด้านซ้ายของเครื่องมือแก้ไข CTA ให้คลิกแท็บออกแบบ  
5. คลิกส่วนสไตล์เพื่อขยาย
6. คลิกเมนูแบบเลื่อนลงแบบอักษรหลักและเลือกแบบอักษรที่กำหนดเองของคุณ 
7. สร้าง CTA ของคุณต่อ 

ใช้แบบอักษรที่กำหนดเองใน CTA (ดั้งเดิม)

เช่นเดียวกับ CTA หลังจากอัปโหลดไฟล์แบบฟอร์มที่กำหนดเองแล้วคุณสามารถใช้กับ CTA แบบเดิมได้:

1. ในบัญชี HubSpot ของคุณ ไปที่ การตลาด > CTA
2. วางเมาส์เหนือ CTA แล้วคลิกการดำเนินการ > แก้ไข 
3. ที่แผงด้านขวาให้คลิกตัวเลือกขั้นสูง 
4. ในกล่องข้อความให้วางรหัสนี้:
   
   font-family: 'Your Font Name';
5. แทนที่ชื่อแบบอักษรของคุณด้วยชื่อแบบอักษร
6. ที่ด้านล่างขวาให้คลิกถัดไปจากนั้นคลิก  บันทึก

ใช้แบบอักษรที่กำหนดเองในโมดูลที่กำหนดเอง

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในเครื่องมือค้นหา ให้เปิดโมดูลที่กำหนดเอง
3. ในส่วน module.css ให้วางรหัสต่อไปนี้: 

@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

5. แทนที่ชื่อแบบอักษร ของคุณด้วยชื่อแบบอักษร
6. แทนที่ your_font_file.xxx? ด้วย URL จากเครื่องมือไฟล์ ทำซ้ำสำหรับแต่ละรูปแบบไฟล์
7. สร้างกฎ CSS ด้วยคุณสมบัติแบบอักษรสำหรับครอบครัวเพื่อใช้แบบอักษรที่กำหนดเอง 
8. ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลงเพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์