Cách đổi font chữ trên Squarespace 7.1 (Site Styles + CSS)

Đổi font chữ trên Squarespace 7.1 trong Site Styles, tải lên file font riêng hoặc dùng CSS tùy chỉnh cho một phần tử. Có các bước, bảng chọn cách làm và cách sửa lỗi.

Câu hỏi thường gặp

Làm sao để đổi font chữ cho toàn bộ website Squarespace của tôi?

Với website phiên bản 7.1, hãy mở Site Styles, nhấp vào Fonts, rồi chọn một font pack được đề xuất hoặc mở All Font Packs và lọc theo sans-serif, serif hoặc kết hợp. Một font pack sẽ thiết lập font cho tiêu đề, đoạn văn, nút bấm và văn bản khác chỉ trong một lần.

Tôi có thể dùng bất kỳ Google Font nào trong Squarespace không?

Bạn có thể tìm Google Fonts theo tên trong danh sách font thả xuống, nhưng trung tâm trợ giúp của Squarespace cho biết không phải Google Font nào cũng có trong thư viện của họ. Nếu font bạn muốn bị thiếu, bạn có thể tự tải file font lên, miễn là giấy phép cho phép.

Squarespace cho phép tải lên những loại file font nào?

Công cụ tải font trong Site Styles chấp nhận file OTF, TTF, WOFF và WOFF2. Khu vực Custom Files riêng dùng với trình soạn thảo CSS chỉ liệt kê TTF, OTF và WOFF, vì vậy với file WOFF2 hãy dùng công cụ tải lên trong Site Styles thay vì khu vực file CSS.

Tôi có cần xin phép để tải lên font tùy chỉnh không?

Có. Trung tâm trợ giúp của Squarespace cho biết bạn cần có sự cho phép của chủ sở hữu hoặc đơn vị cấp phép font để dùng font đó trên website. Hãy kiểm tra giấy phép sử dụng trên web trước khi tải lên.

Tại sao các bước đổi font trên website của tôi lại khác?

Website phiên bản 7.0 và 7.1 có cài đặt font khác nhau. Các bước trong hướng dẫn này dành cho 7.1. Trên 7.0, việc đổi font được thực hiện qua Site Styles trong bảng Design. Squarespace cũng lưu ý rằng font Adobe tùy chỉnh đã thiết lập trên 7.0 không được hỗ trợ trên 7.1, nên bạn sẽ cần chọn một font có sẵn của 7.1.

CSS tùy chỉnh có được giữ lại khi tôi đổi template không?

Trên website phiên bản 7.0, Squarespace cho biết CSS tùy chỉnh không được chuyển sang khi bạn đổi template. Hãy lưu lại một bản sao của mọi đoạn CSS bạn thêm để có thể dán lại khi cần.

Trả lời ngắn gọn: Trên website Squarespace 7.1, hãy mở Site Styles, nhấp vào Fonts, rồi chọn một font pack hoặc chỉnh riêng từng nhóm Headings (Tiêu đề), Paragraphs (Đoạn văn), Buttons (Nút bấm) và Miscellaneous (Khác). Nếu muốn dùng font chưa có trong thư viện, hãy tải file font của bạn lên ngay trong cùng bảng điều khiển này. Chỉ dùng CSS tùy chỉnh khi bạn cần thay đổi một phần tử cụ thể.

Hướng dẫn này nêu các bước cho phiên bản 7.1, theo trung tâm trợ giúp của Squarespace (kiểm tra vào tháng 11/2026). Nếu website của bạn đang dùng phiên bản 7.0, tên các bảng điều khiển sẽ khác; xem phần lưu ý về phiên bản ở gần cuối bài.

Nên chọn cách nào?

Hãy chọn cách đơn giản nhất mà vẫn đạt được kết quả bạn muốn. Càng xuống cuối bảng, bạn càng phải thiết lập nhiều hơn.

Bạn muốn	Cách phù hợp nhất	Mức độ công sức
Đổi toàn bộ diện mạo chỉ với một cú nhấp	Font pack trong Site Styles	Thấp
Font khác nhau cho tiêu đề và nội dung	Chọn font theo từng nhóm trong Site Styles	Thấp
Một Google Font cụ thể	Tìm trong danh sách font thả xuống	Thấp
Font thương hiệu mà bạn có giấy phép	Tải lên file font	Trung bình
Chỉ một tiêu đề, một nút bấm hoặc một khu vực	CSS tùy chỉnh	Trung bình đến cao

