Thêm phông chữ tùy chỉnh vào chủ đề Shopify của bạn

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. Dưới đây là hướng dẫn về cách thực hiện:

1. 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.

2. 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ữ bạn thêm vào có thể đọc được trên tất cả các loại trình duyệt.

   

3. Sau khi có đủ file các bạn upload vào thư mục File trong Theme settings .

   

   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.

   

4. Tiếp theo, quay lại bảng điều khiển quản trị viên của bạn, nhấp vào Cửa hàng trực tuyến > Chủ đề và chọn chủ đề Be Yours để chỉnh sửa thêm. Nhấp vào ... > Chỉnh sửa mã .

   

5. Trong cửa sổ chỉnh sửa mã đang mở, bạn điều hướng đến thư mục Snippets ở cột bên trái. Trong thư mục này, nhấp vào tệp “css-variables.liquid” để thêm một số mã tùy chỉnh cho phông chữ mới.

   

6. 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:

    @font-face {
    font-family: "MyFontHeading";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }
   
    @font-face {
    font-family: "MyFontBody";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') 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ó.

   

7. 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')

8. Sau khi thay thế, mã nhận xét ở ô màu đỏ sẽ được thay thế bằng mã ở ô màu xanh lá cây. Nó trông giống như bức ảnh dưới đây:

   

9. Cuối cùng, nhấp vào Lưu .

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.

Cần hỗ trợ thêm

Nếu bạn gặp bất kỳ vấn đề nào hoặc cần trợ giúp thêm với chủ đề BeYours của mình, vui lòng liên hệ với bộ phận hỗ trợ của chúng tôi thông qua Hệ thống vé của chúng tôi để được hỗ trợ trong vòng 8 giờ.

Quét mã QR bên dưới để tham gia cộng đồng WhatsApp của chúng tôi để biết thông tin cập nhật, tin tức và thông báo.