---
title: วิธีเปลี่ยนแบบอักษร
slug: th/user-guides/ENVMdWDE8ib1nGevmCrhu
description: เรียนรู้วิธีเปลี่ยนแบบอักษรในคอลเลกชันที่เผยแพร่ของคุณได้อย่างง่ายดายด้วยคำแนะนำทีละขั้นตอนของเรา เพิ่มความสวยงามและสไตล์ให้คอลเลกชันของคุณโดยอ้างอิงและเพิ่มลิงก์ฟอนต์โดยใช้ Custom CSS ในแท็บ Settings ทำตามตัวอย่างของเราเพื่อความสะดวก
createdAt: 2022-02-11T08:06:27.000Z
---

เมื่อคุณเผยแพร่คอลเลกชัน คุณสามารถควบคุมลักษณะที่ปรากฏได้โดยการเพิ่ม [CSS แบบกำหนดเอง](docId:6z-uqEYC9w-bsvxAYCzR3) ในส่วน [โค้ดกำหนดเอง](docId\:aPYZRjeY39Et52VoCYJCC) นี้

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

## 1. การใช้ Google Fonts

::::WorkflowBlock
:::WorkflowBlockItem
คลิกที่ไอคอนรูปเฟือง ⚙️ เพื่อเปิด **การตั้งค่าสเปซ**
:::

:::WorkflowBlockItem
มองหาแท็บ **การแสดงผล** ในหน้าต่างการตั้งค่าสเปซ
:::

:::WorkflowBlockItem
เลื่อนลงไปที่ **ฟอนต์แบบกำหนดเอง **และเปิดใช้งาน
:::

:::WorkflowBlockItem
เลือกฟอนต์ที่ต้องการ และการเปลี่ยนแปลงจะถูกบันทึกโดยอัตโนมัติ
:::
::::

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/nbN4MagEC7RqaC0FLQa16_guides-gfonts-light.png)

## 2. ใช้ Custom CSS เพื่ออ้างอิงฟอนต์

::::WorkflowBlock
:::WorkflowBlockItem
คลิกที่ไอคอนเฟือง ⚙️ เพื่อเปิด**การตั้งค่า Space**
:::

:::WorkflowBlockItem
มองหาแท็บ**Custom Code** ในหน้าต่างการตั้งค่า Space
:::

:::WorkflowBlockItem
เพิ่มลิงก์ฟอนต์ในช่อง**Include Headers**

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/1T8J80RasE65zjsyGTPw3_guides-cssheading-light.png)

**ตัวอย่าง Include Headers สำหรับฟอนต์:**

```html
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300&display=swap" rel="stylesheet"/>
```
:::

:::WorkflowBlockItem
เพิ่มคุณสมบัติ CSS

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/XtWUUM0yHexmsaKz-039h_guides-cssfont-light.png)

```css
<style>
body {
    font-family: Hind Siliguri, sans-serif !important;
}
</style>
```
:::
::::