Cách 1: Đổi font bằng font pack

Một font pack thiết lập các font đồng bộ cho mọi nhóm văn bản cùng lúc, đây là cách nhanh nhất để làm mới giao diện website.

Mở trình chỉnh sửa và nhấp vào Site Styles (biểu tượng cây cọ).
Nhấp vào Fonts.
Chọn một trong các pack được đề xuất, hoặc nhấp vào All Font Packs rồi lọc theo sans-serif, serif hoặc kết hợp.
Cuộn qua các trang để kiểm tra tiêu đề, nội dung và nút bấm trước khi đóng bảng điều khiển.

Font pack là điểm khởi đầu tốt, nhưng đôi khi bạn sẽ thích font tiêu đề mà không thích font nội dung. Cách tiếp theo sẽ giải quyết việc đó.

Cách 2: Đổi font cho từng nhóm văn bản

Trong mục Fonts, Squarespace chia văn bản thành bốn nhóm. Bạn có thể thiết lập riêng từng nhóm:

Headings (Tiêu đề): tiêu đề trang và các kiểu tiêu đề trong khối văn bản.
Paragraphs (Đoạn văn): nội dung chính.
Buttons (Nút bấm): nhãn của nút.
Miscellaneous (Khác): văn bản nhỏ hơn như chú thích và nhãn biểu mẫu (phạm vi chính xác của nhóm này thay đổi tùy template, nên hãy kiểm tra vài trang sau khi đổi).

Để đổi một nhóm:

Trong Site Styles > Fonts, nhấp vào nhóm bạn muốn, ví dụ Headings.
Mở danh sách font thả xuống và tìm theo tên.
Chọn font, rồi điều chỉnh kiểu chữ, độ đậm và cỡ chữ nếu cần.
Với Adobe Fonts, hãy dùng liên kết Additional Fonts ở cuối danh sách.

Squarespace cũng cho phép đặt một cỡ chữ cơ sở để các văn bản khác co giãn theo, vì vậy nếu sau khi đổi font mọi thứ trông quá lớn hoặc quá nhỏ, hãy chỉnh cỡ chữ cơ sở trước khi thay đổi kích thước từng khối.

Một mẹo thực tế: hãy đổi tiêu đề và đoạn văn ở hai lượt riêng. Nếu đổi cả hai cùng lúc mà thấy có gì đó không ổn, bạn sẽ không biết nguyên nhân là do font nào. Để chọn cặp font phù hợp, hãy xem hướng dẫn của chúng tôi về cách chọn font chữ cho website.

Cách 3: Tải lên font của riêng bạn

Nếu thương hiệu của bạn dùng một font chưa có trong thư viện, hãy tải nó lên. Squarespace cho biết bạn cần có sự cho phép của chủ sở hữu hoặc đơn vị cấp phép font để dùng font theo cách này.

Chuẩn bị file font ở định dạng OTF, TTF, WOFF hoặc WOFF2. Công cụ tải lên trong Site Styles chấp nhận cả bốn định dạng.
Mở Site Styles > Fonts, chọn một nhóm (hoặc danh sách font thả xuống) và tìm tùy chọn tải lên.
Kéo file của bạn vào bảng font đã tải lên, hoặc nhấp vào biểu tượng dấu cộng rồi chọn file từ máy tính.
Chọn font vừa tải lên cho nhóm bạn muốn.
Xuất bản, sau đó xem website thật trên máy tính và điện thoại để chắc chắn font được tải đúng.

Cách diễn đạt trên giao diện thỉnh thoảng thay đổi, nên nếu nút có tên khác, hãy tìm biểu tượng tải lên hoặc dấu cộng trong danh sách font thả xuống.

Các lỗi thường gặp khi tải font lên

