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

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

อัปเดตล่าสุด: 18 พฤษภาคม 2026

สามารถใช้ได้กับการสมัครใช้บริการใดๆ ต่อไปนี้ ยกเว้นที่ระบุไว้:

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

ก่อนที่คุณจะเริ่มต้น

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

{{kbBadge (local.required_permissions)}} ผู้ใช้อาจต้องการสิทธิ์เพิ่มเติมขึ้นอยู่กับตำแหน่งที่ใช้แบบอักษร:

ทำความเข้าใจข้อจำกัดและข้อพิจารณา

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

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

  
หน้า - เทมเพลตธีม ✓ มีให้บริการในการตั้งค่าธีมและผ่านสไตล์ชีต ✓  
หน้า - เทมเพลตรหัส ✓ ใช้ได้ผ่านสไตล์ชีตหรือโมดูลที่กำหนดเอง พร้อมใช้งานผ่านสไตล์ชีต  
บล็อก ✓ ใช้ได้ผ่านสไตล์ชีตหรือโมดูลที่กำหนดเอง ✓  
อีเมล แบบอักษรเริ่มต้นบางแบบไม่พร้อมใช้งานในตัวแก้ไขอีเมลแบบลากและวาง ใช้ได้กับเทมเพลตอีเมลที่กำหนดเองเท่านั้นไม่รองรับในไคลเอนต์อีเมลส่วนใหญ่ ใช้ได้กับเทมเพลตอีเมลที่กำหนดเองเท่านั้นไม่รองรับในไคลเอนต์อีเมลส่วนใหญ่
ฐานความรู้  
ไม่สามารถปรับแต่งแบบอักษรในเครื่องมือแก้ไขบทความได้ มีอยู่ในการตั้งค่าธีม  มีอยู่ในการตั้งค่าธีม
โมดูลที่กำหนดเอง  
✓ ใช้ได้กับโมดูลที่กำหนดเองที่ไม่ได้ใช้ในอีเมล ใช้ได้กับโมดูลที่กำหนดเองที่ไม่ได้ใช้ในอีเมล  
CTA (ดั้งเดิม) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

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

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

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

    • หน้าเว็บไซต์: {{local.navWebsitePages}}
    • หน้า Landing Page: {{local.navLandingPages}}
    • บล็อก: {{local.navBlog}}
    • อีเมล: {{local.navEmail}}
  2. คลิกที่ชื่อเนื้อหาของคุณ
  3. ในตัวแก้ไขเนื้อหาให้คลิกโมดูลข้อความแบบสมบูรณ์จากนั้นไฮไลต์ข้อความที่คุณต้องการแก้ไข 
  4. ในแถบเครื่องมือ Rich Text ให้คลิกเมนูแบบเลื่อนลงแบบอักษรและเลือกแบบอักษร แบบอักษรต่อไปนี้มีอยู่ในโมดูลข้อความสมบูรณ์:
{% module_block module "widget_3f9f7047 - a8f4 -4259 -9876 -69e20c023ea3 "%}{% module_attribute" child_css "is_json =" true "%}{% raw %} {} {% endraw %}{% end_module_attribute %}{% module_attribute" css "is_json =" true "%}{% raw %}{% endraw %}{% endraw %}{% end_module_attribute %}{% module_attribute" definition_id "is_json =" true "%{% raw %} เป็นโมฆะ {% endraw %}{% end_module_attribute %}{% module_attribute" field_types "is_json =" true "%{% raw %}{" deep_link_key ":" text "," style ":" group "," tab ":" tab "," alignment "," orientation "," tab =" เลือก" end "{%} เป็นโมดูล "end "%{%} attribute %}{% module_attribute" module_id "is_json =" true "%}{% raw %} 80990973868 {% endraw %}{% end_module_attribute %}{% module_attribute" path "is_json =" true "%}{% raw %}/_ Web Team Assets/Component Modules/modules/tabs "{% endraw %}{% end_module_attribute %}{% module_attribute" schema_version "is_json =" true "%}{% raw %} 2 {% endraw %}{% end_module_attribute %}{% module_attribute" smart_objects "is_json =" true "%{ }{% raw %}[]{% endraw %}{% end_module_attribute %{%}{% module_attribute" smart_type "is_json ="" true }{%}%{ raw_objects" is_json ="" is_json =" true "}%{%} ไม่ใช่ "%{% endraw %}[ endraw %}[] สไตล์ {%]{% endraw %}{%]{% end_attribute %}{%}{% }{% end_attribute %}{% end_attribute %}= end_attribute %}, "padd" padding ""," theme ":" white "}{% endraw %}{% end_module_attribute %}{% module_attribute" tabs "is_json =" true "%}{% raw %} [{" use_columns ": false ," contentAlignment ":" left "," layout ":{" mediaBgColor ":" accent -01 "," mediaSize ":" medium-media "," order ":" media-first "}," content ":"\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n
\ n
แบบอักษรเริ่มต้น
\ n
แบบอักษรของแบรนด์Merriweather
อันเดลโมโนโมนาโก
Arialสัญลักษณ์
จอง Antiquaทาโฮมา
พาร์ทเนอร์จัดส่งใหม่เทอร์มินอล
จอร์เจียTimes New Roman
เฮลเวติก้าTrebuchet MS
ผลกระทบVerdana
ลาโต้ 
"," video ": []," image ": {" height ": null ," loading ":" disabled "," max_height ": null ," max_width ": null ," size_type ": null ," src ":""," width ": null }," imageSize ":" default "," columns ":[]," mediaType ":" no_media "," tabLabel ":" Pages/Blogs "},{" use_columns ": false ," contentAlignment ":" left "," layout ":{" mediaBgColor ":" accent -01 "," mediaSize ":" medium-media "," order ":" media-first "}," content ":"\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n\ n
\ n
แบบอักษรเริ่มต้น
\ n
ArialMerriweather *
พาร์ทเนอร์จัดส่งใหม่ทาโฮมา
จอร์เจียTimes New Roman
เฮลเวติก้าTrebuchet MS
Lato *Verdana
* ใช้ได้เฉพาะเป็นแบบอักษรเว็บในตัวแก้ไขอีเมลแบบลากและวางเท่านั้น
\ n

 

"," video ": []," image ": {" height ": null ," loading ":" disabled "," max_height ": null ," max_width ": null ," size_type ": null ," src ":""," width ": null }," imageSize ":" default "," columns ":[]," mediaType ":" no_media "," tabLabel ":" Email "}]{% endraw %}{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json =" true "%{ }{% raw %}" module "{% endraw %}{% end_module_attribute "type" is_json =" true "%{ }{% raw %}" module_endraw %}{% end_module_attribute %}{% end_attribute_field_wrap "field =" json ="%{}

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

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

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

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

  1. ไปที่ fonts.google.com
  2. ในแถบค้นหาให้ป้อนชื่อแบบอักษร 
  3. คลิกที่ชื่อแบบอักษรเพื่อดูรายการรูปแบบที่สามารถนำเข้าได้
  4. คลิกรับแบบอักษรที่ด้านบนขวา
  5. คลิกรับโค้ดฝังที่ด้านบนขวา
  6. ในคอลัมน์ด้านขวาให้เลือก @ import บนแท็บเว็บ
  7. คัดลอกรหัสนำเข้า @ โดยไม่มีแท็ก < style >
  8. คัดลอก โค้ดคลาส CSS สำหรับการตั้งค่ากฎ CSS 

On the Google Fonts page, the Web tab is displayed for embedding a Google Font. A box is placed around the embed code and the Copy code button for the CSS class.

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

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

  1. คัดลอกโค้ด @ import ของฟอนต์จาก Google Fonts
  2. {{local.navDesignManager}}
  3. ในตัวค้นหาให้เปิดสไตล์ชีตที่ใช้สำหรับเนื้อหาของคุณ
  4. วางโค้ด @ import ลงในบรรทัดที่ 1 ของสไตล์ชีต 
  5. เพิ่มโค้ดสำหรับการตั้งค่ากฎ CSS ไปยังตัวเลือกที่เหมาะสมในสไตล์ชีต
  6. ที่มุมขวาบนให้คลิกเผยแพร่ การเปลี่ยนแปลงเพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 
In the design manager, a CSS file is displayed. In the code editor, a Google Font import code is at the top of the file, followed by CSS rules to appropriate selectors in the stylesheet.

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

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

{{kbBadge (local.required_subscriptions_badge)}} ต้องสมัครใช้งาน Marketing Hub Professional หรือ Enterprise เพื่อสร้างเทมเพลตอีเมลที่กำหนดเอง


วิธีเพิ่มแบบอักษร Google ลงในเทมเพลตอีเมลที่กำหนดเอง: 

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

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

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

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

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

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

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

  1. {{local.navDesignManager}}
  2. ในตัวค้นหาให้คลิกชื่อของโมดูลที่กำหนดเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างโมดูลที่กำหนดเอง
  3. ในตัวตรวจสอบให้คลิกเมนูแบบเลื่อนลงเพิ่มฟิลด์ในส่วนฟิลด์และเลือกแบบอักษร ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับฟิลด์แบบอักษร
In the design manager, the inspector is displayed for a custom module. A box is placed around the Add field dropdown menu in the Fields section.
  1. ที่มุมขวาบนให้คลิกเผยแพร่การเปลี่ยนแปลงเพื่อแสดงการเปลี่ยนแปลงแบบเรียลไทม์ 
  2. ไปที่เนื้อหาของคุณ:
    • หน้าเว็บไซต์: {{local.navWebsitePages}}
    • หน้า Landing Page: {{local.navLandingPages}}
    • บล็อก: {{local.navBlog}}
  3. คลิกชื่อเนื้อหาโดยใช้โมดูลที่กำหนดเอง 
  4. ในตัวแก้ไขเนื้อหาให้คลิกโมดูลที่กำหนดเอง 
  5. ในตัวแก้ไขแถบด้านข้างให้คลิกเมนูดรอปดาวน์ฟิลด์แบบอักษรและเลือกแบบอักษรของ Google 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ font-face {
font-family: 'ชื่อแบบอักษรของคุณ ';
src: url (' your_font_file.eot?') format (' eot '), url (' your_font_file.woff ') format (' woff '), url (' your_font_file.ttf ') format (' truetype ');}

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

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

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

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

@ font-face {
font-family: 'ชื่อแบบอักษรของคุณ ';
src: url (' your_font_file.eot?') format (' eot '), url (' your_font_file.woff ') format (' woff '), url (' your_font_file.ttf ') format (' truetype ');}

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

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

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

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

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

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

  1. {{local.navCTAs}}
  2. วางเมาส์เหนือ CTA แล้วคลิกการดำเนินการ > แก้ไข 
  3. ที่แผงด้านขวาให้คลิกตัวเลือกขั้นสูง 
  4. ในกล่องข้อความให้วางรหัสนี้:

    font-family: 'Your Font Name';
  5. แทนที่ชื่อแบบอักษร ของคุณด้วยชื่อแบบอักษร
  6. ที่ด้านล่างขวาให้คลิกถัดไปจากนั้นคลิก บันทึก

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

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

  1. {{local.navDesignManager}}
  2. ในตัวค้นหาให้คลิกชื่อของโมดูลที่กำหนดเอง
  3. ในตัวแก้ไขโมดูลสำหรับส่วน module.css ให้วางรหัสต่อไปนี้:

@ font-face {
font-family: 'ชื่อแบบอักษรของคุณ ';
src: url (' your_font_file.eot?') format (' eot '), url (' your_font_file.woff ') format (' woff '), url (' your_font_file.ttf ') format (' truetype ');}

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

เนื้อหาที่เกี่ยวข้อง

New call-to-action