Shopify cung cấp hàng trăm phông chữ miễn phí để sử dụng cho cửa hàng của bạn. Tuy nhiên, bạn cần sử dụng phông chữ tùy chỉnh để phù hợp với nguyên tắc thương hiệu của mình nhưng phông chữ này không được Shopify hỗ trợ, bạn vẫn có thể thêm phông chữ đó vào chủ đề của mình.
 |  |
Bạn có thể tùy chỉnh phông chữ trong chủ đề Concept của mình bằng một trong hai phương pháp dưới đây:
Chỉnh sửa mã lỏng (Rất khuyến khích)
Dưới đây là hướng dẫn 9 bước để đạt được điều này:
Trước tiên, bạn cần phải có sẵn phông chữ của mình. Một số phông chữ có giấy phép, vì vậy hãy đảm bảo bạn mua chúng đúng cách để sử dụng. Nhóm hỗ trợ của chúng tôi sẽ không chịu trách nhiệm nhận các phông chữ bạn yêu cầu.
Tiếp theo, chuẩn bị hai tệp có định dạng .woff và .woff2 cho mỗi kiểu phông chữ cần thêm. Điều này nhằm đảm bảo rằng phông chữ được thêm của bạn có thể đọc được trên tất cả các loại trình duyệt.
Sau khi có đủ file, bạn tải chúng lên qua [Bảng điều khiển quản trị] > [Nội dung] 1 > [Tệp] 2 > [Tải lên] 3 .
Tất cả các tệp phông chữ đã tải lên của bạn đều có nút chuỗi ở bên phải để cung cấp liên kết tệp cho hành động sao chép của bạn.
Tiếp theo, quay lại bảng điều khiển quản trị của bạn, nhấp vào [Cửa hàng trực tuyến] 1 > [Chủ đề] 2 > chọn Chủ đề khái niệm > nhấp vào [Hành động] 3 > [Chỉnh sửa mã] 4 .
Trong cửa sổ chỉnh sửa mã đang mở, bạn điều hướng đến thư mục [Đoạn mã] 1 ở cột bên trái. Trong thư mục này, nhấp vào tệp [css-variables.liquid] 2 để thêm một số mã tùy chỉnh cho phông chữ mới.
Trong file mở file “css-variables.liquid”, bạn thêm mã bổ sung theo kiểu tab. Nó có thể được tìm thấy dưới dòng chữ {%- style -%} . Các mã được thêm vào như sau:
@mặt chữ {
họ phông chữ: "MyFontHeading";
src: url(' thêm liên kết tập tin phông chữ của bạn ') format("woff2"),
url(' thêm liên kết tập tin phông chữ của bạn ') format("woff"); }
@mặt chữ {
họ phông chữ: " MyFontBody";
src: url(' thêm liên kết tập tin phông chữ của bạn ') format("woff2"),
url(' thêm liên kết tập tin phông chữ của bạn ') format("woff"); }Lưu ý: Các phần chữ in nghiêng do bạn tùy chỉnh. Số lượng mã @font-face{ } được thêm vào tùy thuộc vào số lượng kiểu phông chữ mà bạn có.
Sau đó, bạn:
Tìm kiếm văn bản “font-heading-family” và thay thế tất cả các phần của {{...}} bằng văn bản đã thêm của bạn cho dòng font-family ('MyFontBody' trong ví dụ của chúng tôi).
Tìm kiếm văn bản “font-body-family” để điều hướng đến dòng mã có liên quan và thay thế tất cả các phần của {{...}} bằng văn bản bạn đã thêm cho font-family trong mã của bước 6 (trong ví dụ của chúng tôi, đó là 'MyFontHeading')
Sau khi thay thế sẽ như hình bên dưới:
Ghi chú:
- Các cài đặt trong Cài đặt chủ đề > Kiểu chữ không còn hiệu lực cho dù bạn định cấu hình ở đây như thế nào sau khi bạn thêm các mã này vào tệp “css-variables.liquid”.
- Tất cả các hướng dẫn trên đều có thể áp dụng khi bạn áp dụng cùng một phông chữ tùy chỉnh cho tất cả các phần và khối. Trong trường hợp bạn cần áp dụng nhiều phông chữ khác nhau cho các phần hoặc khối khác nhau, quá trình chỉnh sửa sẽ phức tạp hơn nhiều và vui lòng liên hệ với nhóm hỗ trợ của chúng tôi để được trợ giúp thêm.
Sử dụng ứng dụng RoarTheme
Mặc dù Shopify cung cấp bộ sưu tập phông chữ miễn phí khổng lồ nhưng bạn có thể cần phông chữ tùy chỉnh để phù hợp với nguyên tắc thương hiệu của mình. Nếu phông chữ bạn muốn không được Shopify hỗ trợ nguyên bản, đừng lo lắng! Nhóm của chúng tôi đã phát triển một ứng dụng cung cấp nhiều tùy chọn tùy chỉnh phông chữ để nâng cao thiết kế web của bạn. Khám phá các khả năng và nâng cao tính thẩm mỹ cho cửa hàng của bạn với ứng dụng của chúng tôi .
Chúng tôi hy vọng bạn thấy bài viết này hữu ích! Nếu bạn có bất kỳ thắc mắc nào về tính năng này, vui lòng liên hệ với nhóm của chúng tôi để được hỗ trợ thêm.