Font xuất hiện trong danh sách nhưng hiển thị sai. File có thể thiếu một độ đậm hoặc kiểu chữ (đậm, nghiêng). Hãy tải lên mỗi độ đậm bạn định dùng dưới dạng một file riêng.
Font hiển thị đúng trong trình chỉnh sửa nhưng khách truy cập không thấy. Hãy làm mới cứng (hard refresh) trang đã xuất bản và kiểm tra giấy phép của file font có cho phép dùng trên web không.
Bạn đã tải lên file WOFF2 và cố tham chiếu nó từ khu vực file CSS. Khu vực Custom Files trong trình soạn thảo CSS chỉ liệt kê TTF, OTF và WOFF là các loại font, không có WOFF2. Hãy dùng công cụ tải lên trong Site Styles cho WOFF2.

Cách 4: Nhắm vào một phần tử bằng CSS tùy chỉnh

Site Styles đổi font trên toàn website theo từng nhóm. Khi bạn cần một ngoại lệ, chẳng hạn một tiêu đề dùng font khác, CSS tùy chỉnh có thể làm được. Hướng dẫn CSS của Squarespace khuyên nên giới hạn CSS ở font, màu sắc và nền, vì các thay đổi khác có thể làm hỏng bố cục của bạn.

Hãy tải font lên trước bằng Cách 3, hoặc chọn một font trong thư viện, để font đã sẵn sàng trên website của bạn.
Mở Website > Pages > Custom CSS (đường dẫn chính xác có thể khác đôi chút tùy website).
Dán một quy tắc như ví dụ dưới đây, rồi lưu lại.

```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; } ```

Hãy thay "Your Font Name" bằng đúng tên hiển thị trong Site Styles. Font dự phòng chung (serif hoặc sans-serif) giúp văn bản vẫn dễ đọc nếu font không tải được. Tên class có thể khác nhau tùy template và các bản cập nhật của Squarespace, vì vậy hãy dùng công cụ kiểm tra (inspector) của trình duyệt để xác nhận bộ chọn cho phần tử bạn muốn nhắm tới.

Nếu bạn chỉ áp dụng CSS cho một trang, trung tâm trợ giúp của Squarespace có mô tả các tùy chọn ở cấp trang; hãy xem lại các bước hiện hành ở đó trước khi dựa vào cách này.

Danh sách kiểm tra font nhanh trước khi xuất bản

Sao chép danh sách này và rà soát một lượt.

[ ] Tiêu đề và nội dung dùng không quá hai họ font.
[ ] Nội dung dễ đọc trên điện thoại, không chỉ trên máy tính.
[ ] Mọi độ đậm bạn dùng (thường, đậm, nghiêng) đều có trong font.
[ ] Bạn có giấy phép dùng trên web cho mọi font đã tải lên.
[ ] Nút bấm và nhãn biểu mẫu dùng font hài hòa với phần còn lại của trang.
[ ] Bạn đã lưu một bản sao của mọi đoạn CSS tùy chỉnh đã thêm.
[ ] Bạn đã kiểm tra website thật, không chỉ bản xem trước trong trình chỉnh sửa.

Phiên bản 7.0 và 7.1

Trung tâm trợ giúp của Squarespace nêu rõ các tùy chọn font của 7.1 chỉ áp dụng cho website 7.1 và website 7.0 có cài đặt font riêng. Trên 7.0, việc đổi font được thực hiện qua Site Styles trong bảng Design. Nếu bạn đang cân nhắc chuyển phiên bản, Squarespace có công cụ cập nhật, và bài đánh giá Squarespace của chúng tôi so sánh trình chỉnh sửa hiện tại với các lựa chọn khác. Nếu font chữ chỉ là một trong nhiều điều khiến bạn khó chịu, trang các lựa chọn thay thế Squarespace liệt kê những nền tảng xây dựng website khác, còn bảng phân tích chi phí của chúng tôi cho thấy tổng chi phí của một website Squarespace.

Nếu bạn đang bắt đầu một website mới

Khi chọn template hoặc xây dựng website từ đầu, hãy chọn kiểu chữ trước. Cách này dễ hơn nhiều so với sửa lại sau. Gói miễn phí của We.Inc cho phép bạn xuất bản tối đa ba website từ các template có sẵn; trình xây dựng AI tạo bản nháp website từ một câu lệnh bắt đầu ở gói Starter với giá $20 một tháng. Bạn có thể đăng ký tại đây.